整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
下面簡單介紹一下外部引用CSS兩種方式：link和@import。
XML/HTML代碼
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代碼
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
兩者都是外部引用CSS的方式，但是存在一定的區別：
區別1：默認的差別。link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS。
區別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯
區別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
區別4：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。 @import可以在css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表，如：
main.css ———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css ———————-
p {color:red;}
sub2.css ———————-
.myclass {color:blue}
這樣更利于修改和擴展。
更多 長沙網站開發 原創內容，請關注長沙蒲公英網絡。
原創文章鏈接:http://www.0731pgy.com/a/news/IndustryNews/429.html
CSS text（文本）屬性就是設置文本的外觀，比如字體顏色、對齊方式、縮進、行間距等。
屬性名：color。
屬性值：
顏色英文單詞：color：red;
16進制顏色值：color：#000000;
RGB代碼：color: rgb(255,255,255)或rgb(100%,0%,0%)
一般在開發中常用的是十六進制寫法。
代碼示例：
<head>
<style>
/* 文本顏色屬性 */
.red {
color: red;
}
.colorNum {
color: #f00;
}
.colorRgb{
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<!-- 文本顏色屬性 -->
<p class="red">我是文本屬性的單詞顏色設置</p>
<p class="colorNum">我是文本屬性的16進制顏色設置</p>
<p class="colorRgb">我說文本屬性的rgb顏色設置</p>
</body>代碼運行界面
屬性名：text-align。
屬性值：
“text-align: left”：默認值，文本左對齊。
“text-align：center”：文本居中對齊。
“text-align：right”：文本右對齊。
代碼示例：
<head>
<style>
/* 文本對齊方式 */
.l {
text-align: left;
}
.cen {
text-align: center;
}
.ri {
text-align: right;
}
</style>
</head>
<body>
<!-- 文本對齊方式 -->
<p class="l">文本左對齊</p>
<p class="cen">文本居中對齊</p>
<p class="ri">文本右對齊</p>
</body>運行界面：
屬性：text-decoration。
屬性值：
“text-decoration：none”：默認值，沒有裝飾線。
“text-decoration：underline”：給文本添加下劃線。
注意：a標簽中自帶下劃線，可以使用默認值屬性去除a標簽的下劃線。
“text-decoration：overline”：給文本添加上劃線。
“text-decoration：line-through”：給文本添加刪除線。
代碼示例：
<head>
<style>
/* 文本裝飾線 */
.nor {
text-decoration: none;
}
.underl {
text-decoration: underline;
}
.upl {
text-decoration: overline;
}
.lineTh {
text-decoration: line-through;
}
</style>
</head>
<body>
<!-- 文本裝飾 -->
<p class="nor">文本裝飾線：默認狀態</p>
<p class="underl">文本裝飾線：文本添加下劃線</p>
<p class="lineTh">文本裝飾線：文本添加刪除線</p>
<p class="upl">文本裝飾線：文本添加上劃線</p>
<a href="#">我是超鏈接標簽，文本自帶下劃線</a><br>
<a href="#" class="nor">我是超鏈接標簽，文本自帶下劃線。使用默認值屬性，可去除文本下劃線</a>
</body>運行界面：
屬性名：text-indent。通常指段落首行縮進。
屬性值：px或em。
em是一個相對單位，
如果當前元素已經設置文字大小，就按照當前元素1個文字的大小顯示縮進。
如果當前元素中沒有設置，則按照父元素的1個文字大小，即1個em=16px顯示縮進。
代碼示例：
<head>
<style>
/* 文本縮進 */
.indEm {
text-indent: 2em;
/* em是一個相對單位，
在沒有設置文字大小時，按照默認字體大小，即16px顯示。
設置了文字大小，則按照設置的文字大小，幾個em就是幾個文字大小進行顯示。
*/
}
.indPx {
/* 像素是絕對單位，設置幾就是幾 */
text-indent: 32px;
}
</style>
</head>
<body>
<!-- 文本縮進 -->
<p class="indPx">我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
</p>
<p class="indEm">我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
</p>
</body>運行界面：
屬性名：ling-height。用于設置文本的行高。即行與行之間的距離。
行間距=文本高度+上間距+下間距。（上間距=下間距）
行間距調整就是設置的上下間距的高
屬性值：px或em。
代碼示例：
<head>
<style>
/* 行間距 */
.lH {
line-height: 3em;
}
</style>
</head>
<body>
<!-- 行間距 -->
<p class="lH">
我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
</p>
</body>運行界面：
分為三類：行內樣式表（行內式）、內部樣式表（內嵌式）、外部樣式表（鏈接式）
位置：直接寫在元素的開始標簽中。
特點：書寫內容少，權重級別高，只能控制一個標簽，結構樣式混亂。
語法：style=”color: red;”
注意：多個屬性之間使用空格分隔。
代碼示例：
<p style="color: red;">行內樣式表：在使用屬性的元素開始標簽中直接設置屬性。如給字體設置紅色屬性。</p>
<p style="color: red; font-size:28px;">行內樣式表：在使用屬性的元素開始標簽中直接設置屬性。如給字體設置紅色屬性和字體28px。</p>位置：在head標簽下，和title標簽并列。樣式屬性均包含在style標簽中。
特點：部分結構與樣式相分離，還是在同一html文件上。
語法：
<style>
p {
color: red;
font-size: 28px;
}
</style>代碼示例：
<head>
<title></title>
<style>
.styleP {
color: red;
font-size: 32px;;
}
</style>
</head>
<body>
<!-- 內部樣式表 -->
<p class="styleP">內部樣式表：樣式屬性寫在同一個html文件中的head標簽里，和title標簽并列。</p>
</body>第一步：創建index.css文件，在文件中輸入樣式屬性，不用任何標簽。
第二步：在html文件的head標簽中，添加link標簽，引入css文件。
第三步：給html文件中需要添加屬性的元素添加選擇器名稱。
特點：結構和樣式全局分離，一個css文件可以控制多個html頁面。
注意：在css文件中只有樣式沒有標簽，即直接書寫標簽器和屬性，不要寫style標簽。
代碼示例：
第一步：新建index.css文件，設置樣式屬性。
* {
margin: 0;
padding: 0;
}
.linC {
font-size: 32px;
color: blue;
}第二步：在html文件的head標簽中添加link標簽引用css文件。
<head>
<title>CSS樣式引入方式</title>
<!-- 外部樣式表 -->
<link rel="stylesheet" href="./index.css">
</head>第三步：在標簽中調用屬性。
<body>
<!-- 外部樣式表 -->
<p class="linC">
外部樣式表：<br>
第一步：新建一個css文件，文件中直接編輯樣式屬性，不需要添加style標簽。<br>
第二步：使用css文件的html文檔，應該在其head標簽中添加link標簽選擇css文件的存儲位置,<br>
第三步：調用css文件中的樣式。
</p>
</body>運行界面：
以上就是今天學習的內容，明天繼續學習CSS的相關內容，今天就到這里了，各位晚安！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
