簡單來說css是用來設計html文字樣式的工具。
css 例項
css宣告總是以分號(;
)結束,宣告總以大括號
()括起來:
p 為了讓css可讀性更強,你可以每行只描述乙個屬性:例項p
css 注釋
注釋是用來解釋你的**,並且可以隨意編輯它,瀏覽器會忽略它。
css注釋以 "/*" 開始, 以 "*/" 結束, 與c/c++語言相同,例項如下:
/*這是個注釋*/
p
id和class可能在html裡看起來用處不大,但在與css和js聯絡的互動上十分重要。
css id 和 class
id 和 class 選擇器
如果你要在html元素中設定css樣式,你需要在元素中設定"id" 和 "class"選擇器。
id 選擇器
id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。
html元素以id屬性來設定id選擇器,
css 中 id 選擇器以 "#" 來定義。
以下的樣式規則應用於元素屬性 id=
"para1":例項
#para1
嘗試一下 »
remark id屬性不要以數字開頭,數字開頭的id在 mozilla/firefox 瀏覽器中不起作用。
class 選擇器
class 選擇器用於描述一組元素的樣式,class 選擇器有別於id選擇器,class可以在多個元素中使用。
class 選擇器在html中以class屬性表示, 在 css 中,類選擇器以乙個點"."號顯示:
在以下的例子中,所有擁有 center 類的 html 元素均為居中。
例項.center
嘗試一下 »
你也可以指定特定的html元素使用class。
在以下例項中, 所有的 p 元素使用 class
="center" 讓該元素的文字居中:
例項p.center
嘗試一下 »
remark 類名的第乙個字元不能使用數字!它無法在 mozilla 或 firefox 中起作用。
補充:其他選擇器和選擇器的優先順序
如果你要在 html 標籤中設定 css 樣式,那麼你有四種方法,即 css 選擇器有四種。
除了提到的 id 和 class 選擇器外,第三種選擇器為標籤選擇器,即以 html 標籤作為 css 修飾所用的選擇器。
例項h3<
/style>
菜鳥教程<
/h3>
第四種選擇器即直接在標籤內部寫css**。
例項"color:red;"
>菜鳥教程<
/h3>
這四種 css 選擇器有修飾上的優先順序,即:
第四種 > id >
class
> 第三種
關於CSS布局
css三大定位機制 標準文件流 浮動布局 絕對定位布局。一 標準文件流 1.特點 從上到下,從左到右輸出文字。標準文件流裡面又分兩種情況,即塊級元素和行級元素,也可以說標準文件流是由塊級標籤和行級標籤組成的。塊級元素特點 從左到右撐滿頁面,獨佔一行,觸碰到頁面邊緣時會自動換行,常見的塊級標籤有div...
關於CSS單位
初學css,相信大家都會用 px 作為單位使用,其實css還有很多單位,可以分為兩類 絕對單位 和 相對單位 絕對單位一般用於傳統平面印刷,很少用於前端開發,這裡我們只討論相對單位。相對單位主要有以下這些 px 畫素 百分比 em 1em等於 當前元素 的字型大小 rem 1rem等於 根元素 的字...
關於css屬性
width 寬度屬性 1 width 10px 寬度這樣設定即可height 高度屬性 2 height 10px 高度的設定方法font weight bold 字型加粗屬性 3 font weight bold 4 font weight 800 兩個屬性都具有加粗效果 font weight ...