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

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

什么是CSS

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

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

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

?

CSS編譯環(huán)境

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

正常的電腦

支持css的瀏覽器

記事本

也可使用Sublime text 打開編寫

?

CSS的內(nèi)鏈外鏈

內(nèi)鏈

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

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

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

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

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

? 這樣的在標(biāo)簽內(nèi)部加入的屬性設(shè)置，我把它歸為CSS內(nèi)鏈的標(biāo)簽內(nèi)屬性這一類。但很明顯的，我們會(huì)發(fā)現(xiàn)這樣有一個(gè)問題：雖然這樣寫可以非常方便看到這個(gè)標(biāo)簽攜帶的屬性，但我們?cè)诤竺媸褂玫臅r(shí)候會(huì)發(fā)現(xiàn)，拋開文件的長(zhǎng)度大大增加這一點(diǎn)不說，我們?cè)诤笃谛薷幕蛘呔S護(hù)的時(shí)候會(huì)變得很麻煩。大量的屬性代碼占據(jù)的大部分的代碼頁(yè)面，會(huì)使我們找到目標(biāo)標(biāo)簽變得麻煩[^18]，所以我們想要一種能將屬性設(shè)置集中的方法，來簡(jiǎn)便我們的查找和后期調(diào)試。

? 所以，在

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

? 在這里，我們會(huì)講到

中

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

中我們定義了一個(gè)

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

CSS的ID命名

? 在了解到了CSS的外鏈和

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

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

? 命名的格式很簡(jiǎn)單，在這里就不多敘述了。要注意一個(gè)標(biāo)簽只能有一個(gè)ID 。那么我們?cè)賮砜纯丛贑SS文件中是怎么規(guī)定ID的。

#div7{

position:fixed;

right:0;

z-index:1;

bottom:0;

margin-bottom:0px;

}

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

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

? 我們舉一個(gè)例子來看：

#topfor{

float:right;

width:700px;

vertical-align:middle;

position:relative;

text-align:right;

}

#topfor a{

position:relative;

color:white;

text-decoration:none;

top:20px;

}

百度一下

百度一下

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

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

總結(jié)

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

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