當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS---网络编程

發(fā)布時(shí)間：2025/3/20 CSS 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS---网络编程小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

CSS概述

CSS是層疊樣式表（Cascading Style Sheets）用來(lái)定義網(wǎng)頁(yè)的顯示效果。可以解決html代碼對(duì)樣式定義的重復(fù)，提高了后期樣式代碼的可維護(hù)性，并增強(qiáng)了網(wǎng)頁(yè)的顯示效果功能。簡(jiǎn)單一句話：CSS將網(wǎng)頁(yè)內(nèi)容和顯示樣式進(jìn)行分離，提高了顯示功能。
那么CSS和HTML是如何在網(wǎng)頁(yè)代碼中相結(jié)合的呢？通過(guò)四種方式：style屬性、style標(biāo)簽、導(dǎo)入和鏈接。

CSS與HTML相結(jié)合的四種方式

1、style屬性方式
這種方式很少用，因?yàn)檫€是和HTML差不多。
一般用后面3種。

2、style標(biāo)簽方式

3、導(dǎo)入方式

4、鏈接方式

選擇器

就是指定CSS要作用的標(biāo)簽，那個(gè)標(biāo)簽的名稱就是選擇器。意為：選擇哪個(gè)容器（標(biāo)簽本身就是封裝數(shù)據(jù)的容器）。

選擇器共有三種：

1) html標(biāo)簽名選擇器。使用的就是html的標(biāo)簽名。
(也就是直接用html中的標(biāo)簽)
2) class選擇器。其實(shí)使用的是標(biāo)簽中的class屬性。
(前面加：# )
3) id選擇器。其實(shí)使用的是標(biāo)簽的中的id屬性。
(前面加：. )

每一個(gè)標(biāo)簽都定義了class屬性和id屬性。用于對(duì)標(biāo)簽進(jìn)行標(biāo)識(shí)，方便對(duì)標(biāo)簽進(jìn)行操作。
在定義的中，多個(gè)標(biāo)簽的class屬性值可以相同，而id值要唯一，因?yàn)镴avaScript中經(jīng)常用。

選擇器的優(yōu)先級(jí)
標(biāo)簽名選擇器 < class選擇器 < id選擇器 < style屬性

擴(kuò)展選擇器

關(guān)聯(lián)選擇器

標(biāo)簽是可以嵌套的，要讓相同標(biāo)簽中的不同標(biāo)簽顯示不同樣式，就可以用此選擇器。例如：

p { color:#00FF00;} p b { color:#FF000;} <p>P標(biāo)簽<b>湖南城市學(xué)院</b>段落樣式</p> <p>P標(biāo)簽段落</p>

設(shè)置P標(biāo)簽。
設(shè)置P標(biāo)簽中的b標(biāo)簽。

組合選擇器

對(duì)多個(gè)選擇器進(jìn)行相同樣式的定義。例如，我們想對(duì)“div中的標(biāo)簽”和“類名為cc”的區(qū)域設(shè)置相同的樣式，則可以定義如下的組合選擇器：

.cc, div b{/*不同選擇器之間用逗號(hào)分開(kāi)*/background-color:#0000ff;color:#fff; }

設(shè)置id=”cc”的標(biāo)簽和div標(biāo)簽下的b標(biāo)簽。

偽元素選擇器

其實(shí)就在html中預(yù)先定義好的一些選擇器，稱為偽元素。

格式：標(biāo)簽名:偽元素。類名標(biāo)簽名。類名:偽元素。

超鏈接a標(biāo)簽中的偽元素：

a:link 超鏈接未點(diǎn)擊狀態(tài)。
a:visited 被訪問(wèn)后的狀態(tài)。
a:hover 光標(biāo)移到超鏈接上的狀態(tài)（未點(diǎn)擊）。
a:active 點(diǎn)擊超鏈接時(shí)的狀態(tài)。

段落p標(biāo)簽中的偽元素：
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一個(gè)字母。

自定義偽元素：

:focus 具有焦點(diǎn)的元素（其實(shí)有點(diǎn)類似點(diǎn)擊后的監(jiān)聽(tīng)）

div:hover{background-color:#f00;color:#fff;}

CSS的盒子模型

◇邊框(border)
上 border-top
下 border-bottom
左 border-left
右 border-right

◇內(nèi)補(bǔ)丁(Paddings)：內(nèi)邊距
上 padding-top
下 padding-bottom
左 padding-left
右 padding-right

◇外補(bǔ)丁(Margins)：外邊距
上 margin-top
下 margin-bottom
左 margin-left
右 margin-right

邊框(border)—這個(gè)元素內(nèi)容的封閉圖形的邊界
內(nèi)補(bǔ)丁(Paddings)：內(nèi)邊距—自己這個(gè)元素邊界距離自己內(nèi)容文字的距離
外補(bǔ)丁(Margins)：外邊距—自己這個(gè)元素的邊界距離另一個(gè)元素的邊界（邊框）的距離

CSS布局——漂浮

◇ float : none | left | right
none :　默認(rèn)值。對(duì)象不飄浮
left :　文本流向?qū)ο蟮挠疫?
（本對(duì)象流向左邊）
right :　文本流向?qū)ο蟮淖筮?
（本對(duì)象流向右邊）

◇ clear : none | left | right | both
none :　默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象
left :　不允許左邊有浮動(dòng)對(duì)象
right :　不允許右邊有浮動(dòng)對(duì)象
both :　不允許有浮動(dòng)對(duì)象

（如果不允許浮動(dòng)對(duì)象，且正好有一個(gè)對(duì)象漂浮過(guò)來(lái)，需要占這個(gè)對(duì)象一行位置，則這個(gè)對(duì)象移動(dòng)，給那個(gè)漂浮過(guò)來(lái)的對(duì)象讓出一行位置，讓他們不會(huì)重疊）

CSS布局——定位
◇ position : static | absolute | fixed | relative
static :　默認(rèn)值。無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則。
absolute : 將對(duì)象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則依據(jù) body 對(duì)象。而其層疊通過(guò) z-index 屬性定義。
fixed :　未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范。
relative :　對(duì)象不可層疊，但將依據(jù) left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置。

absolute —絕對(duì)定位。
如果某個(gè)對(duì)象用了絕對(duì)定位，其實(shí)就相當(dāng)于這個(gè)對(duì)象漂浮在另一個(gè)層面（重疊），而原來(lái)層面上自己占的位置被其他模塊覆蓋。

relative —相對(duì)定位。
如果某個(gè)對(duì)象用了相對(duì)定位，也相當(dāng)于這個(gè)對(duì)象漂浮在另一個(gè)層面（重疊），但是原來(lái)層面上自己占的位置不會(huì)被其他模塊覆蓋。

CSS布局——圖文混排
CSS布局——圖像簽名
（這2個(gè)方式的實(shí)現(xiàn)其實(shí)就是用了盒子模型，絕對(duì)定位或相對(duì)定位來(lái)實(shí)現(xiàn)的）

CSS還有很多知識(shí)點(diǎn)，可以多寫(xiě)寫(xiě)，看看API就熟悉了，基本語(yǔ)法也就這么多~~

總結(jié)

以上是生活随笔為你收集整理的CSS---网络编程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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