1. CSS 是什么

CSS叫做層疊樣式表。CSS 能夠對網(wǎng)頁中元素位置的排版進行像素級精確控制, 實現(xiàn)美化頁面的效果。能夠做到頁面的樣式和結構分離。

2. 基本語法規(guī)范

舉個例子：

這里的style標簽我們一般設置在head標簽里。

可以看出被選擇器修飾的和沒被修飾的不同。

3. 引入方式

3.1 內部樣式表

寫在 style 標簽中，嵌入到 html 內部，理論上來說 style 放到 html 的哪里都行，但是一般都是放到 head 標簽中。

3.2 行內樣式表

通過 style 屬性，來指定某個標簽的樣式，只適合于寫簡單樣式，只針對某個標簽生效。

3.3 外部樣式

舉個例子：

我們在這里創(chuàng)建一個css文件，在里面把樣式寫好。

然后引入，就可以看到效果了。

4. 選擇器

4.1 選擇器的功能

選中頁面中指定的標簽元素，因為要先選中元素，才能設置元素的屬性。

4.2 選擇器的種類

4.3 基礎選擇器

4.3.1 標簽選擇器

上面寫的例子就是標簽選擇器。

4.3.2 類選擇器

舉個例子：


我們用class來取名，就可以指定了。


代碼示例: 使用多個類名
注意: 一個標簽可以同時使用多個類名，這樣做可以把相同的屬性提取出來, 達到簡化代碼的效果。

4.3.3 id 選擇器

舉個例子：



它的使用方法和類選擇器類似，區(qū)別是：姓名是類選擇器, 可以重復。身份證號碼是 id 選擇器, 是唯一的。

4.3.4 通配符選擇器

一般可以用來設置背景顏色。

4.4 復合選擇器

4.4.1 后代選擇器

選擇某個父元素中的某個子元素，或者是孫子級別的。

舉個例子：

把 ol 中的 li 修改顏色, 不影響 ul 中的li


把父子關系都寫上就可以區(qū)別開了。

元素 2 不一定非是 兒子, 也可以是孫子。


我們有這兩種方法來寫。

4.4.2 偽類選擇器

偽類選擇器有什么用呢?

當我們點這種鏈接時，會變顏色，不點就是黑色。

5. 字體屬性

5.1 文本對齊

不光能控制文本對齊，也能控制圖片等元素居中或者靠右。

5.2 文本裝飾

5.3 文本縮進

這里在介紹一個行高：行高指的是上下文本行之間的基線距離。

6. 背景屬性

6.1 背景顏色

6.2 背景圖片

6.3 背景平鋪

舉個例子：


可以看到水平平鋪會在行一直鋪下去，垂直平鋪會在垂直方向按照大小一直鋪下去。

6.4 背景位置

6.5 背景尺寸

7. 圓角矩形

這是一個矩形?，F(xiàn)在我們可以讓它變圓一點。

7.1 展開寫法

8. 元素的顯示模式

8.1 改變顯示模式

使用 display 屬性可以修改元素的顯示模式.
可以把 div 等變成行內元素, 也可以把 a , span 等變成塊級元素。

display: block 改成塊級元素 [常用]
display: inline 改成行內元素 [很少用]
display: inline-block 改成行內塊元素

9. 盒模型

9.1 邊框

舉個例子：

結果如下：


但是邊框會撐大盒子，width, height 是 500*250，而最終整個盒子大小是 520 * 270。邊框10個像素相當于擴大了大小。

9.2 內邊距

padding 設置內容和邊框之間的距離，默認內容是頂著邊框來放置的。

舉個例子：


注意：內邊距也會影響到盒子大小(撐大盒子)。使用 box-sizing: border-box 屬性也可以使內邊距不再撐大盒子(和上面 border 類似)。

9.3 外邊距

9.4 塊級元素水平居中

舉個例子：


這個水平居中的方式和 text-align 不一樣，margin: auto 是給塊級元素用得到。text-align: center 是讓行內元素或者行內塊元素居中的，另外, 對于垂直居中, 不能使用 "上下 margin 為 auto " 的方式。

10. 彈性布局

舉個例子：


可以看到，給span 設置高度，沒有效果。


當我們給 div 加上 display:flex 之后，可以看到span 有了高度，不再是 “行內元素了”。

10.1 flex 布局基本概念

flex 是 flexible box 的縮寫，意思為 “彈性盒子”。任何一個 html 元素，都可以指定為 display:flex 完成彈性布局。flex 布局的本質是給父盒子添加 display:flex 屬性，來控制子盒子的位置和排列方式。

10.2 justify-content

設置主軸上的子元素排列方式：

舉個例子：

10.3 align-items

設置側軸上的元素排列方式：

理解 stretch(拉伸)：這個是 align-content 的默認值，意思是如果子元素沒有被顯式指定高度，那么就會填充滿父元素的高度。


align-items 只能針對單行元素來實現(xiàn)，如果有多行元素，就需要使用 item-contents。文章來源地址http://www.zghlxwxcb.cn/news/detail-821083.html

到了這里，關于CSS基本知識的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！