CSS(Cascading Style Sheets 級聯 樣式 表) ，別稱：層疊樣式表。用于解決HTML網頁外觀丑陋的問題，主要包括對字體、顏色、間距、元素寬高、背景顏色等。同時也解決了HTML標簽不宜維護的問題。

css如何使用？

外部樣式 ?例子：<link rel="stylesheet" href="css文件的地址">css的內容寫于.css的文件中。

內部樣式 ?例子：<style>

選擇器（選擇的標簽）{

???????????????????????????? 屬性1: 屬性值1;

????? ??????????????????? ?????? 屬性2: 屬性值2;

}

</style>

style標簽一般位于head標簽中無法多頁面樣式共享。

行內樣式 ?例子<h1 style=” 屬性1：屬性值1；屬性2：屬性值2；”> </h1>

優先級 行內樣式>內部樣式>外部樣式 （離標簽越近優先級越高）

選擇器 ?

解決選取HTML中同一類標簽元素的問題；解決快速準確定位某一標簽元素的問題。

標簽選擇器：可以把某一類標簽全部選擇出來 例如所有的p標簽

p {

? ? background-color: green;

}

?<p class="twoEyes">我是雙眼小黃人3號</p>

類選擇器 ：使用時需先加“.”(英文點號)進行標識再加類名。

.twoEyes {

? ? color: blue;

}

?<p class="twoEyes">我是雙眼小黃人3號</p>

id選擇器：使用時需先加“#”進行標識再加id名。需注意id值是唯一的。

#man {

? ? color: aqua;

}

<div id="man">胖叔叔感到很困惑</div>

通配選擇器：用*號表示，*代表網頁中所有的標簽。

* {

? ? text-align: right;

}

后代選擇器：例 E F?? 選擇匹配的F元素，同時匹配的F元素被包含與匹配的E元素中。

body h4{

? ? font-size: 18px;

}

? ? ? ? <h1>我的日記</h1>

? ? ? ? <h4>我們今天很開心</h4>

? ? ? ? <h4 class="happy">我們今天很快樂</h4>

? ? ? ? <h4>我們今天很瀟灑</h4>

? ? ? ? <div>

? ? ? ? ? ? <h4>好事兒都是你們的</h4>

? ? ? ? ? ? <h4>矮油，真擺</h4>

? ? ? ? </div>

所有的h4標簽字體大小改變。

子代選擇器：例E>F? 選擇匹配的F元素，同時匹配的F元素被包含與匹配的E元素中。

body>h4{

? ? background-color: pink;

}

? ? ? ? <h1>我的日記</h1>

? ? ? ? <h4>我們今天很開心</h4>

? ? ? ? <h4 class="happy">我們今天很快樂</h4>

? ? ? ? <h4>我們今天很瀟灑</h4>

? ? ? ? <div>

? ? ? ? ? ? <h4>好事兒都是你們的</h4>

? ? ? ? ? ? <h4>矮油，真擺</h4>

? ? ? ? </div>

前三個h4標簽內的文字變為粉色

并集選擇器：

?h1,h2,h3,h4 {

? ? ?background: red;

?}

h1 h2 h3 h4 標簽都會變成紅色。

字體樣式和文本樣式

font-family 設置字體類型。

font-family: "Times New Roman", "隸書","楷體","微軟雅黑";

后面的字體為前面字體的后備字體。

font-size 設置字體大小。

div {

? ? ? ? ? ? font-size: 10px;

? ? ? ? }

div中的字體全變成10px。

font-style 設置字體風格。

font-style: italic;

字體變為斜體。

font-weight 設置字體的粗細。

font-weight: bold;

字體加粗

color 設置文本顏色。

color: blue;

文本顏色變為藍色。

text-align 用于設置文本內容的水平對齊。

text-align: center;

文本水平居中（若為left 則為左對齊 right 為右對齊）

line-height? 用于設置行間距，即字符的垂直間距。

? ? height: 500px;

? ? line-height: 500px;

此時文本垂直居中 注：line-height的值需與height的值相等時才可。

text-indent? 首行縮進

text-indent: 2em;

首行縮進兩個字符 注：1em就是一個漢字的寬度。

text-transform?? 文字變形

???? capitalize 首字母大寫

???? uppercase? 全部大寫

???? lowercase? 全部小寫

text-transform: capitalize;

英文的首字母大寫。

text-decoration? 用于鏈接的修改裝飾。

?none 取消下劃線。

text-decoration: none;

?overflow: hidden;

文本炒熟限定的寬度后則隱藏顯示。

white-space: nowrap;

設置文字在一行顯示，不能換行。

?text-overflow: ellipsis;

規定文本溢出時，顯示省略符號來代替。

偽類和偽元素

偽類用于定義元素的“特殊狀態”，可用于設置鼠標懸停在元素上時的樣式、以訪問或未訪問鏈接的樣式

a:hover {

? ? color: red;

? ? text-decoration: underline;

}

鼠標懸停時鏈接字體顏色變為紅色并出現下劃線。

a:visited{

? ? color: green;

}

鏈接訪問后字體顏色變為綠色。

偽元素用于設置元素指定部分的樣式

div::before{

? ? content:'我是';

}

<div>

? ? ? ? ? ? 盒子

? ? ? ? </div>

此時在“盒子”前會出現“我是”

div::after{

? ? content:'哈哈';

}

<div>

? ? ? ? ? ? 盒子

? ? ? ? </div>

此時在“盒子”后會出現“哈哈”

背景樣式

background-color: 背景顏色

?background-color: red;

背景顏色此時為紅色。

background-image: url(“圖片地址”)? 背景圖片

background-image: url("css/g3.jpg");

background-repeat; 背景重復方式

??repeat 沿水平和垂直方向平鋪

?no-repeat 不平鋪

background-repeat: no-repeat;

background-position 背景的定位

?top 最上

?bottom 最下

符合屬性簡寫

background： 背景顏色 背景圖片地址 背景平鋪 背景圖像固定 背景圖片位置；

background: red url(css/g1.jpg) no-repeat ?scroll ?right top;

此時背景顏色為紅色并插入了背景圖片，背景圖片不平鋪，背景圖片與視口自己的滾動條不動外部的滾動條動，背景圖片位置在右上。

Background-size? 圖片尺寸

background-size: contain;

此時保持圖片的寬度與背景的寬度一直 cover 則是保持高度一致。size屬性不能集成.

線性漸變

background: linear-gradient(to left, blue, yellow);

此時從左到右有藍色變為黃色 改變方向 to right 、to bottom、to top 使用角度 例45deg則為45度角。

盒子模型

盒子的大小 border以內的為和盒子的實際大小

Margin為外邊距padding為內邊距 border為邊框。box-sizing:border-box 自動扣除邊框和內間距。

?

總結

以上是生活随笔為你收集整理的Css知识回顾的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。