我們知道 一個網(wǎng)頁由html,css以及js3部分組成，html是用于內(nèi)容顯示的載體，js是行為，用來實現(xiàn)網(wǎng)頁特效效果，而css則也是頁面的外觀控制說的簡單點(diǎn)就是穿的衣服砍濒，化的裝。下面來看下css最基礎(chǔ)的東西硫麻，主要是以下幾個方面：
- css樣式規(guī)則
- css樣式的引入
- css選擇器
- css優(yōu)先級
- css命名規(guī)則
- css注釋
css樣式規(guī)則
css 書寫 一般是 選擇器:{k:v爸邢；k:v}
k:v為一個樣式的屬性和值 比如 color:red
完整示例：
p {color:red}
div {width:300px;height:300px}
css樣式的引入
有4中引入方式，分別是行內(nèi)樣式(內(nèi)聯(lián)樣式),內(nèi)部樣式表（嵌入樣式）,外部樣式表（link鏈入）以及導(dǎo)入式（@import）
- 行內(nèi)樣式(內(nèi)聯(lián)樣式)
在標(biāo)簽中添加 style樣式屬性 如：
<p style="color:red;">內(nèi)容</p>
- 內(nèi)部樣式表（嵌入樣式）
把css樣式寫在style標(biāo)簽里面 如：
<style type="text/css">
p { color:red;}
div {height:100px;width:100px;}
</style>
然后將 style 放到 <head> 標(biāo)簽內(nèi) 即：
<head>
<style type="text/css">
p { color:red;}
div {height:100px;width:100px;}
</style>
</head>
- 外部樣式表（link鏈入）
將樣式寫在一個獨(dú)立的.css后綴文件中拿愧，比如新建一個文件杠河，文件名為 demo.css， 內(nèi)容如下：
p { color:red;}
div {height:100px;width:100px;}
然后在head標(biāo)簽中引入，像這樣：
<head>
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
href屬性的值就是引入 .css文件的入口
注意 demo.css的相對位置
- 導(dǎo)入式（@import）
@import "外部css樣式"
注意@import 寫在 style標(biāo)簽內(nèi) 最開始
css選擇器
選擇器有下面幾種類型
- Id選擇器
- 類選擇器（偽類）
- 標(biāo)簽選擇器
- 全局選擇器
- 群組選擇器
- 后代選擇器
- Id選擇器
為html元素添加id屬性
<p id="p1">內(nèi)容1</p>
<p id="p2">內(nèi)容2</p>
通過id來給元素添加樣式屬性
#p1{color:red;}
#p2{color:blue;}
- 類選擇器（偽類）
為html元素添加class屬性
//可設(shè)置多個 用 空格 隔開
<p class="p1 p3">內(nèi)容1</p>
<p class="p2 p4">內(nèi)容2</p>
通過class來給元素添加樣式屬性
.p1{color:red;}
.p2{color:blue;}
- 標(biāo)簽選擇器
以html作為選擇器
p,h1,h2,div {
font-size:30px;
}
- 全局選擇器
給所有標(biāo)簽設(shè)置樣式：
* {
color:blue;
}
- 群組選擇器
p,h1,h2,h3{
font-size:30px;
}
p{
color:blue;
}
h1{
color:red;
}
- 后代選擇器
標(biāo)簽如下：
<em>css</em>
<p><em>css1</em></p>
設(shè)置樣式：
// 使用 空格 該開
p em{color:red;}
css優(yōu)先級
券敌！important 優(yōu)先級最高
行內(nèi)樣式 > 內(nèi)部樣式 > 外部樣式 （注意：link鏈入的外部樣式和style內(nèi)部樣式唾戚，取決于先后順序【就近原則】）
樣式表中的優(yōu)先級 【ku】
Id選擇器（100）>class選擇器(10)> 標(biāo)簽選擇器(1) >通配符（0）
取值相同 ，就近原則待诅；權(quán)值不同叹坦，使用權(quán)值高的
權(quán)值計算：
#app div.sidebar p {...}
// id的有1個 #div ，標(biāo)簽的有2個即div p 卑雁；class有1個 .sidebar 權(quán)值為 100*1 + 1*2 + 1*10 = 112
css命名規(guī)則
- 采用英文字母募书，數(shù)字 ,'-' , ' _' 命名
- 以小寫字母開頭 ，不能以'-','_' 開頭
- 形式： 單字测蹲，連字符莹捡，下劃線，駝峰
//單字符
.logo{}
//連字符
main-logo{}
//下劃線
main_logo{}
//駝峰
mainLogo{}
- 命名要有意義
css注釋
形式：
/* ... */
