CSS基礎學習

2021-07-02 16:54:04 字數 1771 閱讀 3958

1. css(cascading style sheet)層疊樣式表 css是對html的補充 css實現了網頁內容和頁面效果的分離

2. 有三種方式可以將樣式表加入到html文件中

1)內聯樣式表 2)嵌入樣式表 3)外部樣式表link

3. 樣式規則選擇器(通過怎樣的途徑來獲得頁面上要設定樣式的元素)

1)html selector  2)class selector  3)id selector  4)關聯選擇器  5)組合選擇器 

6)偽元素選擇器

偽元素選擇器是指對同乙個html元素的各種狀態和其所包括的部分內容的一種定義方式

例如,對於超連結標籤的正常狀態、訪問過的狀態、選中狀態、游標移到超連結文字上的狀態

以及對於段落的首字母和首行,都可以使用偽元素選擇器來定義

目前常用的偽元素有以下幾種:

a:active  a:hover  a:link  a:visited  p:first-line  p:first-letter

4. css當中的樣式屬性

css當中的屬性非常多,大體上可分為以下幾類:字型、背景、文字、位置、布局、邊緣、列表

1)字型

字型屬性主要包括文字的字型、大小、顏色、顯示效果等基本樣式

font-family  font-size  font-style  font-decoration  font-weight    

2)背景

背景包括背景顏色、背景影象以及背景影象的控制

background-color  background-image(repeat repeat-x repeat-y)  background-attachment(fixed scroll)

background-position 

3)文字

文字的屬性包括:文字間距、對齊方式、上標、下標、排列方式、首行縮排

word-spacing  letter-spacing  text-align(left right center)  text-indent(第一行文字的縮排值)

line-height  

4)位置

文件流位置屬性就是制定元素的位置

position(absolute relative static)  left  top  width  height  z-indent

5)邊緣(盒子模型)

margin用於設定元素的邊界與其他元素的空隙大小

margin-top  margin-right  margin-bottom  margin-left  margin

padding-top  padding-right  padding-bottom  padding-left  padding

width屬性用於設定元素邊框的寬度 (thin medium thick)

border-top-width  border-right-width  border-left-width  border-bottom-width  border-width

color屬性設定元素邊框的顏色

border-top-color  border-left-color  border-bottom-color  border-right-color  border-color

style屬性用於設定元素邊框的樣式 (none dotted dashed solid double )

6)布局

display(inline block none)

7)列表

無序列表

有序列表

自定義列表

css學習 css基礎

子選擇器 parent child 子選擇器是指選擇parent的範圍內的第乙個子元素。這裡parent和child均是偽 可以是class用.classname,也可以是標籤ul li,也可以是id pid cid 後代選擇器 parent child 後代選擇器是指 選擇parent範圍內的所欲...

css基礎學習

1.class和id 1 同一id在乙個頁面內只能應用一次,而class則是 用於描述多次出現的元素。2 class的定義方法 指定標籤 類名 id的定義方法 指定標籤 id名 class的應用方法 指定標籤 class 類名 id的應用方法 指定標籤id id名 2.css的引用 1 內部樣式 段...

css基礎學習

css指層疊樣式表 為什麼用css?html描述了要呈現的內容,而css則定義了這些內容的呈現形式,比如字型,顏色等。使用css能夠將頁面內容呈現形式有效分類,有利於分工合作,也有利於快速更換不同的呈現形式。使用樣式表可以有三種方式 1 內聯樣式內部 將樣式定義在style屬性中,只有對當前標籤有效...