2022-06-09 分類: 網(wǎng)站建設(shè)
CSS歷史
Tim Berners-Lee和Robert Cailliau共同發(fā)明了Web。1994年,Web真正走出實(shí)驗(yàn)室。
年哈坤·利提出了CSS的最初建議
年初,W3C組織負(fù)責(zé)CSS的工作組開始討論一版中沒有涉及到的問題
年5月:是一套全新的樣式表結(jié)構(gòu),是由W3C推行的,同以往的或完全不一樣,推薦的是一套內(nèi)容和表現(xiàn)效果分離的方式HTML元素可以通過的樣式控制顯示效果,可完全不使用以往HTML中的table和td來定位表單的外觀和樣式,只需使用div和此類HTML標(biāo)簽來分割元素,之后即可通過樣式來定義表單界面的外觀
年:增加了更多的CSS選擇器,可以實(shí)現(xiàn)更簡單但是更強(qiáng)大的功能
CSS特點(diǎn)簡介
豐富的樣式定義
CSS提供了豐富的文檔樣式外觀,以及設(shè)置文本和背景屬性的能力;允許為任何元素創(chuàng)建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內(nèi)容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
易于使用和修改
CSS可以將樣式定義在HTML元素的style屬性中,也可以將其定義在HTML文檔的heade部分,也可以將樣式聲明在一個(gè)專門的CSS文件中,以供HTML頁面引用??傊?,CSS樣式表可以將所有的樣式聲明統(tǒng)一存放,進(jìn)行統(tǒng)一管理
多頁面應(yīng)用
CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中,這樣我們就可以在多個(gè)頁面中使用同一個(gè)CSS樣式表。CSS樣式表理論上不屬于任何頁面文件,在任何頁面文件中都以將其引用。這樣就可以實(shí)現(xiàn)多個(gè)頁面風(fēng)格的統(tǒng)一。
層疊
簡單的說,層疊就是對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式,這將使用最后一次設(shè)置的屬性值。例如對(duì)一個(gè)站點(diǎn)中的多個(gè)頁面使用了同一套CSS樣式表,而某些頁面中某些元素想使用其他樣式,就可以針對(duì)這些樣式單獨(dú)定義一個(gè)樣式表應(yīng)用到頁面中。這些后來定義的樣式將對(duì)前面的樣式設(shè)置進(jìn)行重寫,在瀏覽器中看到的將是最后面設(shè)置的樣式效果。
頁面壓縮
在使用HTML定義頁面效果的網(wǎng)站中,往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式,這樣做的后果就是會(huì)產(chǎn)生大量的HTML標(biāo)簽,從而使頁面文件的大小增加。而將樣式的聲明單獨(dú)放到CSS樣式表中,可以大大的減小頁面的體積,這樣在加載頁面時(shí)使用的時(shí)間也會(huì)大大的減少。另外,CSS樣式表的復(fù)用更大程序的縮減了頁面的體積,減少下載的時(shí)間。
CSS工作原理
工作原理:CSS全稱層疊樣式表,它是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語言。是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言,能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制,支持幾乎所有的字體字號(hào)樣式,擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力,并能夠進(jìn)行初步交互設(shè)計(jì),是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言簡而言之:css就是一種先選擇html元素,然后設(shè)定選中元素css屬性的機(jī)制實(shí)質(zhì):包含css的網(wǎng)頁—>瀏覽器解析執(zhí)行(Webkit CSS parser CSS解析器)---->解析后的效果呈現(xiàn)在頁面上
CSS版本區(qū)別
1.區(qū)別:在CSS2基礎(chǔ)上新增屬性,比如圓角、陰影、:last-child與:nth-last-child()偽類選擇器等以前CSS2也有的樣式,因?yàn)闉g覽器版本不支持原因,現(xiàn)在CSS3中重新提出并使用,因?yàn)楝F(xiàn)在瀏覽器越來越高級(jí)智能,當(dāng)然也就兼容HTML5 CSS3了
2.相同點(diǎn):語法相同,目的相同
3.如何選擇css2和css3:普通布局CSS2足夠了,需要圓角、陰影、偽類等再使用CSS3,其實(shí)CSS3中90%以上css樣式是css2的,只是在css2上新增和重用小部分CSS2的樣式。
友情提示:要學(xué)習(xí)CSS3必須的掌握CSS2常用樣式和語法、靈活應(yīng)用
布局技巧,才能靈活使用CSS3樣式
CSS的基本語法
<style type="text/css">
選擇器(即修飾對(duì)象){
對(duì)象的屬性1:屬性值
對(duì)象的屬性2:屬性值
}
</style>
CSS為HTML網(wǎng)頁添加樣式的三種方法
1.行內(nèi)樣式,直接寫在特定標(biāo)簽的style屬性中;
2.嵌入樣式,在head元素中嵌入 <style type="text/css"></style>,將css規(guī)則放入<style>和</style>中;
3.鏈接樣式,在<head>元素中使用外部的樣式表,如:
<link href="" rel="stylesheet" type="text/css" />
友情提示:3種css樣式的優(yōu)先級(jí): 行內(nèi)樣式 > 嵌入樣式 > 鏈接樣式
CSS選擇器
元素/標(biāo)簽選擇器
通過元素進(jìn)行選擇,進(jìn)行添加樣式
分享題目:Web前端-CSS基礎(chǔ)與應(yīng)用
文章網(wǎng)址:http://m.rwnh.cn/news30/165280.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容