一、1、樣式表的引入與使用
(1)鏈入外部樣式表檔案
(2)定義內部樣式塊物件
(3)內聯樣式定義
例:文字
(4)樣式定義語法
選擇符
(5)優先順序(從高到低):內聯樣式、內部樣式、外部樣式。
二、常用選擇符型別
(1)通配選擇符
例:*
(2)型別選擇符
例:td
(3)類選擇符(class選擇符)
定義例:.list-title
使用例:文字
(4)id選擇符
定義例:#course-name
使用例:文字
(5)選擇符分組(多個選擇符使用相同的樣式定義)
例:td, a, #course-name, .list-title
(6)子物件選擇符
例:td>p
注:
物件的所有子物件
才使用該樣式
(7)包含選擇符
例:td div
注:
物件的所有子孫後代
物件才使用該樣式
(8)多種型別的選擇符可以組合使用
例:#list-div div > .emp-text
注:id為list-div的物件的子孫中標記為
的元素的子物件中,class為emp-text的元素才使用該樣式。
(9)選擇符優先順序(從高到低):id選擇符、class選擇符、型別選擇符、通配選擇符。
(10)選擇符定義時共享樣式的一般原則
幾乎全部標記都用的共性樣式用通配選擇符;
同一型別的多數標記都用的共性樣式用型別選擇符;
多數標記都用的共性樣式用class選擇符;
單個標記獨用的個性樣式用id選擇符。
3、字型屬性
font-style:字型樣式,normal為標準樣式(預設),italic為斜體。
font-weight:字型粗細,normal為標準粗細(預設),bold為粗體。
font-size:字型大小,帶單位(px、pt、cm、mm等,2.54cm=72pt)。
font-family:字型名稱,按優先順序排列,以逗號隔開。如果字型名稱包含空格,則應使用引號括起。
font:font-style font-weight font-size font-family
color:文字顏色。
text-decoration:字型修飾,none為無修飾(預設),underline為下劃線,overline為上劃線,line-through為貫穿線。
4、文字
text-overflow:文字溢位的處理,clip為裁剪,ellipsis為顯示省略號。
text-align:水平對齊方式,常用值left、right、center、justify。
vertical-align:垂直對齊方式,常用值top、middle、bottom等。
white-space:normal——預設,文字自動換行;nowrap——強制不換行。
5、尺寸
width:寬度。height:高度。
6、邊框
border-width:邊框粗細,常用值medium、thin、thick、數值和單位等。
border-style:邊框樣式,常用值none、dotted、solid等。
border-color:邊框顏色。
border:border-width border-style border-color
定義屬性值的形式:四框、上下 左右、上 右 下 左。
7、背景
background-color:背景顏色,取值transparent(預設)、顏色表示。
background-image:背景影象,取值none(預設,無背景影象)、url(「影象url」)。
background-repeat:背景重複方式,取值repeat(預設,重複)、no-repeat(不重複)等。
background-attachment:scroll——隨物件內容滾動,fixed——固定背景。
background-position:背景位置,取值:橫座標 縱座標,每個座標可以是百分數、數值合單位、center、只能用於縱座標的top和bottom、只能用於橫座標的left和right。
background:background-color background-image background-repeat background-attachment background-position
8、定位
position:static(預設,無特殊定位)、absolute(絕對定位)、relative(相對定位)。
left:左座標。top:上座標。right:右座標。bottom:下座標。z-index:層疊順序。
9、外補丁
margin-top、margin-right、margin-bottom、margin-left、margin。
10、內補丁
padding-top、padding-right、padding-bottom、padding-left、padding。
11、布局
display:block(塊物件,物件後添新行)、none(隱藏物件)。
visibility:inherit(預設,繼承父物件可見性)、visible(可見)、hidden(隱藏)。
float:none(預設,物件不漂移)、left(文字流向物件的右邊)、right(文字流向物件的左邊)。
clear:none(預設,允許兩邊都有浮動物件)、left(不允許左邊有浮動物件)、right(不允許右邊有浮動物件)、both(不允許有浮動物件)。
12、列表
list-style-image:專案符號影象,none(預設)、url(「影象url」)。
list-style-type:專案符號型別,disc(預設,實心圓)、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none等。
list-style:list-style-image list-style-type
13、其他
cursor:游標形狀,auto(預設,自動確定)、all-scroll、col-resize、crosshair、default、hand、move、help、no-drop、not-allowed、pointer、progress、row-resize、text、vertical-text、wait、url(url)等。
css 常用樣式
css 說的通俗一點就是 給標籤加樣式的。什麼玩意是樣式呢。你們可以理解為人穿的衣服,化妝之類的修飾,讓自己的寫的標籤變的好看一點 那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 內頁樣式 行內樣式。那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 ...
css常用樣式
格式調整 標籤的位置調整 text align center 絕對元素生成 position absolute margin right 微調上下左右 浮動 float 上下左右 width 寬 height 高 樣式調整 字型粗細 font weight size 字型格式 text decora...
CSS常用樣式
img box imgparentelement childelementfilter alpha opacity 60 filter progid dximagetransform.microsoft.gradient startcolorstr red,endcolorstr blue,grad...