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