常用CSS樣式

2021-09-26 15:34:14 字數 4257 閱讀 1669

一、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...