css個人總結

WBOY
發布: 2016-09-12 17:27:17
原創
1030 人瀏覽過

1.什么是css,指的是叠层样式表,控制网页的的外观显示。

2.引入css的三种方式,外部链接,内部链接,内联,分别的语法是,,,style="属性:值"

3.css选择器,选择器就是要针对你要所改变的元素,而单独定义的样式,就常见的选择器:ID,CLASS,元素选择器,子元素选择器,群组选择器,相邻选择器,id选择器是唯一的意思是,只能定义一个id名相同的,class选择器,类选择器,可以为多个元素定义,id选择器和class选择器的区别在于,id是唯一的就像每个人的身份证一样只有一份号码是唯一的,而class就是像每个人的名字一样可以重复,元素选择器就是选泽要改变的元素标签名字,子选择器就是在当前元素后的子元素,群组合选择器就是选泽所有想改变的元素,相邻选择器就在当前同级元素的下一个元素。

语法:

这是一个段落

 相应的  css规则: #id{ 属性:值}

       

相应的css规则:.class{ 属性:值}

       

这是一个段落

相应的css规则:p{属性:值}

       

这是一个段落奥

相应的css规则:div p{属性:值}

      

这是一个段落奥

相应的css规则:div,p{属性:值}

   

这是一个段落奥

相应的css规则:div+div{属性:值}

 

 

这是一个段落奥

 

4.字體樣式

字體的類型:font-family:  '';取值宋體,微軟雅黑等、

字體的大小:font-size:;通常以像素值px,其他的還有em ,百分比

字體的粗細:font-weight:;取值bold粗體顯示,normal正常

字體的樣式:font-style:;italic斜體,normal正常

顏色;color;

行高:line-height:;字體的行高,一行的高度不是距離。

5.文字樣式

文字裝飾:text-decoration:;取值有,line-through(貫穿線),underline(底線),overline(上劃線)

文字對齊:text-align:;取值有,center(居中),left(左對齊),right(右對齊)

文字縮排:text-ident:;取值單位px.em,百分比

文字大小寫:text-transform:;取值有 uppercase(大寫) lowercase(小寫) capitalize(首指母大寫)

文字的字間距:letter-sapcing:;取值單位px ,em ,百分比

詞間距:word-sapcing:;取值單位px ,em ,百分比

6.邊框

border邊框 邊框的大小 類型 顏色 分別的設定

border-width:;值是單位px   em  百分比

border-style:; 取值是solid 實線  dashed虛線 等

border-color:;取值顏色 ,可以是十六進位。

7.背景 

背景圖片,背景是否重複 ,背景的位置,背景是否滾動  分別是

background:URL; 

background-repeat:;取值有,repeat(重複) no-repeat(不重複) repeat-x(x軸重複) repeat-y(y軸重複)

background-position:;取值可以是   center left right top

background-scroll:;  取值是scroll   fixed

 

可以簡寫;background: URL  repeat   position  scroll;

 

 

8.超連結樣式

當我們滑鼠移動到a標籤上面,可以讓他顯示的樣式,透過偽類來設置,不一定是a元素才有可以設置,在html中 任何元素可以都已設置偽類。文法:元素:hover

當滑鼠未存取的樣式a:link;,當滑鼠存取後的樣式a:visited;當滑鼠移動到的樣式a:hover;當滑鼠按下時的樣式a:active;

9圖片

圖片大小:可以透過設定它的寬度 高度來設定。

圖片位置:透過text-align(水平居中),vertical-aligin(垂直居中)

圖片邊框:透過border來設定它的邊框

10列表

列表的樣式:list-style-type:;取值none,circle,等

列表圖片:list-style-image:;

11表格

表格預設是沒有邊框的,我要透過border給它值

12,盒子模型

盒子模型分為:內容區,內邊距,外邊距,邊框

13佈置

浮動佈局:透過float浮動塊元素,注意清除浮動。

定位佈局:position來設定。然後設定。上右下左的值。

固定定位:position:fixed/scroll

靜態定位:position:static

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板