CSS基础---日记4
1.CSS的概述：
問題：1.讓html頁(yè)面中所有的文本都變成紅色
? ? ? ? 2.頁(yè)面中所有的div都變成藍(lán)色
HTML的屬性不足：?
完成相同的效果，不同的標(biāo)記使用不同的屬性：
< body text="red">文本顏色為紅色
<font color="red">文本顏色為紅色
2.什么是CSS？
層疊樣式表，級(jí)聯(lián)樣式表，樣式表（cascading style sheet）
定義HTML在頁(yè)面中的樣式
1.實(shí)現(xiàn)了內(nèi)容（HTML元素）與表現(xiàn)（css樣式）相分離
2.提高了代碼的可重復(fù)性和可維護(hù)性
?CSS與HTml之間的關(guān)系和使用規(guī)則：
html:用于搭建網(wǎng)頁(yè)結(jié)構(gòu)，構(gòu)建內(nèi)容
css:專門定義頁(yè)面的樣式，與內(nèi)容無關(guān)
w3c建議盡量使用css樣式來取代HTML的屬性：
1.允許被css取代的屬性：
ex:< body text="">
? ? < font ?color="">
?
無法被取代的屬性：
< table>
? ? ? <tr>
? ? ? ?< td colspan="2"></td>
? ? ?</tr>
</table>
?
2.css的語法
1.使用css樣式表
1.css樣式表的使用方式
? ?1.內(nèi)聯(lián)方式
內(nèi)聯(lián)方式：又稱為行內(nèi)樣式，內(nèi)聯(lián)樣式
將樣式定義在HTML元素中
CSS語法（重點(diǎn)）
1.將樣式屬性及值 ?聲明在元素的style元素中
<ANY style="樣式聲明；樣式聲明；”>
2.樣式聲明的語法：
樣式聲明是由樣式屬性及值組成的
語法：樣式屬性：值； 樣式屬性：值
ex:樣式屬性：
屬性：color
取值：red,yellow,blue
屬性：background-color
作用：修飾元素的背景顏色
屬性：font-size
以px為單位的數(shù)值
修飾元素的文本大小
2.內(nèi)部樣式表
將若干樣式規(guī)則聲明在style元素內(nèi)，用于控制整個(gè)頁(yè)面的效果
1.在<head>元素中，添加style元素
? 在style中，追加樣式規(guī)則
樣式規(guī)則：
1、選擇器
作用：規(guī)范了頁(yè)面中哪些元素能夠使用聲明好的樣式
2、若干樣式聲明
有效范圍：只在當(dāng)前頁(yè)面有效
語法：
選擇器{
樣式聲明;
樣式聲明;
||
樣式屬性:值;
樣式屬性:值;
}
ex:
div{
color:red;
font-size:24px;
}
3、外部樣式表
將 樣式定義在 外部的 樣式表文件(**.css)中，可以在使用的網(wǎng)頁(yè)中對(duì)樣式表文件進(jìn)行引入
1、創(chuàng)建一個(gè)樣式表文件(**.css)，用來保存若干樣式規(guī)則
2、在使用的網(wǎng)頁(yè)上進(jìn)行樣式表的引用
<head>
<link rel="stylesheet" type="text/css"(寫不寫都可以) href="**.css(css文件URL)">
</head>
2、CSS樣式表特征
1、繼承性
大部分的樣式屬性，是可以被繼承的
如：color，font-size，background-color
父元素定義好的樣式可以用在子元素上
2、層疊性
可以為 一個(gè)元素 定義多個(gè)樣式規(guī)則
樣式規(guī)則中的樣式屬性不沖突時(shí)，多個(gè)樣式規(guī)則中的規(guī)則可以層疊為一個(gè)
3、優(yōu)先級(jí)
在層疊性的基礎(chǔ)上，如果樣式屬性沖突的話，按照不同的樣式規(guī)則的優(yōu)先級(jí)來應(yīng)用樣式
優(yōu)先級(jí)
1、瀏覽器缺省設(shè)置(user agent style sheet) 優(yōu)先級(jí)最低
2、外部樣式表和內(nèi)部樣式表
就進(jìn)原則
后定義優(yōu)先
3、內(nèi)聯(lián)樣式 優(yōu)先級(jí)最高
4、!important規(guī)則
顯示調(diào)整樣式屬性的優(yōu)先級(jí)
沖突的樣式中，以!important為準(zhǔn)
選擇器{
屬性:值 !important;
}
注意：謹(jǐn)慎使用
3、基本排錯(cuò)
1、提示Unknown property name
樣式屬性名寫錯(cuò)
2、提示Invalid property value
樣式屬性值寫錯(cuò)
3、缺失;(或者寫錯(cuò))
剩下屬性都認(rèn)為是當(dāng)前屬性的值
4、缺失}
從缺失的位置起，下面所有的選擇器全都不起作用
4、選擇器(重難點(diǎn))
1、選擇器的作用
規(guī)范頁(yè)面中哪些元素能夠使用聲明好的樣式匹配頁(yè)面元素
2、選擇器詳解
1、通用選擇器
1、作用：匹配頁(yè)面中所有的元素
2、語法：*{樣式聲明;}
3、注意
盡量少用*{}
盡可能的使用 繼承性 來取代*{}
2、元素選擇器
1、作用
指定頁(yè)面元素的默認(rèn)樣式
2、語法
以元素名稱來作為選擇器名稱
元素名{}
ex：h3{} div{}
3、類選擇器
1、作用
定義好之后，可以由任意標(biāo)記通過class屬性來進(jìn)行引用的選擇器
2、語法
.類名{}
類名：
1、不能以數(shù)字開始
2、除英文、數(shù)字、_,-之外，不能包含其他特殊字符
3、盡量見名知意
引用：<ANY class="類名">
ex： .redcolor{color:red;}
3、引用方式-多類選擇器
允許一個(gè)元素引用多個(gè)類選擇器，引用時(shí)，選擇器名稱用 空格 隔開即可
語法：<ANY class="class1 class2 class3...">
4、聲明方式-多類選擇器
將類選擇器 和 元素選擇器 結(jié)合起來使用，以實(shí)現(xiàn)對(duì)某種元素中不同樣式的細(xì)分控制
語法：
元素選擇器.類選擇器{}
ex：p.redcolor{font-size:48px;}
4、ID選擇器
1、作用
定義 頁(yè)面中 指定ID值 的元素的樣式
2、語法
#idValue{樣式聲明;}
注意：選擇器，實(shí)際上就是頁(yè)面元素的id值
5、群組選擇器
1、作用
選擇器聲明以逗號(hào)隔開的選擇器列表
2、語法
選擇器1,選擇器2,選擇器3,...{}
ex: #nav,.redcolor,.bigfont,#sec,span{
color:red;
}
id為nav的元素，class為redcolor的元素，class為bigfont的元素，id為sec的元素，頁(yè)面上所有的span元素，字體顏色為 紅色
6、后代選擇器
后代：只要具備層級(jí)關(guān)系的元素都可以稱之為后代
語法：選擇器1 選擇器2{}
ex：1、要匹配 id為d1元素中的所有span元素
#d1 span{}
2、要匹配class為redback的元素中 所有 class為bigfont的元素
.redback .bigfont{}
7、子代選擇器
子代：只具備一級(jí)層級(jí)關(guān)系的元素，稱之為子代元素
語法：選擇器1>選擇器2{}
特點(diǎn)：不想匹配任意后代，而是想縮小范圍
8、偽類選擇器
1、作用
為了匹配元素不同的狀態(tài)的
2、偽類選擇器
所有的偽類選擇器都是以 ：作為開始
多數(shù)會(huì)配合著其他選擇器一起使用
1、鏈接偽類
:link,匹配尚未訪問的超鏈接的狀態(tài)
:visited,匹配訪問過的超鏈接的狀態(tài)
2、動(dòng)態(tài)偽類
:hover,匹配鼠標(biāo)懸停時(shí)的狀態(tài)
:active,匹配元素被激活時(shí)的狀態(tài)(一瞬間)
:focus,匹配元素獲取焦點(diǎn)時(shí)的狀態(tài)(光標(biāo)閃動(dòng)時(shí))
注意：
為 超鏈接 元素定義偽類樣式時(shí)，如果鏈接偽類和動(dòng)態(tài)偽類同時(shí)設(shè)置時(shí)，必須按照以下順序設(shè)定
:link{}
:visited{}
:hover{}
:active{}
3、目標(biāo)偽類
4、元素狀態(tài)偽類
5、結(jié)構(gòu)偽類
6、否定偽類
3、選擇器優(yōu)先級(jí)
主要看權(quán)值
元素選擇器：1
類選擇器：10
偽類選擇器：10
ID選擇器：100
內(nèi)聯(lián)樣式：1000
選擇器權(quán)值加到一起大的優(yōu)先，權(quán)值相同，后定義優(yōu)先
注意：繼承的樣式與自定義的樣式相沖突時(shí)，永遠(yuǎn)都是以自定義為主(與權(quán)值無關(guān))
? ? ? ? ? ? ? ? ? ? ? ?
?
轉(zhuǎn)載于:https://www.cnblogs.com/zhangailing/p/6579479.html
總結(jié)
以上是生活随笔為你收集整理的CSS基础---日记4的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java——super的使用
- 下一篇： Android:日常学习笔记(6)——探