學習HTML5和CSS(三)

2021-09-27 03:24:23 字數 3997 閱讀 6834

css(cascading style sheets)

css通常稱為css樣式表或層疊樣式表(級聯樣式表),主要用於設定html頁面中的文字內容(字型、大小、對齊方式等)、的外形(寬高、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。

css以html為基礎,提供了豐富的功能,如字型、顏色、背景的控制及整體排版等,而且還可以針對不同的瀏覽器設定不同的樣式。

css樣式規則

在樣式規則中:

1.選擇器用於指定css樣式作用的html物件,花括號內是對該物件設定的具體樣式。

2.屬性和屬性值以「鍵值對」的形式出現。

3.屬性是對指定的物件設定的樣式屬性,例如字型大小、文字顏色等。

4.屬性和屬性值之間用英文「:」連線。

5.多個「鍵值對」之間用英文「;」進行區分。

可以用段落 和 **的對齊的演示。

1.font-size:字型大小大小

font-size屬性用於設定字型大小,推薦使用畫素單位px。

2.font-family:字型

font-family屬性用於設定字型。

p
3.css unicode字型

4.font-weight:字型粗細

字型加粗用 b 和 strong 標籤,可以使用沒有語義的css來實現。

font-weight屬性用於定義字型的粗細,其可用屬性值:normal、bold、bolder、lighter、100~900(100的整數倍)。

5.font-style:字型風格

字型傾斜用 i 和 em ,可以使用沒有語義的css 來實現。font-style屬性用於定義字型風格,如設定斜體、傾斜或正常字型,其可用屬性值如下:

normal:預設值,瀏覽器會顯示標準的字型樣式。

italic:瀏覽器會顯示斜體的字型樣式。

oblique:瀏覽器會顯示傾斜的字型樣式。

6.font:綜合設定字型樣式

font屬性用於對字型樣式進行綜合設定

選擇器
**

1.標籤選擇器(元素選擇器)

標籤選擇器是指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。

白展堂

呂秀才李大嘴

鳴人佐助

卡卡西

2.類選擇器類選擇器使用「.」(英文點號)進行標識,後面緊跟類名。

標籤呼叫的時候用 class=「類名」 即可。

類選擇器最大的優勢是可以為元素物件定義單獨或相同的樣式。

google

3.多類名選擇器我們可以給標籤指定多個類名,從而達到更多的選擇目的。

亞瑟

劉備安其拉

貂蟬

4. id選擇器id選擇器使用「#」進行標識,後面緊跟id名。

該語法中,id名即為html元素的id屬性值,大多數html元素都可以定義id屬性,元素的id值是唯一的,只能對應於文件中某乙個具體的元素。

5. 萬用字元選擇器

作用範圍最廣的,能匹配頁面中所有的元素。

*
6.偽類選擇器偽類選擇器用於向某些選擇器新增特殊的效果。比如給鏈結新增特殊效果。

類選擇器是乙個點 ,比如 .demo {}

偽類選擇器用 2個點 就是冒號,比如 :link{}

7.鏈結偽類選擇器

a

a:hover

8.結構(位置)偽類選擇器(css3)

9.目標偽類選擇器(css3)

選擇器可用於選取當前活動的目標元素

:target
10.css注釋/* 需要注釋的內容 */ 進行注釋

**1.color:文字顏色

用於定義文字的顏色,其取值方式有如下3種:

預定義的顏色值,如red,green,blue等。

十六進製制,如#ff0000,#ff6600,#29d794等。實際工作中,十六進製制是最常用的定義顏色的方式。

rgb**,如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

2.line-height:行間距

用於設定行間距,就是行與行之間的距離。

line-height常用的屬性值單位有三種,分別為畫素px,相對值em和百分比%,實際工作中使用最多的是畫素px。

3.text-align:水平對齊方式

用於設定文字內容的水平對齊。

left:左對齊(預設值);right:右對齊;center:居中對齊

4.text-indent:首行縮排

用於設定首行文字的縮排,其屬性值可為不同單位的數值、em字元寬度的倍數。

5.letter-spacing:字間距

用於定義字間距,所謂字間距就是字元與字元之間的空白。其屬性值可為不同單位的數值,允許使用負值,預設為normal。

6.word-spacing:單詞間距

用於定義英文單詞之間的間距,對中文字元無效。

7.顏色半透明(css3)

文字顏色到了css3我們可以採取半透明的格式了語法格式如下:

color

:rgba

(r,g,b,a)

a 是alpha 透明的意思 取值範圍 0~1之間

color

:rgba

(0,0,0,0.3)

8.文字陰影(css3)可以給文字新增陰影效果了 shadow 影子。

text-shadow

:水平位置 垂直位置 模糊距離 陰影顏色;

sublime可以快速提高我們**的書寫方式生成標籤 直接輸入標籤名 按tab鍵即可 比如 div 然後tab 鍵, 就可以生成

如果想要生成多個相同標籤 加上 * 就可以了 比如 div*3 就可以快速生成3個div

如果有父子級關係的標籤,可以用 > 比如 ul > li就可以了

如果有兄弟關係的標籤,用 + 就可以了 比如 div+p

如果生成帶有類名或者id名字的, 直接寫 .demo 或者 #two tab 鍵就可以了

學習HTML5和CSS(六)之css背景與三大特性

css三大特性 css 可以新增背景顏色和背景,以及來進行設定。background color 背景顏色 background image 背景位址 background repeat 是否平鋪 background position 背景位置 background attachment 背景固定...

HTML5學習筆記(三)

標籤中的屬性 在標籤中,同樣存在一些屬性 方法和事件 方法屬性 事件play currentsrc play pause currenttime pause load videowidth progress canplaytype videoheight error 等等與標籤之間插入的內容是提供給...

html5學習筆記(三)

在html中標籤有很多種,它們之間有一些為行級標籤一些為塊級標籤。塊級標籤的特徵,不管標籤裡面的內容元素為多大,就算很小,它也會占用整整一行的網頁空間位置,比如div ul ol p 這類標籤預設情況下寬度就是 body 的寬度,這些標籤在使用時會使下乙個標籤或元素自動換行。行級標籤的特徵,它與塊級...