CSS入門介紹

2021-07-10 12:57:53 字數 2736 閱讀 2959

1.w3c標準

w3c標準是由全球資訊網聯盟制定的一系列標準,包括:

結構化標準語言(html和xml)

表現標準語言(css)

行為標準語言(dom和ecmascript)

w3c標準倡導結構,樣式,行為分離

2.css中的定位機制

css中存在3種定位機制:

標準文件流(normal flow):從上到下,從左到右,輸出文件內容,由塊級元素和行級元素組成

浮動(floats)

絕對定位(absolute positioning)

3.塊級元素和行級元素

塊級元素的特點是,從左到右撐滿頁面,獨佔一行,觸碰到頁面邊緣時,就會自動換行,常見的塊級元素有,div,ul,li,dl,dt,p;常見的行級元素有:span,strong,img,input,他能同向的排列在同一行中

4.盒子模型

盒子模型是網頁布局的基石,它包括四個部分,邊框border,外邊距margin,內邊距padding,盒子中的內容content

在設定它的屬性值時可以同時設定,也可以分別設定,比如

margin-right:0px;

margin:10px 20px 30px 40px;(上,右,下,左)

margin:10px 20px 30px;(上,左右,下)

margin:10px 20px;(上下,左右)

margin:10px;(上下左右屬性值相同)

5.css按位置分類行內樣式:(又叫內嵌樣式,內聯式),比如:

內部樣式:(又叫嵌入式),是放在 標籤中,比如:

以上三種樣式的優先順序:內聯式》嵌入式》外部式(就近原則)

6.類選擇器,id選擇器,子選擇器,包含選擇器,通用選擇器

類選擇器:

.類選擇器名稱

.ide

...

id選擇器:

#ide
類選擇器和id選擇器的區別在於,id選擇器只能在文件中使用一次,注意這裡的使用一次並不是指文件只能定義乙個id選擇器

可以使用多個類選擇器為乙個元素同時設定多個樣式

子選擇器:

.ide>li
包含選擇器:

.ide li
子選擇器和包含選擇器的區別:「〉」作用與元素的第一代後代,「空格」作用於元素的所有後代

通用選擇器:

作用:匹配html中所有的標籤元素

**

7.偽類選擇符和分組選擇符偽類選擇符:

a:hover

分組選擇符:**前後等價

h1,span

h1span

8.css中樣式的繼承性和重要性繼承性:css中某些樣式具有繼承性,比如顏色屬性可繼承,邊框屬性不可以

重要性:

pp

9.居中問題第一,被設定的元素為文字或者等行內元素時

text-align:center;
第二,被設定元素為塊狀元素時

width:500px;

margin:20px auto;

第三,不定寬塊狀元素

加入table標籤,為需設定的居中元素外面加入乙個table,為table設定屬性

.qq

wwwww

第四,垂直居中

-----父元素高度確定的單行文字

.qq p

qqqqq

----- 父元素高度確定的多行文字,,塊狀元素

方法一,插入table(tbody,tr,td)

由於td標籤預設設定了rertical-align為middle,所以無需再設定其他

方法二,在div中設定css樣式(不相容ie6,7)

.qq 

qqqqqqqqqq

10 常見css樣式

font-family:"microsoft yahei" 

font-style:italic;

font-size:20px;

text-decoration:underline;

text-decoration:line-through;

pborder:1px solid red;

border:2px dashes red;

border:1px dotted red;

css入門介紹

css 層疊樣式表 英文名 cascading style sheets 主要用於美化網頁 1 css的表現形式 1.1 行內樣式 內嵌樣式 寫在標籤內的樣式,寫在標籤的開始部分的內部,style屬性當中,即 1.2 內部樣式 內聯樣式 寫在html頁面中,存放於標籤當中,樣式則寫在style標籤中...

CSS入門介紹

為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,css由此思想而誕生,css是 cascading style sheets 的首字母縮寫,意思是層疊樣式表。有了css,html中大部分表現樣式的標籤就廢棄不用了,html只負責文件的結構和內容,表現形式完全交給css,html文件變...

CSS入門介紹

一.背景 這裡將陸續介紹前端css中相關知識,先介紹css2.1,後續會介紹css3的相關屬性,通過該系列的文章,希望能給準備轉戰前端的人員一些幫助,同時也幫助自己梳理知識,文章中如有錯誤,歡迎指出。下面是css2.1第乙個階段的知識框圖,後面會陸續更新該系列後續文章。二.整體介紹 一 基礎介紹 1...