Web應用開發技術

HTML元素屬性分類：

• 特有屬性

• 全局屬性(所有HTML都可以使用的屬性，如id等)

• 事件屬性

?

CSS

Cascading Style Sheet，層疊樣式表，一種樣式表語言，其作用是控制頁面內容的顯示外觀效果

?

CSS樣式設置：

1.瀏覽器默認樣式

2.外部樣式表(在文檔頭通過link元素鏈接CSS文件)

3.內部樣式表(直接在文檔頭通過style元素指定)

4.內聯樣式(直接在某個元素的style屬性中指定)

樣式設置的優先級從上往下依次遞增，即內聯樣式的優先級最高，對于重復設置的某個樣式規則，優先級高的將會覆蓋優先級低的

?

除了內聯樣式，樣式表是由若干個CSS規則集構成，每個規則集由選擇器(Selector，選擇要設置樣式的元素)和一對花括號構成，花括號中包含若干條聲明(Declaration即若干條具體樣式規則)，每個聲明都要以分號結尾，一個聲明內部是由屬性名和屬性值構成，它們以冒號分隔，如果屬性值含有空格，還需要用引號括起來

?

CSS中使用/* */括起來的為注釋內容

?

盒子模型(Box Model)

在CSS眼中，一個占據頁面空間的HTML元素就是一個盒子，每個盒子都具有外邊距(Margin)，邊框(border)，內邊距(Padding)，內容(Content)這些屬性

?

CSS學習方法：熟練掌握常用樣式規則的意義和寫法

?

文本相關樣式

color：設置文本顏色

font-size：字號，常用單位有px，em，rem

font-family：字體設置，通常使用字體列表，瀏覽器會從左向右一次匹配，直到找到系統中可用的字體，如果沒有找到就使用瀏覽器默認字體

font-size：字體樣式，常用就是italic，即斜體

font-weight：字體粗細，常用就是bold，即粗體

text-decoration：文本裝飾，常用就是underline，overline，line-through

text-align：文本排列方式，常用就是left，center，right

letter-spacing：字符間距

line-height：行高

text-indent：文本縮進

?

index 索引之頁， apache，nginx如果不指定訪問的網頁，默認情況下會訪問index，所以才會把主頁命名為index

?

margin的使用：

? margin-top: -20px;

? margin-left: 200px;

/*margin: 50px 上下左右都為50*/

/*margin: 50px -100px 上下為50 左右為100*/

/*margin: 50px 100px 200px 上為50 左右為100 下為200px */

/*margin: 50px 100px -500px 100px 上為50 右為100 下為500px 左為100px*/

?

絕對單位：

px：像素，是多少像素就是多少像素

相對單位：

em：倍數，這個倍數是相對于父元素來計算的，其父元素是20px，那么它就是40px

rem：相對根元素(即html元素)來參考，不論其父元素的大小怎么變都不會變

?

font-*

font-size：設置字體大小，也可理解為字體的高度

font-family 設置字體，后面可以直接跟楷體，黑體等字樣，當然需要瀏覽器安裝這種字樣。一般建議使用所有瀏覽器都安裝過的字體，因為就算你的瀏覽器裝過這種字體，別人的瀏覽器沒裝過，就會顯示默認字體，達不到你的預期期望。font-family后面可以跟多種字體，你可以把你最期望的字體寫在最前面，其次期望的寫在后面，別人的瀏覽器就會一次判斷有無此字體，如果有就用，都沒有就使用默認字體

font-style：italic： 斜體

font-weight：字體的重量，例如后面跟bold即為加粗

?

text-*

text-decoration：underline 下劃線 (但一般前端工程師不會這樣做，因為一些字母如 g等會穿過下劃線，看起來不美觀)

text-decoration：line-through 刪除線

text-align：設置文本的排列方式，后面可跟center(居中)，right(右對齊)等

letter-spacing： 設置字符間距 如 3rem 等

line-height：行高

text-indent：首行縮進

?

設置背景

background

background: url("圖片路徑"); 設置背景圖片

后面可以跟no-repeat top 表示只要一張圖并且居中

?

link

用來連接外部CSS樣式表文件

<link rel="stylesheet" href="樣式文件(以.css結尾)" type="text/css"

?

CSS

CSS當前最新版本為3.0，注意CSS3新增的特性并不是所有瀏覽器都支持的

?

選擇器(Selector)

• 元素選擇器：選擇指定的元素

• ID選擇器：選擇指定ID屬性的元素

• 類(Class)選擇器：選擇指定class屬性的元素

• 偽類(Pseudo-class)選擇器：選擇特定狀態下的特定元素

• 偽元素選擇器(Pseudo-element)選擇器：選擇某個元素內部的特定內容

• 屬性選擇器：選擇含有特定屬性的元素，使用中括號將屬性名括起來

• 分組選擇器：同時對多個元素設置相同的樣式，用逗號分隔

• 后代選擇器：選擇某個元素的后代元素

• 子元素選擇器：選擇某個元素的直接子元素，使用大于號(>)分隔

• 相鄰兄弟選擇器：選擇緊鄰某個元素的下一個元素，并且它們具有相同父元素，使用加好(+)分隔

• 普通兄弟選擇器：選擇某個元素的所有兄弟元素，使用波浪線(~)分隔

擁有相同父元素的元素之間互稱兄弟

?

優先級：ID選擇器 > 類選擇器 > 元素選擇器

?

顯示樣式(display Style)

通過display樣式可以控制元素的顯示方式

display：block 稱為塊級元素

display：inline 在一行顯示

display：none 隱藏，元素所占的空間也不存在

visibility：hidden 隱藏，但元素所占的空間依舊存在

display：inline-block

?

定位(Position)

• static：固定定位，靜態定位

• fixed：基于瀏覽器窗口定位，不論瀏覽器怎么劃，它始終在那個位置

• relative：相對定位，基于元素的正常位置定位

• absolute：絕對定位，基于父元素定位

?

z-index：設置z軸的順序

當兩個元素顯示位置存在交叉時，可以通過設置z順序(z-index)控制他們的呈現方式

?

浮動(Float)

使用float屬性，常用屬性值為left和right

float：right 飄到最右邊

clear：both 清楚浮動

飄起來后塊級元素會壓縮，會呈現在一行

?

擴展

style屬性 全局屬性，針對body里的內容

在發生重復時，body里的style的優先級更高

在head中設置的style 會對body里指定的內容都生效

一般瀏覽器的默認字號為16px

通常情況下子元素會繼承父元素的大多數樣式，若font-size等

多個元素可以使用相同的Class，但ID必須唯一

5.假如有多個相同元素需要設置不同的CSS樣式，那么就可以用class，示例如下：<p id="tip">azhe</p>

<p class="text">nihao!</p>

<p class="text">中國</p>

6.在CSS樣式中id的CSS名稱用#加上id，即#tip，class的CSS名稱為 .text

7.http默認端口是80，https默認端口號是443

8.樣式資源網weui框架網， bootstrap

9.一般CSS樣式中帶有 - 橫桿的都是為了一些瀏覽器專門準備的

10.min-width：50px 最小的寬度

11.CSS樣式 *[id] 表示只要有id就執行以下屬性

*[id*=stu]表示只要id屬性中含有stu就執行其下面的屬性

12.列表樣式

list-style-type：默認為圓形 可以跟none讓前面沒有形狀

表格

border-collapse：collapse; 合并邊框

13.對內聯元素來說上下內外邊距高度寬度都無效，對塊級元素都是有效的

14.hover選擇鼠標指針浮動在其上的元素，并設置其樣式

15.selected 使被選中的文本成為固定的顏色

?

?

轉載于:https://www.cnblogs.com/yanruizhe/p/11462423.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Web应用开发技术-CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。