CSS基礎(文字,選擇器,背景,三大特性)

2021-10-02 01:18:58 字數 3521 閱讀 4020

css規則由兩部分組成:選擇器、樣式宣告

//其中 h1 為選擇器,屬性和屬性值以「鍵值對」的形式出現color 和 font-size為屬性, red 和16px為相應的屬性值,多個鍵值對用;分割
選擇器即選出需要設定樣式的標籤

基礎選擇器:

標籤選擇器、類選擇器、id選擇器、萬用字元選擇器

類選擇器和id選擇器的區別:

可以有多個標籤用相同類名且乙個標籤可以有多個類名,類名和類名中間用空格分割,而id整篇html中只能有乙個標籤可以使用(可以模擬為 類為姓名,id為身份證號碼)

//標籤選擇器

h1 //類選擇器

.title

//id選擇器

#id

//萬用字元選擇器

*

復合選擇器:

後代選擇器、子選擇器、並集選擇器、偽類選擇器

//後代選擇器  選擇的是第乙個元素下所有的第二個元素,包括子,孫

ul li

//子選擇器 只選擇第乙個元素下第一級的第二個元素

ul>li

//並集選擇器 用,分割,給第乙個元素和第二個元素設定相同的樣式

ul li,

ol li

//偽類選擇器 有:hover :first-child等等 ,下面**為當滑鼠放在a標籤上的樣式(偽類只有乙個:,為元素有兩個:)

a:hover

//focus偽類選擇器 獲取獲得焦點的表單元素

input:hover

繼承

text- line- font- color

font-size:14px;

//line-height:150% 會先計算當前行高再繼承給後代元素

會先繼承給後代元素再根據後代元素的font-size計算行高

使用選擇器的權重

!import > 行內 > id > 類 > 標籤 > 萬用字元 > 瀏覽器預設 > 繼承

繼承和權重問題會在文末單獨再提出

css字型屬性:

字型大小:

font-size,常見單位為px

字型粗細:

font-weight,normal(400)不加粗,bold(700)加粗,細體用 200,開發中數字更常用。

字型樣式:

font-style,normal為正常,italic為傾斜

字型綜合寫法

//必須按照此順序,不能更換順序

body

文字顏色
body
顏色有三種表示方式

預定義顏色值:red、green

十六進製制表示:#ccccccc(可簡寫為#ccc)

rgb**:三原色,rgb(255,0,0);

文字對齊方式

text-align屬性

center:居中

left:左對齊(預設值)

right:右對齊

修飾文字

text-decoration屬性

none:預設

underline:下劃線

overline:上劃線

line-through:刪除線

文字縮排

text-indent屬性

可以用px

首行縮排兩個字通常用 2em,em是乙個單位,1em為當前元素的font-size,如果當前元素沒有設定,則按照父元素的乙個文字大小

行間距line-height屬性

控制文字行與行之間的距離。

行間距 = 上間距 + 文字高度 + 下間距

css樣式表可分為三大類

1.行內樣式表

行內樣式表(內聯樣式表)是在元素標籤內部的 style 屬性中設定 css 樣式。適合於修改簡單樣式.

語法:

青春不常在,抓緊談戀愛

1.style 其實就是標籤的屬性

在雙引號中間,寫法要符合 css 規範

2.可以控制當前的標籤設定樣式

3.由於書寫繁瑣,並且沒有體現出結構與樣式相分離的思想,所以不推薦大量使用,只有對當前元素新增簡單樣式的時候,可以考慮使用

4.使用行內樣式表設定 css,通常也被稱為行內式引入

2.內部樣式表

內部樣式表(內嵌樣式表)是寫到html頁面內部. 是將所有的 css **抽取出來,單獨放到乙個

1.........

1111

如果行高小於盒子高度,文字會偏上,

如果行高大於盒子高度,則文字偏下。

css背景

背景顏色

background-color,預設為transparent(透明)

背景background-image,預設為none,url()中不需要使用""

背景平鋪

background-repeat,

repeat:平鋪,如果很小會將複製多份將背景鋪滿

no-repeat:不平鋪

repeat-x:在x軸上平鋪

repeat-y:在y軸上平鋪

背景位置

background-position

可以使用方位名詞和精確單位

背景固定

background-attachment

scroll(預設),fixed(固定)

背景樣式合寫

background: 背景顏色 背景位址 背景平鋪 背景影象滾動 背景位置

注意:如果不設定背景顏色,背景顏色為透明,如果權重一樣甚至比之前設定的背景顏色權重高,則會層疊掉之前設定的背景顏色

背景色半透明用 rgba(0,0,0,.5);

背景色半透明是盒子的背景半透明,盒子的內容不受影響,如果想使整個盒子透明,則需要給盒子設定opacity屬性,0為透明,1為不透明

1.層疊性

當權重一樣時,哪個樣式離結構近就執行哪個樣式(後宣告的執行)

2.繼承性

子元素會繼承父元素的一些樣式

(text-,font-,line-這些元素開頭的可以繼承,以及color屬性)

行高的繼承性

3.優先順序

選擇器相同,則執行層疊性

選擇器不同,則根據權重選擇執行

選擇器選擇器權重

繼承 或者 *

0,0,0,0

元素選擇器

0,0,0,1

類選擇器,偽類選擇器

0,0,1,0

id選擇器

0,1,0,0

行內樣式

1,0,0,0

!important

無窮大注意!important在宣告的樣式後加,例如: color: red !important

css選擇器,背景漸變

css選擇器 1.標籤選擇器,就是給常用的tag加上樣式 div2.所有元素的選擇器,整個文件內的所有元素都被設上該樣式 3.class選擇器 表示 test 4.id選擇器 表示 hello world world 將變成紅色 5.你還可以用方括號的形式指定其他屬性,如 input type te...

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...

CSS 選擇器之基礎選擇器

id選擇器 選擇具體的id屬性值的元素 元素選擇器 選擇具有相同標籤名稱的元素 類選擇器 選擇具有相同的class屬性值的元素。id選擇器,是根據標籤的id屬性值選擇對應的標籤的。格式 id值舉例 定義兩個p標籤,且標籤的id屬性值不同,然後用css定義p標籤的內容如何顯示。google瀏覽器中開啟...