和

標簽包含的網(wǎng)頁內(nèi)容將用黑體顯示。
02
樣式表的規(guī)則具有繼承性
樣式表的規(guī)則具有繼承性
03
情景選擇
如果想讓所有斜體顯示的文字(即被和標識的文字)都以紅色顯示,但條件是只有當這些斜體顯示的文字出現(xiàn)在通常的段落文字(即被

標識的文字)內(nèi)時。這就需要使用情景選擇來實現(xiàn)。通過情景選擇可設(shè)定一個可以執(zhí)行選擇說明的情景。
帶情景選擇的樣式表的格式如下
情景標簽 標識符{屬性1:屬性值1；屬性2:屬性值2；}
標簽 .class類名稱{屬性1:屬性值1；屬性2:屬性值2；}
標簽#ID類名稱{屬性1:屬性值1；屬性2:屬性值2；}
CSS的幾個特性
作業(yè)：完成下發(fā)的TASK9 中的作業(yè)
要求：利用記事本編輯網(wǎng)頁，按照要求保存為HTML文件，自己預覽后提交。有問題及時反饋練習。
11
CSS的屬性
Part teen
CSS的屬性
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
字體屬性
Font-family
語法格式如下:
font- family:<字體1>,<字體2>…,<字體n>
字體風格
Font-style
語法格式如下:
font- style:normal|italic|oblique
分別表示正常、斜體、傾斜顯示
字體變形
Font-variant
語法格式如下:
font- variant：normal|small-caps
字體加粗
Font-weight
語法格式如下:
font- weight：normal/bold/bolder/lighter/100~900
字體樣式
CSS的屬性
字體顏色
color
語法格式如下:
color：#******或者color
字體大小
Font-size
語法格式如下:
font- size：絕對尺寸、關(guān)鍵字、相對尺寸、比列尺寸
絕對尺寸單位有：ex/in/cm/mm/pt/px
字符大小寫
Font-transform
語法格式如下:
Font-transform：uppercase/lowercase/capitalize/none
文本修飾
text-decoration
語法格式如下:
text-decoration：underline/overline/line-through/blink/none
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
字體樣式
D
04
字體屬性font
語法：font:font-style |font-weight |font-variant|font-size| font-family
屬性與屬性之間用空格分隔，
使用font屬性必須有字體和字號兩個屬性，順序最好不變，可以有缺省屬性，不然font屬性不能使用。
CSS的屬性
功能:font屬性可以同時設(shè)置與文字有關(guān)的屬性，比如字體、字號等
CSS的屬性
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
字符間距
Word-spacing
Letter-spacing
語法格式如下:
Word-spacing:normal|長度單位
Letter-spacing ：normal|長度單位
分別表示單詞間距和字母間距
設(shè)置行距
Line-height
語法格式如下:
line-height：normal|數(shù)字|長度單位|比列
文本對齊
Text-align
vertical-align
語法格式如下:
Text-align：left|center|right
Text-valign:
首行縮進
text-indent
語法格式如下:
text-indent：數(shù)字|百分比
圖文布局
CSS的屬性
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
鏈接文字
A:link
語法格式如下:
a:link{ }
已鏈接文字
語法格式如下:
a:visited{ }
表示已單擊超鏈接后文字的樣式
單擊超鏈接
語法格式如下:
a:active{ } 表示鼠標單擊超鏈接時文字樣式
鼠標移動到超鏈接文字上
語法格式如下:
a:hover{ }表示鼠標移動到超鏈接文字上是文字的樣式
超鏈接
A{ }表示超鏈接的樣式
注意：設(shè)置超鏈接樣式時。這四個屬性的前后位置不能發(fā)生變化。否則有些樣式無法正常顯示
01
03
02
背景顏色屬性
保留文字的格式和動畫效果不變，請不要刪除文本框，直接把文本框中的文字替換即可。
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
02
背景圖像屬性
語法格式如下:
background-color:顏色
語法格式如下:
background-image:url(url路徑）|none
03
02
語法格式如下:
list-style-img:url(url路徑）|none
項目符號屬性
03
CSS的屬性
01
03
04
背景重復屬性
Background-repeat:no-repeat|repeat-x|repeat-y|repeat
背景圖像的位置
Background-position:top(center/bottom)|left(center/right)
固定背景圖像
Background-attachment:scroll|fixed
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
CSS的屬性
CSS的屬性
4
Html標簽中的盒子原理
元素內(nèi)容（可以是文本，圖片，表格，div塊等元素）
寬度為300像素，高度自適應(yīng)
元素內(nèi)容（可以是文本，圖片，表格，div塊等元素）
寬度為200像素，高度自適應(yīng)
15px
15px
5px
15px
15px
15px
2px
15px
5px
Id=box
Id=right
Id=left
border
padding
margin
CSS的屬性
4
Css中的盒子原理
元素內(nèi)容（可以是文本，圖片，表格，div塊等元素）
寬度為300像素，高度自適應(yīng)
元素內(nèi)容（可以是文本，圖片，表格，div塊等元素）
寬度為200像素，高度自適應(yīng)
15px
15px
5px
15px
15px
15px
2px
15px
5px
Id=box
Id=right
Id=left
語法規(guī)則：border-width:thin|medium|thick|長度單位
Border-（top,right,bottom,left）-width
語法規(guī)則：margin-（上，右，下，左）：長度|百分比|auto
邊框?qū)挾?br/>語法：border-color
邊框邊界的設(shè)置
邊框顏色
CSS的屬性
4
邊框的設(shè)置
語法規(guī)則：padding-(top,right,bottom,left):長度或者百分比
語法規(guī)則：border:邊框?qū)挾?邊框樣式 邊框顏色(順序保持一致）
其中邊框樣式必須設(shè)置，其他兩項可任選
Border-top/border-right/border-bittom/border-left
內(nèi)邊界：padding
語法：border-style：none|solid|double|dotted|dashed|groove|ridge|inset|outset
邊框?qū)傩詁order
邊框樣式
CSS的屬性
CSS的屬性
背景圖像+文字
圖像780*200
左側(cè)內(nèi)容總寬度大概為200px
左側(cè)內(nèi)容總寬度剩余寬度
Foot部分
導航條4-5個高度50px
CSS的屬性
謝謝您的聆聽

展開更多......

收起↑