二、CSS知识总结（上篇）
@Author：Runsen
文章目錄
- 什么是css
- css的格式
- css 三種寫法
- 選擇器
- 標簽選擇器
- id選擇器
- 類選擇器
- 后代選擇器
- 子元素選擇器
- 交集選擇器
- 兄弟選擇器
- 序選擇器
- 同級別的第幾個
- 同類型的第幾個
- 屬性選擇器
- 通配符選擇器
- 文字樣式
- 規定文字樣式的屬性
- 規定文字粗細的屬性
- 規定文字大小的屬性
- 規定文字字體的屬性
- 文本樣式
- 文本裝飾的屬性
- 文本水平對齊的屬性
- 文本縮進的屬性
- 顏色屬性
- 在CSS中如何通過color屬性來修改文字顏色
- css中三大特性
- 繼承性
- 層疊性
- 優先級
- 補充內容
- 優先級之important
- 優先級的權重
- 標簽理解
- 什么是div?
- 什么是span?
- div和span有什么區別?
- 容器級的標簽和文本級的標簽的區別?
- 背景
- 背景顏色
- 背景圖片
- 背景平鋪
- 背景定位
- 背景屬性縮寫
- 背景圖片和插入圖片區別
什么是css
層疊樣式表(英文全稱：Cascading StyleSheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
css的格式
<style type="text/css">標簽名稱{屬性名稱: 屬性對應的值;...} </style>注意點:
css 三種寫法
選擇器
標簽選擇器
標簽名稱{屬性:值; }id選擇器
#id名稱{屬性:值; }類選擇器
.類名{屬性:值; }id相當于人的身份證不可以重復 class相當于人的名稱可以重復
后代選擇器
標簽名稱1 標簽名稱2{屬性:值; }后代選擇器必須用空格隔開
后代選擇器不僅僅可以使用標簽名稱, 還可以使用其它選擇器
子元素選擇器
標簽名稱1>標簽名稱2{屬性:值; }子元素選擇器只會查找兒子, 不會查找其他被嵌套的標簽
子元素選擇器之間需要用>符號連接, 并且不能有空格
后代選擇器使用空格作為連接符號 | 子元素選擇器使用>作為連接符號
后代選擇器會選中指定標簽中, 所有的特定后代標簽, 也就是會選中兒子/孫子…, 只要是被放到指定標簽中的特定標簽都會被選中 | 子元素選擇器只會選中指定標簽中, 所有的特定的直接標簽, 也就是只會選中特定的兒子標簽
交集選擇器
選擇器1選擇器2{屬性: 值; } # 用多個選擇器并集選擇器必須使用,來連接
兄弟選擇器
相鄰兄弟選擇器 作用: 給指定選擇器后面緊跟的那個選擇器選中的標簽設置屬性 選擇器1+選擇器2{屬性:值; }通用兄弟選擇器 作用: 給指定選擇器后面的所有選擇器選中的所有標簽設置屬性 選擇器1~選擇器2{屬性:值; }序選擇器
同級別的第幾個
:first-child 選中同級別中的第一個標簽
:last-child 選中同級別中的最后一個標簽
:nth-child(n) 選中同級別中的第n個標簽
:nth-last-child(n) 選中同級別中的倒數第n個標簽
:only-child 選中父元素中唯一的標簽
:nth-child(odd) 選中同級別中的所有奇數
:nth-child(even) 選中同級別中的所有偶數
同類型的第幾個
:first-of-type 選中同級別中同類型的第一個標簽
:last-of-type 選中同級別中同類型的最后一個標簽
:nth-of-type(n) 選中同級別中同類型的第n個標簽
:nth-last-of-type(n) 選中同級別中同類型的倒數第n個標簽
:only-of-type 選中父元素中唯一類型的某個標簽
屬性選擇器
input[type=password]{}
根據指定的屬性名稱找到對應的標簽, 然后設置屬性
p[class=cc]{color: blue;}通配符選擇器
*{color: red;}文字樣式
規定文字樣式的屬性
格式：font-style: italic;
取值：
normal ： 正常的， 默認就是正常的
italic : 傾斜的
快捷鍵：
fs font-style: italic;
fsn font-style: normal;
規定文字粗細的屬性
格式： font-weight: bold;
單詞取值:
bold 加粗
bolder 比加粗還要粗
lighter 細線， 默認就是細線
數字取值：
100-900之間整百的數字
快捷鍵:
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
規定文字大小的屬性
格式：font-size: 30px;
單位：px（像素 pixel）
注意點： 通過font-size設置大小一定要帶單位， 也就是一定要寫px
快捷鍵fz font-size:;``fz30 font-size: 30px;
規定文字字體的屬性
格式：font-family:"楷體";
注意點：
- 如果取值是中文， 需要用雙引號或者單引號括起來
- 設置的字體必須是用戶電腦里面已經安裝的字體
快捷鍵
ff font-family:;
文本樣式
文本裝飾的屬性
格式: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-align: right;
取值:
left 左
right 右
center 中
快捷鍵
ta text-align: left;
tar text-align: right;
tac text-align: center;
文本縮進的屬性
格式: text-indent: 2em;
取值:
2em, 其中em是單位, 一個em代表縮進一個文字的寬
快捷鍵
ti text-indent:;
ti2e text-indent: 2em;
顏色屬性
在CSS中如何通過color屬性來修改文字顏色
格式: color: 值;
取值:
-
英文單詞
一般情況下常見的顏色都有對應的英文單詞, -
rgb
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);
-
rgba
rgba中的rgb和前面講解的一樣, 只不過多了一個a
那么這個a呢代表透明度, 取值是0-1, 取值越小就越透明例如: color: rgba(255,0,0,0.2);
-
十六進制
在前端開發中通過十六進制來表示顏色, 其實本質就是RGB
十六進制中是通過每兩位表示一個顏色
例如: #FFEE00 FF表示R EE表示G 00表示B`
css中三大特性
繼承性
作用: 給父元素設置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
注意點:
- 并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
- 在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
- 繼承性中的特殊性
- a標簽的文字顏色和下劃線是不能繼承的
- h標簽的文字大小是不能繼承的
層疊性
作用: 層疊性就是CSS處理沖突的一種能力
<head> <style>p{color: red;}.para{color: blue;} </style> </head> <body> <p id="identity" class="para">我是段落</p> #藍色 </body>優先級
作用:當多個選擇器選中同一個標簽, 并且給同一個標簽設置相同的屬性時, 如何層疊就由優先級來確定
-
優先級判斷的三種方式
- 間接選中就是指繼承
如果是間接選中, 那么就是誰離目標標簽比較近就聽誰的
- 相同選擇器(直接選中)
如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的
- 不同選擇器(直接選中)
如果都是直接選中, 并且不是相同類型的選擇器, 那么就會按照選擇器的優先級來層疊id>類>標簽>通配符>繼承>瀏覽器默認
補充內容
優先級之important
用于提升某個直接選中標簽的選擇器中的某個屬性的優先級的, 可以將被指定的屬性的優先級提升為最高
- !important前面的感嘆號不能省略
- !important必須寫在屬性值得分號前面
優先級的權重
當多個選擇器混合在一起使用時, 我們可以通過計算權重來判斷誰的優先級最高
- 首先先計算選擇器中有多少個id, id多的選擇器優先級最高
- 如果id的個數一樣, 那么再看類名的個數, 類名個數多的優先級最高
- 如果類名的個數一樣, 那么再看標簽名稱的個數, 標簽名稱個數多的優先級最高
標簽理解
在HTML中HTML將所有的標簽分為兩類, 分別是容器級和文本級
什么是div?
- 作用: 一般用于配合css完成網頁的基本布局
什么是span?
- 作用: 一般用于配合css修改網頁中的一些局部信息
div和span有什么區別?
- div會單獨的占領一行,而span不會單獨占領一行
- div是一個容器級的標簽, 而span是一個文本級的標簽
容器級的標簽和文本級的標簽的區別?
- 容器級的標簽中可以嵌套其它所有的標簽
- 文本級的標簽中只能嵌套文字/圖片/超鏈接
容器級的標簽
div h ul ol dl li dt dd ...
文本級的標簽
span p buis strong em ins del ...
在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
-
塊級元素
獨占一行- 如果沒有設置寬度, 那么默認和父元素一樣寬
- 如果設置了寬高, 那么就按照設置的來顯示
-
行內元素
不會獨占一行- 如果沒有設置寬度, 那么默認和內容一樣寬
- 行內元素是不可以設置寬度和高度的
為了能夠讓元素既能夠不獨占一行, 又可以設置寬度和高度, 那么就出現了行內塊級元素
block 塊級
inline 行內
inline-block 行內塊級
5.快捷鍵
di display: inline;
db display: block;
dib display: inline-block;
背景
背景顏色
在CSS中有一個background-color:屬性, 就是專門用來設置標簽的背景顏色的
快捷鍵:
bc background-color: #fff;
背景圖片
在CSS中有一個叫做background-image: url();的屬性,
快捷鍵:
bi background-image: url();
背景平鋪
在CSS中有一個background-repeat屬性, 就是專門用于控制背景圖片的平鋪方式的
取值:
- repeat 默認, 在水平和垂直都需要平鋪
- no-repeat 在水平和垂直都不需要平鋪
- repeat-x 只在水平方向平鋪
- repeat-y 只在垂直方向平鋪
快捷鍵
bgr background-repeat:
背景定位
在CSS中有一個叫做background-position:屬性, 就是專門用于控制背景圖片的位置
取值
水平方向: left center right
垂直方向: top center ``bottom
具體的像素
例如: background-position: 100px 200px;
記住一定要寫單位, 也就是一定要寫px
記住具體的像素是可以接收負數的
快捷鍵:
bp background-position: 0 0;
背景屬性縮寫
background: 背景顏色 背景圖片 平鋪方式 關聯方式 定位方式;
快捷鍵:
bg+ background: #fff url() 0 0 no-repeat;
背景圖片和插入圖片區別
- 背景圖片僅僅是一個裝飾, 不會占用位置
- 插入圖片會占用位置
- 背景圖片有定位屬性, 所以可以很方便的控制圖片的位置
- 插入圖片沒有定位屬性, 所有控制圖片的位置不太方便
總結
以上是生活随笔為你收集整理的二、CSS知识总结（上篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 待返还余额是什么意思
- 下一篇： CSS 基本样式