什么是CSS樣式,以及CSS樣式包含那幾種類型?

CSS即層疊樣式表（Cascading Style Sheets），是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。

白山網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),白山網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為白山1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的白山做網(wǎng)站的公司定做！

CSS樣式主要包含以下三種類型：

1、行內(nèi)樣式（內(nèi)嵌樣式）：結(jié)構(gòu)的內(nèi)部，即寫在標簽內(nèi)的樣式；寫在標簽的開始部分內(nèi)部，style屬性當中。

例：標記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"/標記

2、內(nèi)部樣式（內(nèi)聯(lián)樣式）：寫在HTML頁面內(nèi)部，存放于head標記當中，樣式寫在style標記內(nèi)。

例：style選擇器 {屬性名：屬性值；屬性名：屬性值；......}/style

3、外部樣式（外聯(lián)樣式）：寫在css文件內(nèi)。

例：link type="text/css" rel="stylesheet" href="css/main.css" /

擴展資料：

使用CSS樣式的優(yōu)點：

CSS有助于實現(xiàn)負責任的Web設(shè)計。CSS對開發(fā)者構(gòu)建Web站點的影響很大，并且這種影響可能是無止境的。將網(wǎng)頁的大部分甚至是全部的表示信息從HTML或XML文件中移出，并將它們保留在一個樣式表中有諸多優(yōu)點，如降低文件大小、節(jié)省網(wǎng)絡(luò)帶寬以及易于維護等。

此外，站點的表現(xiàn)信息和核心內(nèi)容相分離，使得站點的設(shè)計人員能夠在短暫的時間內(nèi)對整個網(wǎng)站進行各種各樣的修改。

CSS簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因為重復(fù)設(shè)置的格式將被只保存一次）。

只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個站點的風(fēng)格特色，在修改頁面數(shù)量龐大的站點時，顯得格外有用。這就避免了一個個網(wǎng)頁的修改，大大減少了工作量。

參考資料來源：百度百科-CSS

三種不同類型的CSS樣式

1、首先，在電腦中打開編輯器，創(chuàng)建html文檔。

2、然后，創(chuàng)建h1標簽，用行內(nèi)樣式控制字體顏色為紅色。

3、接下來，用內(nèi)部樣式選擇器選擇h1標簽，控制它的樣式。

4、外部樣式需要，創(chuàng)建外部樣式.css文件。

5、然后，在html文件里面引入css文件。

6、最后，在瀏覽器看是否生效，就可以了。

CSS樣式的主要特點及其類型

CSS(Cascading Stylesheets，層疊樣式表)是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁設(shè)計必不可少的工具之一。

層疊樣式表的特點

且不說過去的網(wǎng)頁缺少動感，就是在網(wǎng)頁內(nèi)容的排版布局上也有很多困難，如果不是專業(yè)人員或特別有耐心的人，很難讓網(wǎng)頁按自己的構(gòu)思和創(chuàng)意來顯示信息。即便是掌握了HTML語言精髓的人也要通過多次地測試，才能駕馭好這些信息的排版，過程十分漫長和痛苦。為了Internet的發(fā)展，讓更多人早日踏足這個多姿多彩的世界，新的HTML輔助工具呼之欲出。

樣式表就是在這種需求下誕生的，它首先要做的是為網(wǎng)頁上的元素精確地定位，可以讓網(wǎng)頁設(shè)計者象導(dǎo)演一樣，輕易地控制由文字、圖片組成的演員們，在網(wǎng)頁這個舞臺上按劇本要求好好地表演。

其次，它把網(wǎng)頁上的內(nèi)容結(jié)構(gòu)和格式控制相分離。瀏覽者想要看的是網(wǎng)頁上的內(nèi)容結(jié)構(gòu)，而為了讓瀏覽者更好地看到這些信息，就要通過格式控制來幫忙了。以前兩者在網(wǎng)頁上的分布是交錯結(jié)合的，查看修改很不方便，而現(xiàn)在把兩者分開就會大大方便網(wǎng)頁的設(shè)計者。內(nèi)容結(jié)構(gòu)和格式控制相分離，使得網(wǎng)頁可以光由內(nèi)容構(gòu)成，而將所有網(wǎng)頁的格式控制指向某個CSS樣式表文件。這樣一來的好出表現(xiàn)在兩個方面:

第一，簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量(因為重復(fù)設(shè)置的格式將被只保存一次)。

第二，只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個站點的風(fēng)格特色，在修改頁面數(shù)量龐大的站點時，顯得格外有用。避免了一個一個網(wǎng)頁的修改，大大減少了重復(fù)勞動的工作量，當你面對的是有數(shù)百個網(wǎng)頁的站點時，CSS簡直象是神對我們的恩賜!^_^

添加層疊樣式表的方法

我們?yōu)榫W(wǎng)頁添加樣式表的方法有四種。

1.最簡單的方法是直接添加在HTML的標識符(tag)里:

Tag style=”properties”網(wǎng)頁內(nèi)容 /tag

舉個例子:

p style=”color: blue; font-size: 10pt”CSS實例 /p

代碼說明:

用藍色顯示字體大小為10pt的“CSS實例”。盡管使用簡單、顯示直觀，但是這種方法不怎么常用，因為這樣添加無法完全發(fā)揮樣式表的優(yōu)勢“內(nèi)容結(jié)構(gòu)和格式控制分別保存”。

2.添加在HTML的頭信息標識符 head里:

head

style type=”text/css”

!-- 樣式表的具體內(nèi)容 --

/style

/head

type=”text/css”表示樣式表采用MIME類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以源代碼的方式顯示我們設(shè)置的樣式表。但為了保證上述情況一定不要發(fā)生，還是有必要在樣式表里加上注釋標識符“ !--注釋內(nèi)容--”。

3、鏈接樣式表

同樣是添加在HTML的頭信息標識符 head里:

head

link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”

/head

*.css是單獨保存的樣式表文件，其中不能包含 style標識符，并且只能以css為后綴。

Media是可選的屬性，表示使用樣式表的網(wǎng)頁將用什么媒體輸出。取值范圍:

·Screen(默認):輸出到電腦屏幕

·Print:輸出到打印機

·TV:輸出到電視機

·Projection:輸出到投影儀

·Aural:輸出到揚聲器

·Braille:輸出到凸字觸覺感知設(shè)備

·Tty:輸出到電傳打字機

·All:輸出到以上所有設(shè)備

如果要輸出到多種媒體，可以用逗號分隔取值表。

Rel屬性表示樣式表將以何種方式與HTML文檔結(jié)合。取值范圍:

·Stylesheet:指定一個外部的樣式表

·Alternate stylesheet:指定使用一個交互樣式表

4、聯(lián)合使用樣式表

同樣是添加在HTML的頭信息標識符 head里:

head

style type=”text/css”

!--

@import “*.css”

其他樣式表的聲明

--

/style

/head

以@import開頭的聯(lián)合樣式表輸入方法和鏈接樣式表的方法很相似，但聯(lián)合樣式表輸入方式更有優(yōu)勢。因為聯(lián)合法可以在鏈接外部樣式表的同時，針對該網(wǎng)頁的具體情況，做出別的網(wǎng)頁不需要的樣式規(guī)則。

需要注意的是:

·聯(lián)合法輸入樣式表必須以@import開頭。

·如果同時輸入多個樣式表有沖突的時候，將按照第一個輸入的樣式表對網(wǎng)頁排版。

·如果輸入的樣式表和網(wǎng)頁里的樣式規(guī)則沖突時，使用外部的樣式表。

使用DIV+CSS如何實現(xiàn)幻燈片的效果？

CSS＋DIV是網(wǎng)站標準（或稱“WEB標準”）中常用的術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式的區(qū)別，因為XHTML網(wǎng)站設(shè)計標準中，不再使用表格定位技術(shù)，而是采用css+div的方式實現(xiàn)各種定位。

CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn) HTML 或 XML 等文件式樣的計算機語言。

DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標簽和結(jié)束標簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

div id="mContainer"/div

input class="btn" id="pauseBtn" onclick="doPause();" type="button" value="pause" /

建立一個層，設(shè)置id為mContainer，作為圖片的容器層。

設(shè)置一個按鈕來控制圖片切換的暫停與繼續(xù)。

我們看下面的CSS代碼：

#mContainer {

width:225px;

position:relative;

height:168px;;

}

.mPhoto {

filter:Alpha(opacity=0);

left:0px;

position:absolute;

top:0px;

moz-opacity:0.0;

}

.btn {

border-right:#000 1px solid;

border-top:#000 1px solid;

margin-top:5px;

font-size:9px;

border-left:#000 1px solid;

width:40px;

border-bottom:#000 1px solid;

font-family:verdana;

}

這些代碼我們都能看明白，需要指出的是類mPhoto的樣式定義。

主要是應(yīng)用了濾鏡將圖片的透明度設(shè)置為零，完全透明。

我們看下面的javascript腳本：

var currentPhoto = 0;

var secondPhoto = 1;

var currentOpacity = new Array();

var imageArray = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg");

var FADE_STEP = 2;

var FADE_INTERVAL = 10;

var pause = false;

function init() {

currentOpacity[0]=99;

for(i=1;iimageArray.length;i++)currentOpacity[i]=0;

mHTML="";

for(i=0;iimageArray.length;i++)mHTML+="div id=\"photo\" name=\"photo\" class=\"mPhoto\"img src=\"" + imageArray[i] +"\"/div";

document.getElementById("mContainer").innerHTML = mHTML;

if(document.all) {

document.getElementsByName("photo")[currentPhoto].style.filter="alpha(opacity=100)";

} else {

document.getElementsByName("photo")[currentPhoto].style.MozOpacity = .99;

}

mInterval = setInterval("crossFade()",FADE_INTERVAL);

}

function crossFade() {

if(pause)return;

currentOpacity[currentPhoto]-=FADE_STEP;

currentOpacity[secondPhoto] += FADE_STEP;

if(document.all) {

document.getElementsByName("photo")[currentPhoto].style.filter = "alpha(opacity=" + currentOpacity[currentPhoto] + ")";

document.getElementsByName("photo")[secondPhoto].style.filter = "alpha(opacity=" + currentOpacity[secondPhoto] + ")";

} else {

document.getElementsByName("photo")[currentPhoto].style.MozOpacity = currentOpacity[currentPhoto]/100;

document.getElementsByName("photo")[secondPhoto].style.MozOpacity =currentOpacity[secondPhoto]/100;

}

if(currentOpacity[secondPhoto]/100=.98) {

currentPhoto = secondPhoto;

secondPhoto++;

if(secondPhoto == imageArray.length)secondPhoto=0;

pause = true;

xInterval = setTimeout("pause=false",2000);

}

}

function doPause() {

if(pause) {

pause = false;

document.getElementById("pauseBtn").value = "pause";

分享題目：css樣式表講座ppt的簡單介紹
本文鏈接：http://aaarwkj.com/article48/dssjshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站制作、云服務(wù)器、網(wǎng)站設(shè)計、外貿(mào)建站、網(wǎng)站設(shè)計公司

廣告

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