资源简介

(共16张PPT)
10
CSS的属性
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：绝对尺寸、关键字、相对尺寸、比列尺寸
绝对尺寸单位有：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属性可以同时设置与文字有关的属性，比如字体、字号等
CSS的属性
字体样式
控制图文布局
背景颜色与图像
超链接
字符间距
Word-spacing
Letter-spacing
语法格式如下:
Word-spacing:normal|长度单位
Letter-spacing ：normal|长度单位
分别表示单词间距和字母间距
设置行距
Line-height
语法格式如下:
line-height：normal|数字|长度单位|比列
文本对齐
Text-align
vertical-align
语法格式如下:
Text-align：left|center|right
Text-valign:
首行缩进
text-indent
语法格式如下:
text-indent：数字|百分比
图文布局
CSS的属性
字体样式
控制图文布局
背景颜色与图像
超链接
链接文字
A:link
语法格式如下:
a:link{ }
已链接文字
语法格式如下:
a:visited{ }
表示已单击超链接后文字的样式
单击超链接
语法格式如下:
a:active{ } 表示鼠标单击超链接时文字样式
鼠标移动到超链接文字上
语法格式如下:
a:hover{ }表示鼠标移动到超链接文字上是文字的样式
超链接
A{ }表示超链接的样式
注意：设置超链接样式时。这四个属性的前后位置不能发生变化。否则有些样式无法正常显示
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标签中的盒子原理
元素内容（可以是文本，图片，表格，div块等元素）
宽度为300像素，高度自适应
元素内容（可以是文本，图片，表格，div块等元素）
宽度为200像素，高度自适应
15px
15px
5px
15px
15px
15px
2px
15px
5px
Id=box
Id=right
Id=left
border
padding
margin
CSS的属性
4
Css中的盒子原理
元素内容（可以是文本，图片，表格，div块等元素）
宽度为300像素，高度自适应
元素内容（可以是文本，图片，表格，div块等元素）
宽度为200像素，高度自适应
15px
15px
5px
15px
15px
15px
2px
15px
5px
Id=box
Id=right
Id=left
语法规则：border-width:thin|medium|thick|长度单位
Border-（top,right,bottom,left）-width
语法规则：margin-（上，右，下，左）：长度|百分比|auto
边框宽度
语法：border-color
边框边界的设置
边框颜色
CSS的属性
4
边框的设置
语法规则：padding-(top,right,bottom,left):长度或者百分比
语法规则：border:边框宽度 边框样式 边框颜色(顺序保持一致）
其中边框样式必须设置，其他两项可任选
Border-top/border-right/border-bittom/border-left
内边界：padding
语法：border-style：none|solid|double|dotted|dashed|groove|ridge|inset|outset
边框属性border
边框样式
CSS的属性
CSS的属性
背景图像+文字
图像780*200
左侧内容总宽度大概为200px
左侧内容总宽度剩余宽度
Foot部分
导航条4-5个高度50px
CSS的属性
谢谢您的聆听

展开更多......

收起↑