css簡要介紹-創(chuàng)新互聯(lián)

css簡要介紹

10年積累的網(wǎng)站設計制作、網(wǎng)站建設經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設流程，更有青州免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

CSS全名：（Cascading Style Sheets，層疊樣式表、樣式表），我們可以根據(jù)需要來修改某一個或者某一類HTML元素的樣式。

XHTML是結構標記：哪些地方是段落，哪些地方是項目符號，哪些地方是圖片等

CSS是表現(xiàn)、格式：這個段落文本顏色、大小、對齊方式、邊框、背景顏色等。

以前作網(wǎng)站是用以下方式來：

<p><font color=“#ff0000” size=“7” face=“黑體”>北京傳智播客教育培訓中心</font></p>

現(xiàn)在我們要將結構和表現(xiàn)分離：

<style  type=“text/css”>
p{
Color:#FF0000;
Font-size:24px;
Font-family: 黑體;
Background-color：#f0f0f0;
Border:1px dashed #000000;
Letter-spacing：10px;
}
</style>
<p>北京傳智播客教育培訓中心</p>

CSS語法格式：

p（選擇器）{

Color（屬性名稱）:#FF0000（值）;

Font-size（屬性名稱）:24px（值）;

}

</style>

一個格式表<style></style>由多個樣式規(guī)則構成；

一個格式規(guī)則由“選擇器”和“格式聲明語句”構成，如：p就是選擇器，{}中的語句就是格式定義；

選擇器就是要定義樣式的HTML元素(標記)；

格式聲明語句放在{}中，{}中由多個格式聲明語句構成；比如：color:#FF0000;

格式語句由“屬性名稱”和“屬性值”構成，屬性名稱和屬性值間用冒號隔開，每個格式語句必須以分號結束。

CSS選擇器：給哪一個HTML標記加樣式

一、基本選擇器

（1）通用選擇器(*)

格式：*{font-size:24px;}

說明：通用選擇器(*)，將匹配所有的HTML標記。

注意：通用選擇器(*)，IE6不支持，建議盡量少用。

（2）標簽選擇器，對應于所學的HTML標記

格式：h2{color:#FF0000;}

舉例： h3{color:#FF0000;}

p{font-size:14px;line-height:150%;color:#9900CC;}

li{color:#0000ff;text-decoration:underline;cursor:pointer;}

（3）類樣式：就是給一類HTML元素添加樣式，類樣式以“.”開頭。(使用最多的樣式)

可以同時給多個HTML元素增加class屬性，class屬性的值可以一樣。

<div class=“news”>Welcome to Guangzhou</div>

<p class=“news”>這是一個段落</p>

.news{ color:#FF0000; font-size:24px; }

</style>

（4）id選擇器：給標記特定id屬性的HTML元素添加樣式，id選擇器必須以“#”開頭。（使用最少的樣式）

HTML元素的id屬性的值，必須唯一。

Id屬性就相當于×××號一樣，不能重復；

HTML元素的id屬性，一般是給JS使用；

#box{color:#FF0000;}

</style>

二、組合選擇器

（1）多元素選擇器：E,F,G,H{color:#FF0000;}

說明：同時給E元素、F元素、G元素、H元素增加樣式，多個元素間用逗號隔開

body,div,ul,li,ol,dt,dd,p,form,a{margin:0px; padding:0px; }

div.box,div#header,form{color:#FF0000; }

div.box含義：class=“box”的<div>元素；

div#header含義：id=“header”的<div>元素；

（2）后代元素選擇器

格式：E F{color:#FF0000;}

說明：E元素的所有后代的F元素，增加樣式，中間用空格隔開

.news li{width:400px;border:1px solid#006600;}

（3）子元素選擇器

格式：E > F{color:#FF0000}

說明：匹配E元素的子元素F，增加樣式

舉例：.news >.title{background-color:#FFCC66;}

三、偽類選擇器：一般是給超級鏈接<a>增加CSS樣式

一個鏈接有四種狀態(tài)：正常狀態(tài)(:link)、放上狀態(tài)(:hover)、激活狀態(tài)(:active)、訪問過的狀態(tài)(:visited)

（1）全局鏈接樣式的設置

a:link,a:visited{color:#0000FF;text-decoration:none;}

a:hover{color:#990000;text-decoration:underline;}

（2）局部鏈接樣式的設置：給一類鏈接加樣式

<a class="a1" href="#">福州：女子鬧市候車時被劃傷臉兇手很快消失(圖)</a>

a.a1:link,a.a1:visited{color:#009900;font-weight:bold;font-size:18px;}

a.a1:hover{ color:#FF00FF;border:1px solid #996600;}

1.CSS尺寸屬性

Width：指定元素的寬度，單位是 px或%

Height：指定元素的高度，單位是px或%

注意：任何HTML元素，都可以看成一個“盒子”，都具有width、height、padding(內(nèi)邊距)、margin(外邊距)、border、backgroun(背景)。比如：<b><i><font><span><div><table>等

2.CSS文本屬性

Color：文本顏色，取值：英文單詞、10進制、16進制；

text-align：文本的水平對齊，取值：left center right

text-decoration：文本修飾線，取值：none、underline、overline、line-through

text-indent：首行縮進，text-indent:36px;

letter-spacing：字間距

line-height：行高，line-height:150%; line-height:24px;

3.CSS字體屬性

font-family：設置字體

font-weight：粗細，取值：bold，相當于<b>

font-style：斜體，取值：italic，相當于<i>

font-size：文字大小

font：簡寫的形式，各個屬性值間用空格隔開

body{ font-size:24px; font-family:黑體; font-weight:bold; font-style:italic; }

body{ font:bold italic 24px 黑體; }

4.CSS列表屬性

list-style-type：列表的類型，取值：none、disc、circle、square

list-style-p_w_picpath：列表的圖片，list-style-p_w_picpath:url(p_w_picpaths/li01.gif);

list-style-position：符號的位置，取值：outside(外)、inside(內(nèi))

list-style：簡寫形式時，各個屬性值間用空格隔開

.li01{ list-style-type:none;list-style-p_w_picpath:url(p_w_picpaths/li01.gif);list-style-position:outside; }

.li01{ list-style:url(p_w_picpaths/li01.gif) disc outside;}

實現(xiàn)：單行文本在一個“容器”中垂直居中，使用的原理是，height和line-height值一樣，就可以實現(xiàn)。

例子：

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css列表練習</title>
<style type="text/css">
.news{
width:600px;
border:1px solid #cccccc;
margin:20px auto;
padding:0px;
}
.news h3{margin:0px;padding:0px;font-family:黑體;}
.news ul li{
line-height:28px;
height:28px;
list-style-type:none;
font-size:14px;
list-style-position:inside;
list-style-p_w_picpath:url(li01.jpg)
}
a:link,a:visited{color:#0000ff;text-decoration:none;}
a:hover{color:#ffbb00;text-decoration:underline;}
a.a1:link,a.a1:visited{color:#ff0000;font-size:18px;}
a.a1:hover{color:#ff00ff;border:1px solid #bbbbbb;}
</style>
</head>
<body>
<div class="news">
<h3>頻道推薦</h3>
<ul>
<li><a href="#">萬科在唐山已經(jīng)轉不動了</a></li>
<li><a class="a1" href="#">網(wǎng)上流傳的一份萬科執(zhí)行副總裁毛大慶在內(nèi)部沙龍的講話</a></li>
<li><a href="#">盡管萬科對外回應稱</a></li>
<li><a class="a1" href="#">近三年一直處于滯漲狀態(tài)</a></li>
<li><a href="#">萬科在唐山已經(jīng)轉不動了</a></li>
<li><a class="a1" href="#">網(wǎng)上流傳的一份萬科執(zhí)行副總裁毛大慶在內(nèi)部沙龍的講話</a></li>
<li><a href="#">盡管萬科對外回應稱</a></li>
<li><a class="a1" href="#">近三年一直處于滯漲狀態(tài)</a></li>
<li><a href="#">近三年一直處于滯漲狀態(tài)</a></li>
<li><a class="a1" href="#">萬科在唐山已經(jīng)轉不動了</a></li>
<li><a href="#">網(wǎng)上流傳的一份萬科執(zhí)行副總裁毛大慶在內(nèi)部沙龍的講話</a></li>
<li><a class="a1" href="#">盡管萬科對外回應稱</a></li>
<li><a href="#">近三年一直處于滯漲狀態(tài)</a></li>
<li><a class="a1" href="#">近三年一直處于滯漲狀態(tài)</a></li>
<li><a href="#">萬科在唐山已經(jīng)轉不動了</a></li>
<li><a class="a1" href="#">網(wǎng)上流傳的一份萬科執(zhí)行副總裁毛大慶在內(nèi)部沙龍的講話</a></li>
<li><a href="#">盡管萬科對外回應稱</a></li>
<li><a class="a1" href="#">近三年一直處于滯漲狀態(tài)</a></li>
</ul>
</div>
</body>
</html>

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：css簡要介紹-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://muchs.cn/article36/dgcipg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、企業(yè)建站、網(wǎng)站收錄、網(wǎng)站內(nèi)鏈、電子商務、自適應網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容