CSS 基礎語法

=================================
1串述、CSS概述
2睛约、CSS語法
3鼎俘、尺寸與邊框
=================================
1、CSS概述
1辩涝、問題
1贸伐、設置頁面中所有的文本顏色為紅色
2、頁面中所有的div里面的文本的顏色變?yōu)?藍色
3怔揩、頁面中所有的div里面的文本的顏色變?yōu)?綠色
## HTML元素屬性的弊端：
1捉邢、想完成相同效果，卻要使用不同屬性
2商膊、HTML元素改變的樣式可重用性不高
2伏伐、CSS
CSS:Cascading Style Sheets
層疊樣式表，級聯(lián)樣式表晕拆，樣式表
特點：
1藐翎、實現(xiàn)了網(wǎng)頁內(nèi)容與表現(xiàn)相分離
2、提高了代碼的可重用性和可維護性
3实幕、CSS與HTML之間的關系
1吝镣、HTML用于構建網(wǎng)頁的結構
2、css負責構建HTML頁面元素的樣式
4昆庇、HTML屬性和CSS樣式的使用原則
W3C建議盡量使用CSS樣式取代HTML屬性
1末贾、修改文本的顏色
推薦使用css的color屬性
2、修改元素的背景顏色
推薦使用css的background-color屬性
如果是HTML元素所特有的屬性的話凰锡，只能使用HTML元素屬性
td元素屬性colspan
5、使用CSS樣式表的方式(重點)
1圈暗、內(nèi)聯(lián)方式
作用：將樣式定義在單個的HTML元素中
語法：
<ANY style="樣式聲明1;樣式聲明2"></ANY>
樣式聲明語法：
樣式屬性:屬性值
eg:
1掂为、文本顏色的樣式屬性
color:red;
2、背景顏色的樣式屬性
background-color:green;
3员串、文本大小的樣式屬性
font-size:24px;
練習：設置頁面上的某個 div 元素中的樣式勇哗，文本顏色為黃色(yellow)，背景顏色為黑色(black)寸齐，字體大小為48像素
2欲诺、內(nèi)部樣式表
1抄谐、特點
應用范圍為整個頁面而不是某一個別元素,能夠提升可重用性和可維護性，同時體現(xiàn)內(nèi)容與表現(xiàn)相分離
2扰法、語法
1蛹含、在 <head>元素中增加 <style></style>標記用來聲明樣式
2、在 <style></style>元素中編寫若干 “樣式規(guī)則”
樣式規(guī)則語法規(guī)范：
1塞颁、選擇器
作用：規(guī)范了頁面中哪些元素能夠使用聲明好的樣式
eg：
元素選擇器
p div span
2浦箱、若干樣式聲明
屬性:值;屬性:值;
選擇器{若干樣式聲明}
練習：使用內(nèi)部樣式表，控制頁面中所有的p標記祠锣，文本顏色為yellow色酷窥，背景顏色為black色，文字大小為 24px
3伴网、外部樣式表
1蓬推、作用
以獨立的css樣式表文件保存樣式規(guī)則，可以應用在各個頁面中
2澡腾、使用步驟
1沸伏、創(chuàng)建單獨的樣式表文件(*.css)
在該文件中可以編寫若干樣式規(guī)則
2、在需要使用該樣式表文件的頁面上蛋铆，引入樣式表文件
在頁面的<head>元素中添加以下代碼：
<link rel="stylesheet" href="樣式表文件url">
4馋评、基本排錯
1、Styles 中提示 "Unknown property name"
說明樣式屬性名稱寫錯了
2刺啦、Styles 中提示 "Invalid property value"
說明樣式屬性值寫錯了
2留特、CSS語法
1、CSS樣式表特征
1玛瘸、繼承性
大多數(shù)CSS屬性是可以被繼承的
2蜕青、層疊性
可以為一個元素定義多個樣式規(guī)則
多個樣式規(guī)則中，如果樣式聲明不重復的話糊渊，那么則可以層疊為一個樣式規(guī)則
3右核、優(yōu)先級
樣式定義沖突(重復)時，會按照不同樣式的優(yōu)先級來應用樣式
低：瀏覽器缺省設置(User Agent)
中：外部樣式表或內(nèi)部樣式表
就近原則
高：內(nèi)聯(lián)樣式
注意：繼承的樣式和自定義樣式?jīng)_突時渺绒，永遠都是以自定義的為主
4贺喝、!important 規(guī)則
顯示調(diào)整樣式屬性的優(yōu)先級
只要 !important 出現(xiàn)，永遠都以!important 的為主
語法：
選擇器{屬性:屬性值 !important;}
注意：盡量少用
2宗兼、CSS基礎選擇器(重難點)
1躏鱼、作用
規(guī)范了頁面中哪些元素能夠使用定義好的樣式
同時也幫助我們?nèi)テヅ漤撁嫔系脑?br> 2、選擇器
1殷绍、通用選擇器(了解)
1染苛、作用
匹配頁面上所有的元素
2、語法
*{樣式聲明;}
3主到、注意
效率低茶行，盡量不用
盡可能通過繼承性去代替通用選擇器的效果
2躯概、元素選擇器
又名：標簽選擇器，標記選擇器
1畔师、作用
匹配頁面某一指定元素
比如：
頁面所有的 div 元素
頁面所有的 p 元素
2娶靡、語法
元素{}
ex:
h1{color:red;}
h2{color:blue;}
3、類選擇器(重點)
1茉唉、作用
允許元素使用附帶的class屬性值固蛾，對選擇器進行引用
2、語法
以 . 作為開始
.類名{}
類名：字母度陆，數(shù)字艾凯，_,-組成,不能以數(shù)字開始
引用類選擇器:通過元素的 class 屬性，進行引用
<ANY class="類名"></ANY>
3懂傀、特殊用法-分類選擇器
設置class值為redColor的p元素的背景顏色為 Yellow
1趾诗、作用
將元素選擇器和類選擇器結合到一起，從而實現(xiàn)對某種元素的不同樣式的細分控制
2蹬蚁、語法
元素選擇器.類選擇器{
樣式聲明;
}
p.redColor{
background-color:yellow;
}
4恃泪、特殊引用-多類選擇器
1、作用
可以讓一個元素同時引用多個類選擇器,中間用空格分開即可
4犀斋、id選擇器(重點)
1贝乎、作用
只匹配指定ID值得元素
2、語法
#id值{}
5叽粹、群組選擇器
1 览效、作用
選擇器聲明以逗號來隔開的選擇器列表.其目的是為了聲明一組選擇器中的公共樣式
2、語法
選擇器1,選擇器2,選擇器3,..,{
}
ex：
設置頁面上所有的p元素虫几，span元素锤灿，id為d1元素，class為redColor的元素的文本顏色為紅色
p,span,#d1,.redColor{
color:red;
}
等同于
p{color:red;}
span{color:red;}
#d1{color:red;}
.redColor{color:red;}
6辆脸、后代選擇器
1 但校、作用
用于匹配某元素的后代元素時使用
2、語法
選擇器1 選擇器2{ }
7啡氢、子代選擇器
1状囱、作用
用于匹配某元素的子代元素 (只具備一級層級關系被嵌套的元素)
2、語法
選擇器1>選擇器2{
}
8倘是、偽類選擇器
1亭枷、作用
為了匹配元素不同的狀態(tài)的
2、語法
:偽類選擇器{}
3辨绊、分類
1奶栖、鏈接偽類
:link :匹配超鏈接未被訪問時的狀態(tài)
:visited :匹配超鏈接被訪問過的狀態(tài)
2匹表、動態(tài)偽類
:hover :匹配鼠標懸停在 html 元素時的狀態(tài)
:active : 匹配 html元素被激活時的狀態(tài)
:focus : 匹配html元素獲取焦點時的狀態(tài)(文本框與密碼框)
3门坷、目標偽類
4宣鄙、元素狀態(tài)偽類
5、結構偽類
6默蚌、否定偽類
3冻晤、尺寸與邊框
1、CSS單位
1绸吸、尺寸單位
1鼻弧、%
占據(jù)父元素尺寸的占比
2、in
英寸锦茁，1in=2.54cm
3攘轩、cm
厘米
4、mm
毫米
5码俩、px
像素度帮，計算機屏幕上的一個點
6、pt(point)
磅/點
1pt=1/72in
7稿存、em
1em 相當于當前字體尺寸
2em 相當于當前字體尺寸的2倍
注意：css中描述尺寸的單位是不能省略的笨篷。
2、顏色單位
1瓣履、rgb(r,g,b)
r:red
g:green
b:blue
r,g,b的范圍分別是 0~255
background-color:rgb(125,28,96);
2率翅、rgb(r%,g%,b%)
3、#rrggbb
由6位16進制數(shù)字表示顏色
16進制范圍:
0-9 A-F
#ff0000 : 紅色
#123456 :
4袖迎、#rgb
#rrggbb的縮寫
#001122 --》 #012
5冕臭、表示英文的單詞
red,green,blue,yellow,
2、尺寸屬性
1瓢棒、作用
尺寸屬性一般用于設置元素的寬度和高度
2浴韭、寬度
屬性：
width
min-width
max-width
注意：min-width/max-width 與 width 屬性相沖突，最終以width屬性值為準
3脯宿、高度
屬性：
height
min-height
max-height
4念颈、注意
1、不是所有的元素都支持修改尺寸
支持修改尺寸屬性的元素如下：
1连霉、塊級元素
2榴芳、非塊級元素中，存在width跺撼，height屬性的html元素
table窟感，img
5、溢出
使用尺寸屬性控制元素大小時歉井，如果內(nèi)容所需的空間大小大于元素本身的空間柿祈，會導致內(nèi)容溢出
處理溢出的屬性:
overflow:
overflow-x:橫向溢出處理
overflow-y:縱向溢出處理
取值：
1、visibile
默認值，溢出可見
2躏嚎、hidden
隱藏
3蜜自、scroll
讓元素顯示滾動條，溢出時可用
4卢佣、auto
自動重荠，溢出時顯示滾動條，并可用
3虚茶、邊框
1戈鲁、作用
在元素周圍繪制一條線
2、屬性
1嘹叫、簡寫方式
border:width style color;
width:邊框粗細婆殿，以px為單位
style:邊框樣式
solid : 實線
dotted : 虛線
dashed : 虛線
color:邊框顏色
合法的顏色值
作用：控制元素的上下左右四個邊框的粗細，樣式罩扇，顏色
2鸣皂、單邊定義
border-方向:width style color;
方向：
top：上
bottom：下
left：左
right：右
3、單屬性定義
border-屬性:值;
屬性：
width : 邊框粗細
style : 邊框樣式
color : 邊框顏色
作用：控制四條邊的對應屬性
4暮蹂、單方向單屬性定義
border-方向-屬性:值;
5寞缝、注意
1、邊框顏色可取值為 transparent仰泻，意味透明
2荆陆、取消邊框顯示
border:0;
border:none;
border-方向:0;
border-方向:none;