css簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

2024-07-11 08:25:28

字體：大中小

供稿：網(wǎng)友

CSS(Cascade Style Sheet)，即層級(jí)樣式表。

HTML可以說只是給網(wǎng)頁填充了內(nèi)容，CSS則是對(duì)網(wǎng)頁進(jìn)行化妝、修飾，比如給文字設(shè)置字體、顏色、大小等。

以前在HTML標(biāo)簽中能夠通過設(shè)置屬性的方式(比如<div width="80px">)為標(biāo)簽定義樣式（類似CSS的功能），但是現(xiàn)在推薦使用CSS設(shè)置(div{width:80px;})，即"HTML與CSS分離"，在web中還有“頁面展示與邏輯處理分離”等概念。

一般來說目前實(shí)現(xiàn)網(wǎng)頁時(shí)不需要從零做起，網(wǎng)上有很多好的CSS代碼可以使用但是為了能看懂那些代碼（或更好地學(xué)習(xí)CSS框架），我們需要學(xué)習(xí)CSS的基本知識(shí)。

CSS的基本結(jié)構(gòu)如下：

<selector>{　　<attr1>:<value1>;　　<attr2>:<value2>;　　<attr3>:<value3>;　　......　　<attrN>:<valueN>;}

解釋：

<selector>的中文名叫“選擇器”，表示對(duì)哪個(gè)元素設(shè)置樣式。<selector>大括號(hào)內(nèi)部設(shè)置具體的樣式，如字體等。

設(shè)置樣式的方法是通過多對(duì)<attr>:<value>組合而成，中間用分號(hào)( ; )分隔。

這里舉個(gè)簡單的例子：

body{ //對(duì)<body>內(nèi)的元素進(jìn)行設(shè)置　　font-size:12px; //設(shè)置字體大小為12px,px是pixel的縮寫，表示像素　　font-family:sans-serif,Georgia; //設(shè)置首選字體為sans-serif,如果本機(jī)內(nèi)沒安裝此字體，則使用Georgia}

CSS的規(guī)則

1.繼承原則：如果父標(biāo)簽定義了某樣式，則默認(rèn)對(duì)應(yīng)的子標(biāo)簽也應(yīng)用該樣式。

2.就近原則：離修飾標(biāo)簽越近的CSS樣式優(yōu)先級(jí)越高。

引入CSS樣式的方法

這里只介紹兩種最常用的：

1.內(nèi)部樣式表：在<head></head>內(nèi)部添加：<style type="text/css">......</style>

2.外部樣式表：將CSS放在文件(如home.css)中，并在<head></head>內(nèi)部添加：<link rel="stylesheet" type="text/css" href="home.css"/>

在CSS中不可避免會(huì)遇到顏色設(shè)置，因此這里我們需要學(xué)習(xí)怎么表示顏色。

共有4種顏色表示法：

1.預(yù)定義顏色：例如“color:black”中的black就是預(yù)定義的顏色。

2.十六進(jìn)制表示法：#ABCDEF，其中AB、CD、EF分別對(duì)應(yīng)R、G、B。例子：#FFFFFF 表示白色。

3.短十六進(jìn)制表示法：這是對(duì)第二種表示法的特例，當(dāng)A=B時(shí)A和B只寫一個(gè)(同樣地，C=D、E=F 時(shí)也類似)。例子：#FF00CC 可簡寫為 #F0C.