Web前端-CSS基礎與應用

2022-06-09 分類：網(wǎng)站建設

CSS歷史

Tim Berners-Lee和Robert Cailliau共同發(fā)明了Web。1994年，Web真正走出實驗室。

年哈坤·利提出了CSS的最初建議

年初，W3C組織負責CSS的工作組開始討論一版中沒有涉及到的問題

年5月：是一套全新的樣式表結(jié)構(gòu)，是由W3C推行的，同以往的或完全不一樣，推薦的是一套內(nèi)容和表現(xiàn)效果分離的方式HTML元素可以通過的樣式控制顯示效果，可完全不使用以往HTML中的table和td來定位表單的外觀和樣式，只需使用div和此類HTML標簽來分割元素，之后即可通過樣式來定義表單界面的外觀

年：增加了更多的CSS選擇器，可以實現(xiàn)更簡單但是更強大的功能

CSS特點簡介

豐富的樣式定義

CSS提供了豐富的文檔樣式外觀，以及設置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

易于使用和修改

CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的heade部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用?？傊?，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進行統(tǒng)一管理

多頁面應用

CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都以將其引用。這樣就可以實現(xiàn)多個頁面風格的統(tǒng)一。

層疊

簡單的說，層疊就是對一個元素多次設置同一個樣式，這將使用最后一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些后來定義的樣式將對前面的樣式設置進行重寫，在瀏覽器中看到的將是最后面設置的樣式效果。

頁面壓縮

在使用HTML定義頁面效果的網(wǎng)站中，往往需要大量或重復的表格和font元素形成各種規(guī)格的文字樣式，這樣做的后果就是會產(chǎn)生大量的HTML標簽，從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的復用更大程序的縮減了頁面的體積，減少下載的時間。

CSS工作原理

工作原理：CSS全稱層疊樣式表,它是一種用來表現(xiàn)HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設計語言,能夠?qū)W(wǎng)頁中的對象的位置排版進行像素級的精確控制,支持幾乎所有的字體字號樣式,擁有對網(wǎng)頁對象和模型樣式編輯的能力,并能夠進行初步交互設計,是目前基于文本展示最優(yōu)秀的表現(xiàn)設計語言簡而言之：css就是一種先選擇html元素，然后設定選中元素css屬性的機制實質(zhì)：包含css的網(wǎng)頁—>瀏覽器解析執(zhí)行（Webkit CSS parser CSS解析器）---->解析后的效果呈現(xiàn)在頁面上

CSS版本區(qū)別

1.區(qū)別：在CSS2基礎上新增屬性，比如圓角、陰影、:last-child與:nth-last-child()偽類選擇器等以前CSS2也有的樣式，因為瀏覽器版本不支持原因，現(xiàn)在CSS3中重新提出并使用，因為現(xiàn)在瀏覽器越來越高級智能，當然也就兼容HTML5 CSS3了

2.相同點：語法相同，目的相同

3.如何選擇css2和css3：普通布局CSS2足夠了，需要圓角、陰影、偽類等再使用CSS3，其實CSS3中90%以上css樣式是css2的，只是在css2上新增和重用小部分CSS2的樣式。

友情提示：要學習CSS3必須的掌握CSS2常用樣式和語法、靈活應用

布局技巧，才能靈活使用CSS3樣式

CSS的基本語法

選擇器(即修飾對象){

對象的屬性1：屬性值

對象的屬性2：屬性值

}

</style>

CSS為HTML網(wǎng)頁添加樣式的三種方法

1.行內(nèi)樣式，直接寫在特定標簽的style屬性中；

2.嵌入樣式，在head元素中嵌入 <style type="text/css"></style>，將css規(guī)則放入<style>和</style>中；

3.鏈接樣式，在<head>元素中使用外部的樣式表，如：

友情提示：3種css樣式的優(yōu)先級：行內(nèi)樣式 > 嵌入樣式 > 鏈接樣式

CSS選擇器

元素/標簽選擇器

通過元素進行選擇，進行添加樣式

分享題目：Web前端-CSS基礎與應用
文章網(wǎng)址：http://www.bm7419.com/news30/165280.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站建設等

聲明：本網(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)

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