@Author：Runsen

文章目錄

• 什么是css
• css的格式
• css 三種寫法
• 選擇器
• • 標(biāo)簽選擇器
  • id選擇器
  • 類選擇器
  • 后代選擇器
  • 子元素選擇器
  • 交集選擇器
  • 兄弟選擇器
  • 序選擇器
  • • • • • 同級別的第幾個
  • 同類型的第幾個
  • 屬性選擇器
  • 通配符選擇器
• 文字樣式
• • 規(guī)定文字樣式的屬性
  • 規(guī)定文字粗細(xì)的屬性
  • 規(guī)定文字大小的屬性
  • 規(guī)定文字字體的屬性
• 文本樣式
• • 文本裝飾的屬性
  • 文本水平對齊的屬性
  • 文本縮進的屬性
• 顏色屬性
• • 在CSS中如何通過color屬性來修改文字顏色
• css中三大特性
• • 繼承性
  • 層疊性
  • 優(yōu)先級
• 補充內(nèi)容
• • 優(yōu)先級之important
  • 優(yōu)先級的權(quán)重
• 標(biāo)簽理解
• • 什么是div?
  • 什么是span?
  • div和span有什么區(qū)別?
  • 容器級的標(biāo)簽和文本級的標(biāo)簽的區(qū)別?
• 背景
• • 背景顏色
  • 背景圖片
  • 背景平鋪
  • 背景定位
  • 背景屬性縮寫
  • 背景圖片和插入圖片區(qū)別

什么是css

層疊樣式表(英文全稱：Cascading StyleSheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

css的格式

<style type="text/css">標(biāo)簽名稱{屬性名稱: 屬性對應(yīng)的值;...} </style>

注意點:

style標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間(也就是必須和title標(biāo)簽是兄弟關(guān)系)

style標(biāo)簽中的type屬性其實可以不用寫, 默認(rèn)就是type=“text/css”

設(shè)置樣式時必須按照固定的格式來設(shè)置. key: value;其中:不能省略,分號大多數(shù)情況下也不能省略

css 三種寫法

head頭部寫入

直接在標(biāo)簽寫style

新建css文件在通過link標(biāo)簽導(dǎo)入

選擇器

標(biāo)簽選擇器

標(biāo)簽名稱{屬性:值; }

id選擇器

#id名稱{屬性:值; }

類選擇器

.類名{屬性:值; }

id相當(dāng)于人的身份證不可以重復(fù) class相當(dāng)于人的名稱可以重復(fù)

后代選擇器

標(biāo)簽名稱1 標(biāo)簽名稱2{屬性:值; }

后代選擇器必須用空格隔開

后代選擇器不僅僅可以使用標(biāo)簽名稱, 還可以使用其它選擇器

子元素選擇器

標(biāo)簽名稱1>標(biāo)簽名稱2{屬性:值; }

子元素選擇器只會查找兒子, 不會查找其他被嵌套的標(biāo)簽
子元素選擇器之間需要用>符號連接, 并且不能有空格

后代選擇器使用空格作為連接符號 | 子元素選擇器使用>作為連接符號

后代選擇器會選中指定標(biāo)簽中, 所有的特定后代標(biāo)簽, 也就是會選中兒子/孫子…, 只要是被放到指定標(biāo)簽中的特定標(biāo)簽都會被選中 | 子元素選擇器只會選中指定標(biāo)簽中, 所有的特定的直接標(biāo)簽, 也就是只會選中特定的兒子標(biāo)簽

交集選擇器

選擇器1選擇器2{屬性: 值; } # 用多個選擇器

并集選擇器

選擇器1,選擇器2{屬性:值; } #選到2個

并集選擇器必須使用,來連接

兄弟選擇器

相鄰兄弟選擇器 作用: 給指定選擇器后面緊跟的那個選擇器選中的標(biāo)簽設(shè)置屬性 選擇器1+選擇器2{屬性:值; }通用兄弟選擇器 作用: 給指定選擇器后面的所有選擇器選中的所有標(biāo)簽設(shè)置屬性 選擇器1~選擇器2{屬性:值; }

序選擇器

同級別的第幾個

:first-child 選中同級別中的第一個標(biāo)簽

:last-child 選中同級別中的最后一個標(biāo)簽

:nth-child(n) 選中同級別中的第n個標(biāo)簽

:nth-last-child(n) 選中同級別中的倒數(shù)第n個標(biāo)簽

:only-child 選中父元素中唯一的標(biāo)簽

:nth-child(odd) 選中同級別中的所有奇數(shù)

:nth-child(even) 選中同級別中的所有偶數(shù)

同類型的第幾個

:first-of-type 選中同級別中同類型的第一個標(biāo)簽

:last-of-type 選中同級別中同類型的最后一個標(biāo)簽

:nth-of-type(n) 選中同級別中同類型的第n個標(biāo)簽

:nth-last-of-type(n) 選中同級別中同類型的倒數(shù)第n個標(biāo)簽

:only-of-type 選中父元素中唯一類型的某個標(biāo)簽

屬性選擇器

input[type=password]{}

根據(jù)指定的屬性名稱找到對應(yīng)的標(biāo)簽, 然后設(shè)置屬性

p[class=cc]{color: blue;}

通配符選擇器

*{color: red;}

文字樣式

規(guī)定文字樣式的屬性

格式：font-style: italic;

取值：
normal ： 正常的， 默認(rèn)就是正常的
italic : 傾斜的

快捷鍵：
fs font-style: italic;
fsn font-style: normal;

規(guī)定文字粗細(xì)的屬性

格式： font-weight: bold;

單詞取值:
bold 加粗
bolder 比加粗還要粗
lighter 細(xì)線， 默認(rèn)就是細(xì)線
數(shù)字取值：
100-900之間整百的數(shù)字

快捷鍵:
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;

規(guī)定文字大小的屬性

格式：font-size: 30px;

單位：px（像素 pixel）

注意點： 通過font-size設(shè)置大小一定要帶單位， 也就是一定要寫px

快捷鍵fz font-size:;``fz30 font-size: 30px;

規(guī)定文字字體的屬性

格式：font-family:"楷體";

注意點：

• 如果取值是中文， 需要用雙引號或者單引號括起來
• 設(shè)置的字體必須是用戶電腦里面已經(jīng)安裝的字體

快捷鍵
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: 值;

取值:

• 英文單詞
  一般情況下常見的顏色都有對應(yīng)的英文單詞,

• rgb
  rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍(lán)色)

  格式: rgb(0,0,0)

  這其中的每一個數(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)色的值都一樣就是灰色
  而且如果這三個值越小那么就越偏黑色, 越大就越偏白色
  例如: color: rgb(200,200,200);

• rgba
  rgba中的rgb和前面講解的一樣, 只不過多了一個a
  那么這個a呢代表透明度, 取值是0-1, 取值越小就越透明

  例如: color: rgba(255,0,0,0.2);

• 十六進制
  在前端開發(fā)中通過十六進制來表示顏色, 其實本質(zhì)就是RGB
  十六進制中是通過每兩位表示一個顏色
  例如: #FFEE00 FF表示R EE表示G 00表示B`

css中三大特性

繼承性

作用: 給父元素設(shè)置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
注意點:

• 并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
• 在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
• 繼承性中的特殊性
  • a標(biāo)簽的文字顏色和下劃線是不能繼承的
  • h標(biāo)簽的文字大小是不能繼承的

案例 <head> <style>div{color: red;text-decoration: none;font-size: 30px;} </style> </head> <body> <div><p>我是段落</p> </div> </body>

層疊性

作用: 層疊性就是CSS處理沖突的一種能力

<head> <style>p{color: red;}.para{color: blue;} </style> </head> <body> <p id="identity" class="para">我是段落</p> #藍(lán)色 </body>

優(yōu)先級

作用:當(dāng)多個選擇器選中同一個標(biāo)簽, 并且給同一個標(biāo)簽設(shè)置相同的屬性時, 如何層疊就由優(yōu)先級來確定

• 優(yōu)先級判斷的三種方式

  • 間接選中就是指繼承

  如果是間接選中, 那么就是誰離目標(biāo)標(biāo)簽比較近就聽誰的

  • 相同選擇器(直接選中)

  如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的

  • 不同選擇器(直接選中)

  如果都是直接選中, 并且不是相同類型的選擇器, 那么就會按照選擇器的優(yōu)先級來層疊id>類>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)

補充內(nèi)容

優(yōu)先級之important

用于提升某個直接選中標(biāo)簽的選擇器中的某個屬性的優(yōu)先級的, 可以將被指定的屬性的優(yōu)先級提升為最高

• !important前面的感嘆號不能省略
• !important必須寫在屬性值得分號前面

*{color: blue !important;font-size:10px;}

優(yōu)先級的權(quán)重

當(dāng)多個選擇器混合在一起使用時, 我們可以通過計算權(quán)重來判斷誰的優(yōu)先級最高

• 首先先計算選擇器中有多少個id, id多的選擇器優(yōu)先級最高
• 如果id的個數(shù)一樣, 那么再看類名的個數(shù), 類名個數(shù)多的優(yōu)先級最高
• 如果類名的個數(shù)一樣, 那么再看標(biāo)簽名稱的個數(shù), 標(biāo)簽名稱個數(shù)多的優(yōu)先級最高

標(biāo)簽理解

在HTML中HTML將所有的標(biāo)簽分為兩類, 分別是容器級和文本級

什么是div?

• 作用: 一般用于配合css完成網(wǎng)頁的基本布局

什么是span?

• 作用: 一般用于配合css修改網(wǎng)頁中的一些局部信息

div和span有什么區(qū)別?

• div會單獨的占領(lǐng)一行,而span不會單獨占領(lǐng)一行
• div是一個容器級的標(biāo)簽, 而span是一個文本級的標(biāo)簽

容器級的標(biāo)簽和文本級的標(biāo)簽的區(qū)別?

• 容器級的標(biāo)簽中可以嵌套其它所有的標(biāo)簽
• 文本級的標(biāo)簽中只能嵌套文字/圖片/超鏈接

容器級的標(biāo)簽
div h ul ol dl li dt dd ...

文本級的標(biāo)簽
span p buis strong em ins del ...

在CSS中CSS也將所有的標(biāo)簽分為兩類, 分別是塊級元素和行內(nèi)元素

什么是塊級元素, 什么是行內(nèi)元素?

• 塊級元素會獨占一行
• 行內(nèi)元素不會獨占一行

容器級的標(biāo)簽
div h ul ol dl li dt dd ...

文本級的標(biāo)簽
span p buis stong em ins del ...

塊級元素
p div h ul ol dl li dt dd
行內(nèi)元素
span buis strong em ins del

塊級元素和行內(nèi)元素的區(qū)別?

• 塊級元素
  獨占一行

  • 如果沒有設(shè)置寬度, 那么默認(rèn)和父元素一樣寬
  • 如果設(shè)置了寬高, 那么就按照設(shè)置的來顯示

• 行內(nèi)元素
  不會獨占一行

  • 如果沒有設(shè)置寬度, 那么默認(rèn)和內(nèi)容一樣寬
  • 行內(nèi)元素是不可以設(shè)置寬度和高度的

行內(nèi)塊級元素

為了能夠讓元素既能夠不獨占一行, 又可以設(shè)置寬度和高度, 那么就出現(xiàn)了行內(nèi)塊級元素

display取值
block 塊級
inline 行內(nèi)
inline-block 行內(nèi)塊級

5.快捷鍵
di display: inline;

db display: block;
dib display: inline-block;

背景

背景顏色

在CSS中有一個background-color:屬性, 就是專門用來設(shè)置標(biāo)簽的背景顏色的

快捷鍵:
bc background-color: #fff;

背景圖片

在CSS中有一個叫做background-image: url();的屬性,

快捷鍵:
bi background-image: url();

背景平鋪

在CSS中有一個background-repeat屬性, 就是專門用于控制背景圖片的平鋪方式的

取值:

• repeat 默認(rèn), 在水平和垂直都需要平鋪
• no-repeat 在水平和垂直都不需要平鋪
• repeat-x 只在水平方向平鋪
• repeat-y 只在垂直方向平鋪

快捷鍵
bgr background-repeat:

背景定位

在CSS中有一個叫做background-position:屬性, 就是專門用于控制背景圖片的位置

取值

水平方向: left center right

垂直方向: top center ``bottom

具體的像素
例如: background-position: 100px 200px;
記住一定要寫單位, 也就是一定要寫px
記住具體的像素是可以接收負(fù)數(shù)的

快捷鍵:
bp background-position: 0 0;

背景屬性縮寫

background: 背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式;

快捷鍵:
bg+ background: #fff url() 0 0 no-repeat;

<style>div{/*background-color: red;background-image: url(images/girl.jpg);background-repeat: no-repeat;background-position: left bottom;*//*background: red url(images/girl.jpg) no-repeat left bottom;*/}body{background-image: url(images/girl.jpg);background-repeat: no-repeat;/*background-attachment: scroll;*/background-attachment:fixed;} </style>

背景圖片和插入圖片區(qū)別

• 背景圖片僅僅是一個裝飾, 不會占用位置
• 插入圖片會占用位置
• 背景圖片有定位屬性, 所以可以很方便的控制圖片的位置
• 插入圖片沒有定位屬性, 所有控制圖片的位置不太方便

總結(jié)

以上是生活随笔為你收集整理的二、CSS知识总结（上篇）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。