CSS基礎入門
什么是CSS?
CSS 指層疊樣式表 (Cascading Style Sheets)
CSS通常稱為CSS樣式表或層疊樣式表(級聯樣式表),主要用于設置HTML頁面中的文本內容(字體、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。
CSS以HTML為基礎,提供了豐富的功能,如字體、顏色、背景的控制及整體排版等,而且還可以針對不同的瀏覽器設置不同的樣式。
CSS就是控制頁面布局和樣式
CSS的版本:2.1→3.0
類比例子:奶油蛋糕、畫畫
HTML和CSS的關系:
HTML 結構層 負責從 語義的角度搭建頁面結構
CSS 樣式層 負責從 審美的角度美化頁面
JavaScript 行為層 負責從 交互的角度提升用戶體驗
如何編寫CSS
ul>li>a[href="#"]? ? >? 表示父子關系? [href="#"]表示a標簽 添加屬性
生成結果如圖
小括號可以讓a標簽和li標簽成一組然后乘以3..
ul>(li>a[href="#"])*3 ? 結果如下圖
引入CSS的方式
所有的標簽都有一個默認樣式,我們稱為瀏覽器樣式,或者默認樣式
默認樣式 優先級最低
行內樣式
所有的標簽共有的屬性 id name style
行內樣式,是通過在標簽中設置style屬性來達到實現控制標簽的樣式的效果。例如
Style屬性中,可以設置多條的CSS樣式。
內嵌樣式
在head標簽中,嵌套一個style標簽,在style標簽中可以書寫CSS的樣式內容。
Style標簽有一個屬性type屬性,默認值就是 text/css,可以省略
注意:寫完標簽/選擇器寫完要加一個空格,寫完{,要加空格,屬性名和冒號之間不要有空格,冒號后面和屬性值之間輸入時盡量加空格,最后的分號后面,也要加空格,方便閱讀代碼.
注釋用:
/* ? */
background-color: red ?背景色
外部樣式,外聯樣式
是最常用的樣式
通過link標簽引入css樣式文件
<link rel="stylesheet" href="a.css"/>
type屬性:只有一個選項,“text/css",指定當前為css文本文件
rel:指定當前HTML文件與CSS文件的關系是樣式表。href:指定外聯樣式表的路徑
導入樣式:@import,導入樣式會導致,css文件不能并行下載。不推薦使用。
導入樣式的書寫必須在所有的css規則書寫之前
行內樣式和內嵌樣式不推薦使用,臨時使用可以,推薦使用外聯
導入樣式:@import,導入樣式會導致,css文件不能并行下載。不推薦使用
導入樣式import必須卸載所有其他樣式設置之前
CSS文件中也可以導入css文件
CSS語法
換行不敏感,空格不敏感?
屬性和屬性值最好寫到一行,盡量不要換行.大小寫不敏感,盡量寫小寫
多條CSS聲明 屬性值,盡量分多行寫
CSS案例