文本属性
(1)文本大小
{font-size:12px/14px/16px;}
默认16px,最小12px
还有em单位 em单位是相对与父元素字体大小进行取值 1em=父元素文字大小
单位还可以是pt,9pt=12px;
(2)字体类型
{font-family:字体1,字体2,;}
说明:
*当字体是中文字体时需加引号;”宋体”
*当英文字体中有空格时需加引号: 如“Times New Roman”;
Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial.
(3)字体加粗
{font-weight:bolder/bold/normal}
说明:
bolder(更粗的)/bold(加粗)/normal(常规)
1)在css规范中把字体的粗细分为9个等级,分别从100-900,其中100对应最轻的字体变形,而900对应最重的字体变形。 100-500常规字体 600-900加粗字体
(4)字体倾斜
{ font-style:italic/oblique/normal;}
说明:
取值为:italic/oblique/normal italic和oblique都表示倾斜,不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显
(5)文本行高
{line-height:normal/数值;}
说明:
当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐;
当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上任意位置的定位;
当单行文本的行高大于容器高时,可实现单行文本在容器中垂直中齐以下任意位置的定位。
(IE6及以下版本存在浏览器兼容问题)尽量不要让行高大于高度
(6)文本属性的复合写法
font:font-style font-weight font-size / line-height font-family
说明:
按以上顺序;size和family固定不可和其他属性位置互换; *文字字体大小、行高、类型常用的属性写法
(7)文本
{color:颜色值;}
1、用十六进制表示颜色值: 16进制颜色代码指定颜色的组成方式:前两位表示红色,中间两位表示绿色,最后两位表示蓝色。把三个数值依次并列起来 ,以#开头 0 1 2 3 4 5 6 7 8 9 A B C D E F 颜色模式:光色模式 FF 00 00(红 绿 蓝); 写法:#faf7fc;
R G B
2、RGB 例如:color:#F00;
3、 color:rgba(0,255,255,0.6 ) 透明度 alpha
(8)文本对齐
水平对齐方式{text-align:left/right/center/justify;} 两端对齐
垂直对齐方式{vertical-align:top/bottom/middle;} 上 中 下; inline-block;
(9)文本修饰
text-decoration:none/underline/overline/line-through/blink
说明:
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
(10)首行缩进
{text-indent:value;}
说明: text-indent可以取负值; text-indent属性只对第一行起作用
(11)字间距,词间距
{letter-spacing:value;}
说明:控制英文字母或汉字的字距
word-spacing:value;
说明:控制英文单词词距
列表属性
(1)定义列表符号
{list-style-type: }
说明:取值: disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号);
(2)使用图片作为列表符号
{list-style-image:url(图像路径); }
说明:url(所使用图片的路径及全称)
(3)定义列表符号的位置
{list-style-position: ;}
说明:取值: outside(外边) inside(里边);
(4)列表属性简写
{list-style: ; }
说明:
可简写直接设置列表属性值; 常用属性: list-style:none;去掉列表样式;
背景属性
(1)背景颜色
语法:选择符{background-color:颜色值;} 简写:background:color值;
(2)背景图片设置
语法:background-image:url(背景图片的路径及全称);
说明:
网页上有两种图片形式:插入图片、背景图; 插入图片:属于网页内容,也就是结构。
背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。
背景图片的显示原则
1)容器尺寸等于图片尺寸,背景图片正好显示在容器中;
2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图。
4)加载背景图必须有容器区域;
(3)背景图片平铺设置
语法:选择符 {background-repeat:no-repeat/repeat/ repeat-x/repeat-y }
no-repeat:不平铺
repeat:平铺 (默认)
repeat-x:横向平铺
(4)背景图片位置
语法:选择符{background-position:水平方向属性值 垂直方向属性性;}
水平方向值:left/center/right或数值
垂直方向值: top/center/bottom或数值
说明:
水平向右 垂直向下移动 是正数值
水平向左 垂直向上移动 是负数值
两个值 :第一个值表示水平位置的值, 第二个值表示垂直的位置。 *例如:当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
(5)背景图的固定
语法:选择符{background-attachment:scroll(滚动)/fixed(固定);}
说明: fixed 固定,不随内容一块滚动; scroll:随内容一块滚动
(6)背景属性简写
语法:选择符{background:属性值1 属性值2 属性值3;}
背景缩写: {background:#00ff00 url(背景图片的路径及全称) no-repeat center top;}