CSS簡單入門

css指層疊樣式表(cascading style sheets)，定義如何顯示html元素

/* 選擇器 */ h1 /* 屬性：值*/

選擇器優先順序：內聯》外聯； id>類》元素》偽類

id選擇器為標有特定id的html元素設定樣式

#para1

選中同一class元素

.center

選中同一類元素

selector:pseudo-class 
selector.class:pseudo-class 
a:link /* 未訪問的鏈結 */
a:visited /* 已訪問的鏈結 */
a:hover /* 滑鼠劃過鏈結 */
a:active /* 已選中的鏈結 */
p:first-child /*p下第乙個孩子*/
p:nth-child(2) {} /*p下第2個孩子（下標從1開始）*/
selector:pseudo-element 
selector.class:pseudo-element 
p:first-line /* 對p的第一行文字進行格式化*/
p:first-letter /*文字首字母設定樣式*/
h1:before /*元素前插入新內容*/
h1:after /*元素後插入新內容*/

-屬性選擇器

/*通過屬性設定樣式*/
*把包含title屬性的元素設定樣式*/
[title] 
/* 改變title='run'元素樣式*/
[title=runoob]

/*匹配所有後代相同元素（利用空格分隔）*/ div p

/*只能匹配子元素中相同元素（利用》連線）*/ div>p

div+p

/*選取所有指定元素後相鄰兄弟元素（利用~連線）*/
div~p

背景用於定義html元素的背景

body

body

body

body

body

設定文字樣式

/*設定文字的顏色*/ body h1 h2

/*設定文字水平對齊方式*/ h1 p.date p.main

/*設定或刪除文字的裝飾*/ a h1 h2 h3

/*指定文字中的大寫和小寫字母*/ p.uppercase p.lowercase p.capitalize

/*指定文字的第一行的縮排*/

p

定義字型加粗、大小、文字樣式

p.normal p.italic p.oblique

/*畫素設定*/ h1 h2 p /*em設定（1em=16px）*/ h1 /* 40px/16=2.5em */ h2 /* 30px/16=1.875em */ p /* 14px/16=0.875em */ /*em和百分比設定*/ body h1 h2

p

a:link /* 未訪問鏈結*/ a:visited /* 已訪問鏈結 */ a:hover /* 滑鼠移動到鏈結上 */ a:active /* 滑鼠點選時 */ /*a:hover 必須跟在 a:link 和 a:visited後面 a:active 必須跟在 a:hover後面*/

/*刪除下劃線*/ /* tips:居中顯示 */ magin:0 auto;

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

padding:25px 50px 75px 100px;

p.one p.two

p

border:5px solid red;

設定元素的高度和寬度

h1.hidden /*仍占用空間*/ h1.hidden /*不占用空間*/ li span

/*靜態定位的元素不會受到 top, bottom, left, right影響*/ position:static;

/*元素的位置相對於瀏覽器視窗是固定位置*/ p.pos_fixed

/*相對定位元素的定位是相對其正常位置*/ /*相對定位元素經常被用來作為絕對定位元素的容器塊*/ h2.pos_left h2.pos_right

/*絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於*/ h2/*absolute 定位使元素的位置與文件流無關，因此不佔據空間。 absolute 定位的元素和其他元素重疊。*/

/*吸附效果，類似relative和fixed結合*/ position:sticky;

/*z-index屬性指定了乙個元素的堆疊順序*/ z-index:-1;

可以實現排列及文字環繞

div1 div2

div

div

text-align: center;

img

.right

.right

.center

.center /* 如果文字有多行，新增以下**: */ .center p

.center .center p

設定顏色透明度

opacity:0.5;
rgba(); /*a代表透明度*/

CSS簡單入門

css的簡單入門

css入門 CSS動畫入門

11 CSS3簡單入門鏈結

CSS簡單入門

css的簡單入門

css入門 CSS動畫入門

11 CSS3簡單入門 鏈結

相關推薦

11 CSS3簡單入門鏈結