HTML學(xué)習(xí)心得(4)

CSS的簡單框架結(jié)構(gòu)和元素渲染

什么是CSS

? CSS，中文名：層疊樣式表。是一種用來表現(xiàn)HTML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

? CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

? 我們可以簡單的來理解它的作用，它作為一個可以設(shè)定部件風(fēng)格，色彩，樣式，以及調(diào)配各部件之間的關(guān)系等等一系列的操作，怎么說呢，它能起到的作用比我們想象的要強大。我們可以通過它實現(xiàn)一張網(wǎng)頁的大部分美化，也可以使用它使我們的網(wǎng)頁不單單局限于一個二維的平面。

?

CSS編譯環(huán)境

和HTMl類似的，CSS也可以使用記事本編寫，完成后只需要將格式改為.css文件即可。

正常的電腦

支持css的瀏覽器

記事本

也可使用Sublime text 打開編寫

?

CSS的內(nèi)鏈外鏈

內(nèi)鏈

CSS鏈接到網(wǎng)頁上的方式有兩種，現(xiàn)在我們先來說一下簡單的內(nèi)鏈方式。

標(biāo)簽內(nèi)屬性

標(biāo)簽內(nèi)部的屬性設(shè)置在我看來也是屬于CSS的范疇之內(nèi)的，所以我把這部分放在這里，做一個總結(jié)。

在每個標(biāo)簽里面，我們會發(fā)現(xiàn)存在一個style的關(guān)鍵字，通常我們是這樣使用它的：

? 即在標(biāo)簽的其實標(biāo)簽里加入style關(guān)鍵字，然后接=和“ ”，在引號中加入我們想要的屬性內(nèi)容，譬如更改顏色，更改大小，規(guī)定元素的位置，設(shè)置優(yōu)先顯示級別等等操作。

? 這樣的在標(biāo)簽內(nèi)部加入的屬性設(shè)置，我把它歸為CSS內(nèi)鏈的標(biāo)簽內(nèi)屬性這一類。但很明顯的，我們會發(fā)現(xiàn)這樣有一個問題：雖然這樣寫可以非常方便看到這個標(biāo)簽攜帶的屬性，但我們在后面使用的時候會發(fā)現(xiàn)，拋開文件的長度大大增加這一點不說，我們在后期修改或者維護的時候會變得很麻煩。大量的屬性代碼占據(jù)的大部分的代碼頁面，會使我們找到目標(biāo)標(biāo)簽變得麻煩[^18]，所以我們想要一種能將屬性設(shè)置集中的方法，來簡便我們的查找和后期調(diào)試。

? 所以，在

內(nèi)的全局屬性定義就出現(xiàn)了。

? 在這里，我們會講到

中

? 在這段截取的源碼中，我們可以看到，在

中我們定義了一個

? 因為.css文件和HTML文件在一個文件夾下，我們可以省略href要求的文件的全部路徑，只需要寫出.css文件的名字就可以了，不要忘記加文件的后綴。然后再下面使用

CSS的ID命名

? 在了解到了CSS的外鏈和

內(nèi)的全局屬性定義后，我們不免會有這樣一個問題：”怎么讓瀏覽器知道我的屬性設(shè)置是給誰都寫的呢？一張網(wǎng)頁里有這么多的標(biāo)簽。”我們在這里使用使用id和class來結(jié)局這個問題，下面我們來介紹CSS中的ID命名。

? 在基本上每個標(biāo)簽中，都有這樣一個屬性，它不包含在

? 命名的格式很簡單，在這里就不多敘述了。要注意一個標(biāo)簽只能有一個ID 。那么我們再來看看在CSS文件中是怎么規(guī)定ID的。

#div7{

position:fixed;

right:0;

z-index:1;

bottom:0;

margin-bottom:0px;

}

? 可以看到，在CSS文件中，使用一個#來標(biāo)記說明這是一個控制ID的屬性塊，#后面接ID的名字。對于該ID下的所有屬性設(shè)置，我們用一對{}將該ID下的所有屬性都包含起來。

? 特別的，對于CSS的命名，提供了二級命名，也就是我們不只可以命名到ID或者后面的class，我們可以直接命名到該ID或clss下的一類標(biāo)簽。

? 我們舉一個例子來看：

#topfor{

float:right;

width:700px;

vertical-align:middle;

position:relative;

text-align:right;

}

#topfor a{

position:relative;

color:white;

text-decoration:none;

top:20px;

}

百度一下

百度一下

? 在這個例子中，我們看到我們?yōu)橐粋€

命名屬性為topfor，但在CSS文件中卻有兩個含有#topfor的定義。這就是CSS的二級定義，在第二個定義中，其實是直接定義到了ID為topfor的標(biāo)簽下的中。也就是說第二個名稱為#topfor a的定義的對象已經(jīng)不是名稱為topfor的了，而是越過了它直接定義到了它內(nèi)涵的所有

總結(jié)

以上是生活随笔為你收集整理的现在学html4,HTML学习心得(4)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。