在HTML文件中設(shè)置樣式表

  • 級聯(lián)樣式表(Cascading Style Sheet,CSS)旨在將web頁面的樣式與內(nèi)容進(jìn)行分離。

  • 選擇器就是不帶尖括號的HTML標(biāo)記。CSS屬性用來定義選擇器的特定特性。

  • 當(dāng)為屬性指定屬性值時,就是為選擇器創(chuàng)建一個聲明。(在一個CSS屬性名之后使用一個冒號,后跟該屬性的值,屬性值無須使用引號括起【對于用長度或百分比作為單位的值,通過在值之前添加一個正號或負(fù)號,可以使之取值為正或負(fù)】,屬性值之后是一個分號)可將聲明和選擇器合稱為一個規(guī)則集合,在典型規(guī)則集中,將聲明放在一對花括號中,位于選擇器之后。

(百分比允許元素根據(jù)屏幕的大小和窗口的尺寸進(jìn)行調(diào)整和移動,用于指出它與包含它的父元素之間的關(guān)系)

**
**

創(chuàng)建樣式的優(yōu)先級:內(nèi)聯(lián)(直接嵌入到它所影響的HTML代碼中)>內(nèi)部(放在web頁面的<head>信息中)>外部(外部樣式的代碼放在一個獨立的文檔中,從實際使用該樣式表的web頁面的<head>標(biāo)記中引用該樣式,使用單個外部樣式表可定義多個web頁面的呈現(xiàn)效果)

【當(dāng)在一個標(biāo)記中添加內(nèi)聯(lián)樣式表時,它僅影響單個標(biāo)記,不影響到頁面中所有類似的元素,若想改變一個頁面中所有類似元素的樣式,用<style>元素自身來包含該頁面所有的樣式指令。在外部樣式表中無須使用<style>元素或style特性,在創(chuàng)建外部樣式表后,使用.css作為文件擴(kuò)展名,將其另存為一個文本文件?!?/p>

  • 【為了聲明一個樣式更加重要,只需在樣式聲明之后添加important關(guān)鍵字,為了讓瀏覽器能正確的分析,必須將important關(guān)鍵字放在一個嘆號之后?!?/li>

**
**

Web開發(fā)中引用顏色的方法:

  • 計算機(jī)的顯示器以RGB模式來顯示顏色**,R代表紅色,G代表綠色,B代表藍(lán)色。R,G,B用一個介于0~255之間的值來表示,在色譜中,0代表最暗,255代表最亮。
  • 在HTML頁面中使用十六進(jìn)制顏色值時,需要將顏色值從十進(jìn)制(RGB)轉(zhuǎn)化為十六進(jìn)制。將紅,綠,藍(lán)色值分別轉(zhuǎn)化為一個兩位的十六進(jìn)制值。然后將這三個十六進(jìn)制值合并在一起作為單個字符串,并在開頭加上一個井號(#)。當(dāng)引用的顏色具有成對的值時,可以使用簡寫方式以減少所需輸入字符的數(shù)量。/Eg:十六進(jìn)制值003366的一個顏色值簡寫為036./
  • RGB值和百分比:顏色值容易得到用RGB值,eg:<p style=”color:
    rgb(0,0,,255);”>

沒有方便的RGB值,可使用RGB值的百分比。<p style=”color: rgb(0%,0%,100%);”>

在每一個R,G,B值之間請使用一個逗號進(jìn)行分隔,將整組值放在一對圓括號之中。在圓括號之前是小寫的rgb三個字符,RGB值和百分比只能在樣式表中描述顏色。

  • HTML5/CSS3中更新,對顏色透明度的支持。采用RGBA方法可以指定顏色的alpha值。Eg:
    h1 {color: rgba(255,68,253,0.5);}
  • opacity的取值范圍為0.0(完全透明)~1.0(完全不透明)
    eg:div.transparentbox
    {background-color:#036; opacity:0.7;}

[color屬性用于指定文本的前景色,background-color屬性用于確定背景色]

body {background-image: url(images/background.jpg);}//是通過URL引用背景圖片images/background.jpg

當(dāng)想改變頁面鏈接的顏色時,應(yīng)該使用a元素作為CSS選擇器。(a標(biāo)記和href特性用于鏈接到其他網(wǎng)址。)

當(dāng)想改變頁面背景顏色時,應(yīng)該使用body元素作為CSS選擇器。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,139評論 1 92
  • FreeCodeCamp - HTML5 and CSS 發(fā)現(xiàn)原來在另外一臺電腦學(xué) FreeCodeCamp 的時...
    付林恒閱讀 9,647評論 2 17
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,875評論 32 459
  • ?蓬萊? 海風(fēng)吹拂山外天,碧浪散雪岸邊現(xiàn)。 身臨蓬萊知仙境,才信此處住神仙。
    金紫緣閱讀 279評論 0 6
  • 艾斯在白船地位大約相當(dāng)于三災(zāi)和三將星,在杰克和餅干登場前,艾斯5.5E是已知最高賞金,但杰克10E和餅干8.6E賞...
    小李talk閱讀 1,019評論 0 1

友情鏈接更多精彩內(nèi)容