字体修饰
- 字体大小:选择器
{font-size:12px/14px/16px;}
- 文本颜色:
{color:颜色值;}
- 文本字体:
{font-family:"宋体","黑体";}
说明:
当字体是中文字体时需加引号;
当英文字体中有空格时需加引号如"Times New Roman";
- 加粗:
{font-weight:bolder/bold/normal/100-900;}
- 检索或设置对象中的文本的大小写
text-transform:none/capitalize
首字母大写/uppercase
将单词全部变成大写/lowercase
将单词大写转换成小写
- 字体风格:
{font-style:normal常规字体 /italic /oblique倾斜;}
- 水平对齐方式
{text-align:left/right/center/justify(两端对齐中文不起作用);}
- 垂直对齐方式
{vertical-align:top/bottom/middle;}
- 行高
{line-height:normal/数值;}
- 文本修饰:
text-decoration:none /underline /overline /line-through /blink
说明:
none
:没有修饰 underline
:添加下划线 overline
:添加上划线 line-through
:添加删除线 blink
:闪烁 (不支持IE、谷歌、苹果)
- 首行缩进:
{text-indent:value;}
单位最好写em
说明:text-indent
可以取负值; text-indent
属性只对第一行起作用。
- 字间距
{letter-spacing:value;}
控制英文字母或汉字的字距。
- 词间距
{word-spacing:value;}
控制英文单词词距。
定义列表符号样式
list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块) /none(去掉列表符号);
- 使用图片作为列表符号:
list-style-image:url(所使用图片的路径及全称);
- 定义列表符号位置:
list-style-position:outside /inside;
关于列表属性的简写:list-style: ;
盒模型的概念
- 盒模型是css布局的基石,规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
- 盒模型的组成:边框、外边距
margin
、内填充padding
、内容区content
- 盒模型是有两种标准的,一个是标准模型,一个是IE模型。
- 设置两种模型
box-sizing:content-box;
box-sizing:border-box;
- css盒模型和IE盒模型的区别:
(1) 在标准盒子模型中,width
和 height
指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸
元素总宽度 = content
+ 左右padding
+ 左右border
+ 左右margin
(2) IE盒子模型中,width
和 height
指的是内容区域 +border +padding
的宽度和高度。
元素总宽度 = width
+ 左右margin