CSS知識(shí)點(diǎn)

  • CSS是Cascading Style Sheet(層疊樣式表)的縮寫。是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語言。

  • 將網(wǎng)站分成兩個(gè)部分，表現(xiàn)和內(nèi)容，表現(xiàn)由css控制，內(nèi)容由PHP從數(shù)據(jù)庫(kù)中讀取。

  • 樣式以<style>開頭，</style>結(jié)尾

  • 樣式一般寫在<head></head>之間

CSS基本語法

  • 基本構(gòu)成
    1.選擇器
    2.屬性
    3.屬性的取值（value）
  • 基本格式
    選擇器{屬性：值;}

小結(jié)：一個(gè)選擇器中可以有多個(gè)屬性，每個(gè)屬性都有對(duì)應(yīng)的值，屬性和值之間用冒號(hào)隔開，屬性和屬性之間由分號(hào)隔開。

按選擇器不同來分類

  • 類選擇器 Class selector
    語法規(guī)則：
    1.必須以.開頭
    2.通過class屬性來調(diào)用
    3.類樣式可以被多次調(diào)用
<head>
<style type='text/css'>
.aa{
    color:red;
    font-size:14px;
}
</style>
</head>

<body>
<p class='aa'>楚河漢界</p>
</body>
  • ID選擇器
    語法規(guī)則：
    1.必須以#開頭
    2.通過元素的id屬性調(diào)用
    3.只能被調(diào)用一次
<head>
<style type='text/css'>
#aa{
    color:red;
    font-size:14px;
    text-decoration:underline;
}
</style>
</head>

<body>
<p id='aa'>楚河漢界</p>
</body>
  • 標(biāo)簽/標(biāo)記選擇器

語法規(guī)則：直接選擇html的標(biāo)記

<head>
<style type='text/css'>
p{
    color:red;
    font-size:14px;
    text-decoration:underline;
    font-family: "黑體",'隸書','宋體';
}
</style>
</head>

<body>
<p>楚河漢界</p>
<p>床前明月光</p>
<p>疑是地上霜</p>
</body>
  • 關(guān)聯(lián)選擇器
    總結(jié)：
  1. p .aa 表示p下面的.aa，即p的后代
  2. p>.aa 表示p的子集中的.aa
  3. p.aa表示同時(shí)具備p和.aa的元素
<head>
<style type='text/css'>
/*p的后代b，即p下的所有b*/
p b{                    
    color:red;
}
/*p的子集b*/
p>b{                    
    color:red;
}
</style>
</head>

<body>
<p><b>楚河漢界</b></p>
<b>床前明月光</b>
<b>疑是地上霜</b>
</body>
  • 組合選擇器
    每個(gè)選擇器之間用，隔開
<style type='text/css'>
.aa,#bb,p{                    
    color:red;
}
</style>
  • 偽類選擇器
    類有一個(gè)狀態(tài)，可以被多個(gè)元素訪問，超鏈接有四個(gè)狀態(tài)，如下
    :link 正常鏈接時(shí)候的狀態(tài)
    :visited 已經(jīng)點(diǎn)擊過的狀態(tài)
    :hover 當(dāng)鼠標(biāo)移上去時(shí)候的狀態(tài)
    :active 當(dāng)鼠標(biāo)點(diǎn)擊下去的狀態(tài)
<style type='text/css'>
a:link{
    color: red;
    text-decoration: none;
}
a:visited{
    color: yellow;
    text-decoration: none;
}
a:hover{
    color: orange;
    text-decoration:underline;
}
a:active{
    color: green;
    font-size: 24px;
    text-decoration: underline;
}
</style>

<body>
<a href='#'>超鏈接</a>
</body>

偽類有四個(gè)狀態(tài)，可以省略其中的某個(gè)狀態(tài)，如果省略就使用默認(rèn)狀態(tài)，但是如果不省略就要按照l，v，h，a的順序。

  • 如果在一個(gè)頁(yè)面上，想要實(shí)現(xiàn)一部分的超鏈接是一個(gè)樣式，另一部分的超鏈接是另一種樣式，則可以使用偽類和類的組合。
<style type='text/css'>
a.aa:link{
    color: red;
    text-decoration: none;
}
a.bb:link{
    color: yellow;
    text-decoration: none;
}
a.aa:hover{
    color: orange;
    text-decoration:underline;
}
a.bb:hover{
    color: green;
    font-size: 24px;
    text-decoration: underline;
}
</style>

<body>
<a class='aa' href='#'>超鏈接</a>
<a class='bb' href='#'>超鏈接1</a>
</body>

css的樣式

  • 內(nèi)嵌樣式
    在html頁(yè)面的內(nèi)部嵌入
<style type='text/css'>
/*樣式代碼*/
</style>

  • 行內(nèi)樣式
    通過元素的style屬性直接寫的樣式
    <標(biāo)記 style=‘樣式’>

  • 外部樣式
    首先新建一個(gè)css文件，在html頁(yè)面中通過鏈接或?qū)氲姆椒▉硪猛獠繕邮健?br> 1.鏈接外部樣式 ：<link rel='stylesheet' type='text/css' href='相對(duì)路徑'>
    rel:表示鏈接的類型，這個(gè)屬性不能省略，rel=stylesheet表示鏈接的類型是樣式表
    type='text/css'：表示這個(gè)文件是css文本，可以省略
    2.導(dǎo)入外部樣式

<style type='text/css'>
@import url('相對(duì)路徑');
</style>
  • 兩者區(qū)別
    鏈接樣式只能在html頁(yè)面中引入外部樣式；導(dǎo)入樣式既可以在html中導(dǎo)入外部樣式，又可以在樣式文件中導(dǎo)入外部樣式，其中導(dǎo)入樣式在樣式文件中導(dǎo)入外部樣式的方法是
@import url('相對(duì)路徑');

注釋

1.html注釋

 <!-- 注釋內(nèi)容-->

2.css注釋

 /*注釋內(nèi)容*/

按css的位置來分類

1.內(nèi)嵌樣式：在html頁(yè)面中，以<style>開頭，以</style>結(jié)束，這里面的樣式只能供本頁(yè)面使用
2.外部樣式：寫一個(gè)css文件，在需要使用css的頁(yè)面中引入外部css，我們可以將頁(yè)面公用的css寫到外部css中
3.行內(nèi)樣式：通過元素的style屬性直接寫的樣式

樣式的繼承

子元素覆蓋和繼承父元素的樣式，如果父元素有，子元素沒有，子元素繼承父元素的樣式，如果父元素有，子元素也有，子元素覆蓋父元素的樣式。

樣式的優(yōu)先級(jí)

1.id樣式>class樣式>標(biāo)簽樣式
2.行內(nèi)樣式>內(nèi)嵌樣式>外部樣式

應(yīng)用多個(gè)類樣式

以程序的執(zhí)行先后為優(yōu)先級(jí)，后執(zhí)行的將先執(zhí)行的覆蓋

強(qiáng)制優(yōu)先級(jí)

語法：!important

<style type='text/css'>
p{
color:red; !important
}
</style>

權(quán)重疊加

標(biāo)簽<類<id<行內(nèi)<important
1<10<100<1000<10000

標(biāo)記的顯示模式

  • 行顯示標(biāo)記
    1.標(biāo)記是從左往右排
    2.特性：
    a.從左往右排列
    b.如果不指定高度，高度是0
    c.如果不指定寬度，寬度是0
    d.不能指定寬度和高度
    e.轉(zhuǎn)換成塊顯示：display:block
    f.如果<a>標(biāo)記轉(zhuǎn)成塊顯示以后，可以設(shè)定寬度和高度，但是排列變成了上下排列，如果要實(shí)現(xiàn)左右排列的同時(shí)還要設(shè)定寬度和高度，可以將現(xiàn)實(shí)模式設(shè)置為：display:inline-block

  • 塊顯示標(biāo)記
    1.標(biāo)記從上往下排
    2.特性：
    a.從上往下排
    b.如果不指定寬度，默認(rèn)寬度是100%
    c.如果不指定高度，默認(rèn)高度是0
    d.可以設(shè)置寬度和高度

拼板中使用非常多的兩個(gè)塊標(biāo)記：

  • <div>
    1.塊顯示標(biāo)記
    2.跨段塊標(biāo)記，div中可以放標(biāo)題，段落，圖片，文字
  • <span>
    1.行顯示標(biāo)記
    2.跨字符塊標(biāo)記，span中只能放文字

dic+css排版

優(yōu)點(diǎn)：執(zhí)行效率高

盒子模型

  • 邊界-margin
    盒子的外面叫邊界，邊界有4個(gè)，上下左右

  • 填充-padding
    盒子的里面叫填充，填充有4個(gè)，上下左右

  • 邊框-border
    盒子的本身有邊框，邊框有4個(gè)，上下左右

  • 什么是盒子
    只要是能存放內(nèi)容的標(biāo)記都是盒子，最大的盒子是html標(biāo)記

float屬性(浮動(dòng)屬性)

  • 改變塊元素對(duì)象的默認(rèn)顯示方式
  • 浮動(dòng)元素會(huì)被移出標(biāo)準(zhǔn)流

clear屬性(清除浮動(dòng)的影響)

clear是清除浮動(dòng)，同時(shí)將邊界的屬性同時(shí)清除，所以使用了clear屬性的盒子無法使用邊界屬性

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容