CSS基礎學習筆記

初學css所以就以部落格的形式記錄下來，權當是個記事本了。

css規則由倆個主要部分構成：選擇器，以及一條或多條宣告

selector

每條宣告由乙個屬性和乙個值組成

其中屬性(property)是希望您設定的樣式屬性。每個屬性都有乙個值。屬性和值被冒號分開

selector

lang="en">
charset="utf-8">
titletitle>
type="text/css">
h1 
pstyle>
head>
我是red
h1>
我是green
p>
body>
html>

我們可以對選擇器進行分組，這樣被分組的選擇器就可以分享相同的宣告了。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素分組，所有標題元素都是紅色

h1,h2,h3,h4,h5,h6

具體例項

lang="en">
charset="utf-8">
titletitle>
type="text/css">
h1,h2,h3,h4,h5,h6
style>
head>
標題1h1>
標題2h2>
標題3h3>
body>
html>

派生選擇器允許我們根據文件的上下文來確定某個標籤的樣式。通過合理的使用派生選擇器，我們可以使html頁面變的更加整潔

假設我們希望鍊錶中的strong元素變為紅色

樣式如下

li strong

lang="en">
charset="utf-8">
titletitle>
type="text/css">
listrong
style>
head>
我是紅色strong>
li>
我是正常li>
ul>
body>
html>

id選擇器可以為標有特定id的html元素指定特定的樣式

id選擇器以#來定義

下面的倆個id選擇器，第乙個可以定義元素顏色為紅色，第二個定義元素為綠色

/#red

/#green

makedown打不出』#』所以我在前面加了個』/』

lang="en">
charset="utf-8">
titletitle>
type="text/css">
#red
#green
style>
head>
id="red">我是紅色p>
id="green">我是綠色p>
body>
html>

現代布局中，id選擇器常常用於建立派生選擇器

sidebar p

具體例項

lang="en">
charset="utf-8">
titletitle>
type="text/css">
#red
p 
style>
head>
id="red">我是紅色麼？p>
id="red">我是什麼顏色h1>
id="red">
我是紅色p>
p>
body>
html>

在css中，類選擇器以乙個點號顯示:

.center

具體例項如下

lang="en">
charset="utf-8">
titletitle>
type="text/css">
.red
style>
head>
class="red">我是紅色h1>
body>
html>

和id一樣class也可被用作派生選擇器

例項如下

mystyle.css

h1

lang="en">
charset="utf-8">
titletitle>
rel="stylesheet"
type="text/css"
href="mystyle.css" />
head>
我是紅色h1>
body>
html>

CSS基礎學習筆記

個人理解 距被控制的元素越近，優先順序越高 css基礎語法 選擇器 即需要改變樣式的 html 元素宣告 屬性和值 即css 規則格式為 selector property value porperty2 value 值的不同寫法和單位 值為單詞 風格 空格和大小寫 css高階語法 繼承及其問題 擺...

CSS基礎學習筆記

1.css樣式優先順序 元素上的樣式 style中嵌入的樣式 外部樣式檔案，其實不太準確，應當是當嵌入式出現在外部樣式的後面時，按照style出現的順序來渲染的，後面出現的會覆蓋前面的。同乙個樣式檔案中，元素選擇器越精確優先順序越高，id選擇器 100 類選擇器 10 元素選擇器 1 根據權值 累計...

學習筆記 CSS基礎

css 指層疊樣式表 cascading style sheets 是一種標記語言，屬於瀏覽器解釋型語言，可以直接由瀏覽器執行，不需要編譯。html只負責網頁的內容，標籤盡量只負責語意不負責樣式。css 主要負責網頁的樣式，給網頁進行布局，解決了內容與表現分離的問題。css 可以重複使用，避免 冗餘...