元素之后的
元素*/
div+p {
margin: 5px;
}
注意點(diǎn)：
1、相鄰兄弟選擇器必須通過(guò)+連接
2、相鄰兄弟選擇器只能選中緊跟其后的那個(gè)標(biāo)簽，不能選中被隔開(kāi)的標(biāo)簽
通用兄弟選擇器
屬性選擇器
- 什么是屬性選擇器？
- 作用：根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性
- 格式：
格式:
[attribute]
作用:根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
[attribute=value]
作用: 找到有指定屬性, 并且屬性的取值等于value的標(biāo)簽, 然后設(shè)置屬性
最常見(jiàn)的應(yīng)用場(chǎng)景, 就是用于區(qū)分input屬性
/*用于選取帶有指定屬性的元素。*/
p[title] {
color: red;
}
/*用于選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}
1.屬性的取值是以什么開(kāi)頭的
[attribute|=value] CSS2
[attribute^=value] CSS3
兩者之間的區(qū)別:
CSS2中的只能找到value開(kāi)頭,并且value是被-和其它內(nèi)容隔開(kāi)的
CSS3中的只要是以value開(kāi)頭的都可以找到, 無(wú)論有沒(méi)有被-隔開(kāi)
2.屬性的取值是以什么結(jié)尾的
[attribute$=value] CSS3
3.屬性的取值是否包含某個(gè)特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
兩者之間的區(qū)別:
CSS2中的只能找到獨(dú)立的單詞, 也就是包含value,并且value是被空格隔開(kāi)的
CSS3中的只要包含value就可以找到
其它用法
通配符選擇器
選擇器練習(xí)
選擇器練習(xí)示例
CSS三大特性
繼承性
- 什么是繼承性？
- 作用：給父元素設(shè)置一些屬性，子元素也可以使用，這個(gè)我們就稱之為繼承性
- 示例代碼：
<style>
div{
color: red;
}
style>
<div>
<ul>
<li>
<p>我是段落p>
li>
ul>
div>
- 注意點(diǎn)：
1、并不是所有的屬性都可以繼承，只有以color/font-/text-/line-開(kāi)頭的屬性才可以繼承
2、在CSS的繼承中不僅僅是兒子可以繼承，只要是后代都可以繼承
3、繼承性中的特殊性：
3.1>a標(biāo)簽的文字顏色和下劃線是不能繼承的
3.2>h標(biāo)簽的文字大小是不能繼承的
應(yīng)用場(chǎng)景：
一般用于設(shè)置網(wǎng)頁(yè)上的一些共性的信息，例如網(wǎng)頁(yè)的文字顏色，字體，文字大小等內(nèi)容
層疊性
優(yōu)先級(jí)
!important
CSS屬性相關(guān)
寬和高
width屬性可以為元素設(shè)置寬度。
height屬性可以為元素設(shè)置高度。
塊級(jí)標(biāo)簽才能設(shè)置寬高，內(nèi)聯(lián)標(biāo)簽的寬度由內(nèi)容來(lái)決定。
文字屬性
font-style
font-weight
font-size
font-family
文字屬性的補(bǔ)充
1、如果設(shè)置的字體不存在，那么系統(tǒng)會(huì)使用默認(rèn)的字體來(lái)顯示（默認(rèn)使用宋體）
2、如果設(shè)置的字體不存在，而我們又不想用默認(rèn)的字體來(lái)顯示怎么辦？
可以給字體設(shè)置備選方案
格式：font-family："字體1","備選方案1"...;
3、如果想給中文和英文分別多帶帶設(shè)置字體，怎么辦？
但凡是中文字體，里面都包含了英文
但凡是英文字體，里面都沒(méi)有包含中文
也就是說(shuō)中文字體可以處理英文，而英文字體不能處理中文
**注意點(diǎn)：如果想給界面中的英文多帶帶設(shè)置字體，那么英文的字體必須寫在中文的前面
4、在企業(yè)開(kāi)發(fā)中最常見(jiàn)的字體有以下幾個(gè)
中文: 宋體/黑體/微軟雅黑
英文: "Times New Roman"/Arial
還需要知道一點(diǎn), 就是并不是名稱是英文就一定是英文字體
因?yàn)橹形淖煮w其實(shí)都有自己的英文名稱, 所以是不是中文字體主要看能不能處理中文
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei
文字屬性縮寫
- 縮寫格式：
font: style weight size family;
- 例如：
font:italic bold 10px "楷體";
- 注意點(diǎn)：
1、在這種縮寫格式中有的屬性值可以忽略
sytle可以省略
weight可以省略
2、在這種縮寫格式中style和weight的位置可以變換
3、在這種縮寫格式中有的屬性值是不可以縮寫的
size不能省略
family不能省略
4、size和family的位置是不能隨便亂放的
size一定要寫在family的前面，而且size和family必須寫在所有屬性的最后
文本屬性
text-align
text-decoration
- 作用：給文本添加裝飾效果
- 格式：
text-decoration: underline;
- 取值：
underline 下劃線
line-through 刪除線
overline 上劃線
none 什么都沒(méi)有, 最常見(jiàn)的用途就是用于去掉超鏈接的下劃線
- 快捷鍵：
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
text-indent
顏色屬性
在css中如何通過(guò)color屬性來(lái)修改文字顏色
- 格式：
color： 值；
- 取值：
1. 英文單詞
2. rgb(255,0,0)
3. rgba(255,0,0,3)
4. #FF0000
-
1.1英文單詞
一般情況下常見(jiàn)的顏色都有對(duì)應(yīng)的英文單詞, 但是英文單詞能夠表達(dá)的顏色是有限制的, 也就是說(shuō)不是所有的顏色都能夠通過(guò)英文單詞來(lái)表達(dá)
1.2rgb
rgb其實(shí)就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍(lán)色)
格式: rgb(0,0,0)
那么這個(gè)格式中的
第一個(gè)數(shù)字就是用來(lái)設(shè)置三原色的光源元件紅色顯示的亮度
第二個(gè)數(shù)字就是用來(lái)設(shè)置三原色的光源元件綠色顯示的亮度
第三個(gè)數(shù)字就是用來(lái)設(shè)置三原色的光源元件藍(lán)色顯示的亮度
這其中的每一個(gè)數(shù)字它的取值是0-255之前, 0代表不發(fā)光, 255代表發(fā)光, 值越大就越亮
紅色: rgb(255,0,0);
綠色: rgb(0,255,0);
藍(lán)色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255)
只要讓紅色/綠色/藍(lán)色的值都一樣就是灰色
而且如果這三個(gè)值越小那么就越偏黑色, 越大就越偏白色
例如: color: rgb(200,200,200);
1.3rgba
rgba中的rgb和前面講解的一樣, 只不過(guò)多了一個(gè)a
那么這個(gè)a呢代表透明度, 取值是0-1, 取值越小就越透明
例如: color: rgba(255,0,0,0.2);
1.4十六進(jìn)制
在前端開(kāi)發(fā)中通過(guò)十六進(jìn)制來(lái)表示顏色, 其實(shí)本質(zhì)就是RGB
十六進(jìn)制中是通過(guò)每?jī)晌槐硎疽粋€(gè)顏色
例如: #FFEE00 FF表示R EE表示G 00表示B
什么是十六進(jìn)制?
十六進(jìn)制和十進(jìn)制一樣都是一種計(jì)數(shù)的方式
在十進(jìn)制中取值范圍0-9, 逢十進(jìn)一
在十六進(jìn)制中取值范圍0-F, 逢十六進(jìn)一
十進(jìn)制 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
十六進(jìn)制 0 1 2 3 4 5 6 7 8 9 a b c d e f
十六進(jìn)制和十進(jìn)制轉(zhuǎn)換的公式
用十六進(jìn)制的第一位*16 + 十六進(jìn)制的第二位 = 十進(jìn)制
15 == 1*16 + 5 = 21
12 == 1*16 + 2 = 18
FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255
00 == 0*16 + 0 = 0
1.5十六進(jìn)制縮寫
在CSS中只要十六進(jìn)制的顏色每?jī)晌坏闹刀际且粯拥? 那么就可以簡(jiǎn)寫為一位
例如:
#FFEE00 == #FE0
color取值詳細(xì)說(shuō)明
overflow溢出屬性
- 作用：清除溢出盒子邊框外的內(nèi)容
- 格式：overflow:hidden;
overflow （水平和垂直均設(shè)置）
overflow-x（設(shè)置水平方向）
overflow-y（設(shè)置垂直方向）
- 取值：
visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。
scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
- 示例代碼：
View Code
- 添加overflow:hidden前：
- 添加overflow:hidden后：
圓形的頭像示例
overflow 圓形頭像示例
CSS元素的顯示模式
在HTML中HTML將所有的標(biāo)簽分為兩類，分別是容器級(jí)和文本級(jí)
在CSS中CSS也將所有的標(biāo)簽分為兩類，分別是塊級(jí)元素和行內(nèi)元素
什么是塊級(jí)元素，什么是行內(nèi)元素？
塊級(jí)元素會(huì)獨(dú)占一行
行內(nèi)元素不會(huì)獨(dú)占一行
常見(jiàn)的容器級(jí)的標(biāo)簽：
div h ul ol dl li dt dd ...
常見(jiàn)的文本級(jí)的標(biāo)簽：
span p buis stong em ins del ...
常見(jiàn)的塊級(jí)元素：
p div h ul ol dl li dt dd
常見(jiàn)的行內(nèi)元素：
span buis strong em ins del
塊級(jí)元素和行內(nèi)元素的區(qū)別？
塊級(jí)元素：
- 獨(dú)占一行
- 如果沒(méi)有設(shè)置寬高，那么默認(rèn)和父元素一樣寬
- 如果設(shè)置了寬高，那么就按照設(shè)置的來(lái)顯示
行內(nèi)元素：
- 不會(huì)獨(dú)占一行
- 如果沒(méi)有設(shè)置寬高，那么默認(rèn)和內(nèi)容一樣寬
- 行內(nèi)元素是不可以設(shè)置寬度和高度的
行內(nèi)塊級(jí)元素：
為了能夠讓元素既能夠不獨(dú)占一行，又可以設(shè)置寬度和高度，那么就出現(xiàn)了行內(nèi)塊級(jí)元素
不獨(dú)占一行，并且可以設(shè)置寬高
CSS元素顯示模式轉(zhuǎn)換（display屬性）
如何轉(zhuǎn)換css元素的顯示模式？
設(shè)置元素的display屬性
背景和精靈圖
背景相關(guān)屬性
background-color
background-image
- 作用：設(shè)置背景圖片
- 格式：
- 快捷鍵：
bi background-image: url();
- 注意點(diǎn)：
1、圖片的地址必須放在url()中，圖片的地址可以是本地的地址，也可以是網(wǎng)絡(luò)的地址
2、如果圖片的大小沒(méi)有標(biāo)簽的大小大，那么會(huì)自動(dòng)在水平和垂直方向平鋪來(lái)填充
3、如果網(wǎng)頁(yè)上出現(xiàn)了圖片，那么瀏覽器會(huì)再次發(fā)送請(qǐng)求獲取圖片
background-repeat
background-position
- 作用：專門用于控制背景圖片的位置
- 格式：
background-position: 水平方向 垂直方向;
- 取值：
1. 具體的方位名詞
水平方向：left center right
垂直方向：top center bottom
2. 具體的像素
例如: background-position: 100px 200px;
記住一定要寫單位, 也就是一定要寫px
記住具體的像素是可以接收負(fù)數(shù)的
- 快捷鍵：
bp background-position: 0 0;
- 注意點(diǎn)：同一個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色和背景圖片, 如果顏色和圖片同時(shí)存在, 那么圖片會(huì)覆蓋顏色
-
方位取值示例
-
像素取值示例
背景屬性連寫
和font屬性一樣，background屬性也可以連寫
- 格式：
background: 背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式;
- 快捷鍵：
bg+ background: #fff url() 0 0 no-repeat;
- 注意點(diǎn)：background屬性中，任何一個(gè)屬性都可以被省略
- 什么是背景關(guān)聯(lián)方式？
默認(rèn)情況下背景圖片會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)，如果不想讓背景圖片隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)，那么我們就可以修改背景圖片和滾動(dòng)條的關(guān)聯(lián)方式
- 如何修改背景關(guān)聯(lián)方式？
在CSS中有一個(gè)叫做background-attachment的屬性， 這個(gè)屬性就是專門用于修改關(guān)聯(lián)方式的
- 格式：background-attachment：scroll;
- 取值：scroll 默認(rèn)值， 會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)；fixed 不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
- 快捷鍵：ba background-attachment:;
-
滾動(dòng)背景圖示例
鼠標(biāo)滾動(dòng)背景不動(dòng)示例
插入圖片和背景圖片的區(qū)別
- 1.1
背景圖片僅僅是一個(gè)裝飾, 不會(huì)占用位置
插入圖片會(huì)占用位置
- 1.2
背景圖片有定位屬性, 所以可以很方便的控制圖片的位置
插入圖片沒(méi)有定位屬性, 所有控制圖片的位置不太方便
- 1.3
插入圖片的語(yǔ)義比背景圖片的語(yǔ)義要強(qiáng), 所以在企業(yè)開(kāi)發(fā)中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片
精靈圖
1.什么是css精靈圖？
CSS精靈圖是一種圖像合成技術(shù)
2.CSS精靈圖作用
可以減少請(qǐng)求的次數(shù), 以及可以降低服務(wù)器處理壓力
3.如何使用CSS精靈圖
CSS的精靈圖需要配合背景圖片和背景定位來(lái)使用
CSS盒模型
什么是CSS盒模型？
CSS盒模型僅僅是一個(gè)形象的比喻，HTML中的標(biāo)簽都是盒模型
CSS盒模型指那些可以設(shè)置寬度高度/內(nèi)邊距/邊框/外邊框的標(biāo)簽
1、內(nèi)容的寬度和高度
就是通過(guò)width/height屬性設(shè)置的寬度和高度
2、元素的寬度和高度
寬度 = 左邊距 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊距
高度 同理可證
3、元素空間的寬度和高度
寬度 = 左外邊距 + 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框 + 右外邊距
高度 同理可證
- margin：（外邊距）用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺(jué)角度上達(dá)到相互隔開(kāi)的目錄。
- padding：（內(nèi)邊距）用于控制內(nèi)容與邊框之間的距離
- border（邊框）：圍繞在內(nèi)邊框和內(nèi)容外的邊框
- content：盒子的內(nèi)容，顯示文本和圖像
邊框?qū)傩裕╞order）
- 什么是邊框？
邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條
- 格式：
1、連寫（同事設(shè)置四條邊的邊框）
border: 邊框的寬度 邊框的樣式 邊框的顏色;
-
2、連寫（分別設(shè)置四條邊的邊框）
border-top: 邊框的寬度 邊框的樣式 邊框的顏色;
border-right: 邊框的寬度 邊框的樣式 邊框的顏色;
border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色;
border-left: 邊框的寬度 邊框的樣式 邊框的顏色;
- 快捷鍵：
bd+ border: 1px solid #000;
bt+ border-top: 1px solid #000;
br+ border-right: 1px solid #000;
bb+ border-bottom: 1px solid #000;
bl+ border-left: 1px solid #000;
- 注意點(diǎn)：
1、連寫格式中顏色屬性可以省略，省略之后默認(rèn)就是黑色
2、連寫格式中樣式不能省略，省略之后就看不到邊框了
3、連寫格式中寬度可以省略，省略之后還是可以看到邊框
- 邊框樣式：
none 無(wú)邊框。
dotted 點(diǎn)狀虛線邊框。
dashed 矩形虛線邊框。
solid 實(shí)線邊框。
- border-radius
用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果。
將border-radius設(shè)置為長(zhǎng)或高的一半即可得到一個(gè)圓形。
外邊距（margin）
什么是外邊距？
標(biāo)簽和標(biāo)簽之間的距離就是外邊距
- 格式：
1、非連寫
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
示例代碼
2、連寫
margin: 上 右 下 左;
示例代碼
- 注意點(diǎn)：
1、外邊距的那一部分是沒(méi)有背景顏色的
2、這三個(gè)屬性的取值省略時(shí)的規(guī)律：
上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣
上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣
上 右 下 左 > 上 > 右下左邊取值和上邊一樣
外邊距合并現(xiàn)象
默認(rèn)布局的垂直方向的外邊距是不會(huì)疊加的，會(huì)出現(xiàn)合并現(xiàn)象，誰(shuí)的外邊距比較大就聽(tīng)誰(shuí)的
外邊距合并現(xiàn)象
我是span我是span
我是div
我是div
外邊距合并示例
margin-top問(wèn)題
1、如果兩個(gè)盒子是嵌套關(guān)系，那么設(shè)置了里面一個(gè)盒子頂部的外邊距，外面一個(gè)盒子也會(huì)被頂下來(lái)
2、如果外面的盒子不想被一起頂下來(lái)，那么可以給外面的盒子添加一個(gè)邊框?qū)傩?/p>
在企業(yè)開(kāi)發(fā)中，一般情況下如果需要控制嵌套關(guān)系盒子之間的距離，應(yīng)該首先考慮padding，其次再考慮margin（margin本質(zhì)上是用于控制兄弟關(guān)系之間的間隙的）
text-align:center;和margin:0 auto;區(qū)別
text-align:center; 是設(shè)置盒子中存儲(chǔ)的文字/圖片水平居中
margin:0 auto; 是讓盒子自己水平居中
![]()
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1650.html
