CSS
引入css樣式的三種方法
行內式
通過標籤的style屬性來設置元素的樣式
eg:<h1 style="屬性1:屬性值1;屬性2:屬性值2;"><hello word/h1>
不能實現樣式和結構相分離
內部樣式
可以使結構和樣式相分離,但只能控制當前的頁面
寫法:
<head>
<style>
選擇器{
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3
}
</style>
</head>
選擇器有:標籤選擇器
外部樣式
實現結構和樣式向分離,實現樣式共享
是將所有的樣式放在一個或多個以.css位擴展的外部樣式表文件中,通過link標籤將外部的樣式表文件鏈接到html文檔中
寫法:
<head>
<link rel="stylesheet" type="text/css" href="css文件的路徑">
</head>
注意:
link是單標籤
link標籤需要放在head頭部標籤中,並且制定link標籤的三個屬性.
rel屬性:定義當前文檔與被鏈接文檔之間的關係,在這裏需要指定爲"stylesheet",表示被鏈接的文檔是一個 樣式文件
type屬性:定義被鏈接文檔的類型,在這裏需要指定爲"text/css"表示鏈接的外部文件爲css樣式表
href屬性:定義所鏈接外部樣式表文件的url,可以想第一路徑,也可以絕對路徑
三種樣式的總結
| 樣式表 |
優點 |
缺點 |
使用情況 |
控制範圍 |
| 行內樣式表 |
書寫方便,權重高 |
沒有實現樣式和結構的相分離 |
較少 |
控制一個標籤(少) |
| 內部樣式表 |
部分結構和樣式相分離 |
沒有徹底分離 |
較多 |
控制一個頁面(中) |
| 外部樣式 |
完全實現結構和樣式的相分離 |
需要引入 |
最多 |
控制整個站點(多) |
CSS選擇器
基礎選擇器
標籤選擇器:
作用:可以把某一類標籤全部選擇出來,比如所有的div和span
優點:快速爲頁面中同類型的標籤一樣式
缺點:不能涉及差異化樣式
類選擇器:
優點:可以爲元素對象定義單獨或相同的樣式,可以選擇一個或者多個標籤
注意:
類選擇器使用"."進行表示後面緊跟類名
長名稱或者詞組可以使用中橫線來爲選擇器命名
不要使用純數字,中文等命名,儘量使用英文字母來表示
類選擇器特殊用法-多類名:
多個類名用空格隔開
id選擇器:
寫法:#id名稱
id選擇器和類選擇器的區別:
類選擇器好比人的名字,是可以多次重複使用的比如:李偉,張偉,王偉.(一個類名可以加到多個標籤上)
id選擇器好比人的身份證號.唯一的(一個id只能在一個標籤上)
通配符選擇器:
通配符選擇器用*號表示,就是選擇所有的標籤 他是所有選擇器中作用域最廣的,能匹配頁面中所有的元素
* {
屬性1:屬性值2;
屬性2:屬性值2;
}
注意:會匹配頁面的所有元素,會降低頁面的響應速度,不建議隨便使用
基礎選擇器的總結
| 選擇器 |
作用 |
缺點 |
使用情況 |
用法 |
| 標籤選擇器 |
可以選擇出所有相同標籤,比如p |
不能差異化選擇 |
較多 |
p{color:red;} |
| 類選擇器 |
可以選擇出1個或者多個標籤 |
可以根據需求選擇 |
非常多 |
.nav{color:red;} |
| id選擇器 |
一次只能選擇器1個標籤 |
只能使用一次 |
不推薦使用 |
#{color:red;} |
| 通配符選擇器 |
選擇所有標籤 |
選擇的太多,有部分不需要 |
不推薦使用 |
*{color:red;} |
複合選擇器
字體
字體大小
.class{
fint-size:200px;
}
字體加粗font-weight:500
.class{
font-weight:200 不需要加單位
font-weight:normal 讓字體不加粗也就是成爲正常的(相當月font-weight:400的粗細)
}
字體傾斜font-style:italic
.class{
font-style:normal 讓字體不傾斜也就是成爲正常的
}
字體的綜合性寫法
選擇器{
font: font-style font-weight font-size/line-height font-family
}
eg:
.title{
font:italic 700 20px "微軟雅黑";
}
font-style 和 font-weight可以省略不寫
eg:
.title{
font:20px "微軟雅黑";
}
CSS的外觀屬性
color:文本顏色
作用:color屬性用於定義文本的顏色
取值有三種:預定義的顏色值(red,blue...),十六進制(#FF6600),RGB代碼(rgb(255,0,0)
line-height:行間距
作用:用於設置行間距,就是行與行之間的距離
單位:px,em,%
一般情況下行距比字號大7或者8像素就可以了
text-align:文本水平對齊方式
作用:設置文本內容的水平對齊方式
left 左對齊(默認) right 右對齊 center 居中對齊
注意:是讓盒子的內容水平居中,而不是讓盒子居中對齊
text-indent:首行縮進
作用:設置首行文本的縮進
屬性值:可以爲不同單位的數值,em字符寬度的倍數,或相對於瀏覽器窗口寬度的百分比%,允許使用負值
建議使用em作爲設置單位,1em就是一個字的寬度,如果是漢字的段落,1em就是一個漢字的寬度
text-decoration文本的裝飾:
text-decoration:通常我們用於給鏈接修改裝飾效果
| 值 |
描述 |
| none |
默認,定義標椎的文本.取消下滑線(最常用) |
| underline |
定義文本下的一條線,下滑線也就是我們鏈接自帶的 |
| overline |
定義文本上的一條線(不用) |
| line-through |
定義穿過文本的一條線(不常用) |
css外觀屬性的總結
| 屬性 |
表示 |
注意點 |
| color |
顏色 |
通常用十六進制 |
| line-height |
行高 |
控制行與行之間的距離 |
| text-align |
水平對齊 |
設定文字的水平對齊方式 |
| text-indent |
首行縮進 |
1em相當於一個漢字 |
| text-decoration |
文本修飾 |
取消下滑線none 添加下滑線underline 橫穿線line-through |
