常见元素属性
1. 高宽尺寸
高宽尺寸 高度尺寸:height、max-height、min-height
文本
Color:设置文本颜色
Text-indent:文本缩进(可以为负值,常用单位:px、em)
Text-align:文本水平对齐方式,属性值:left | center | right | justify
Text-decoration:属性值:none | underline | overline | line-through
Letter-spacing:字间距,常用单位px或em
Word-spacing:词间距,常用单位px或em字体
font-family:字体类型
Font-size:字体大小
Font-weight:设置字体粗细
属性值:normal | bold | bolder | lighter | 100~900
400~=normal , 700~=bold
Font-style:定义字体的风格背景
Background
Background-color:设置背景颜色
Background-image:设置背景图片,属性值为url()引入图片路径
Background-position:设置背景位置,两个参数,一个为水平方向,一个为垂直方向,可使用百分比,方位词(如left),具体数值等定位
Background-repeat:定义背景图片重复度,默认为repeat
属性值: repeat | repeat-x | repeat-y | no-repeat列表
List-style
List-style-image:将图片作为列表项标志,属性值用url()参数
List-style-position:定义列表项标志的位置
属性值inside | outside表格
Border-collapse:设置表格的边框是否被合并为一个单一的边框
属性值:separate(默认) | collpase(合并)
Border-spacing:设置相邻单元格的边框间的距离
Border-spacing:length;定义一个 length 参数,指的是水平和垂直间距
Border-spacing:length length;第一个设置水平间距,而第二个设置垂直间距
caption-side:表格标题位置 属性值:top | bottom
empty-cells:设置空单元格显示方式 属性值:hide | show( 默认)轮廓
Outline
Outline-width:设置轮廓宽度
Outline-style:设置轮廓样式
Outline-color:设置轮廓颜色盒模型
Padding 内边距
常用单位:px、em、百分比
Padding-top / padding-rgiht / padding-bottom / padding-left
Padding:10px; //四个方向的padding值都为10px
Padding:10px 20px; //上下的padding值为10px,左右的padding值为20px
Padding:10px 20px 30px;//上内边距为10,左右内边距为20,下内边距为30
Padding:10px 20px 30px 40px;//从上内边距开始,按照顺时针方向依次排Border 边框
常用的border属性
宽度尺寸:width
单位:像素
边框线条颜色:border-color
边框线条样式:border-style(solid实线、dashed虚线、dotted点虚线)
边框线条宽度:border-widthBorder属性
上边框:border-top
下边框:border-bottom
左边框:border-left
右边框:border-right
合起来写:border:1px solid red;Margin 外边距
常用单位:px、em、百分比
Margin -top / margin-rgiht / margin-bottom / margin-left
Margin :10px; //四个方向的margin值都为10px
Margin :10px 20px; //上下的margin值为10px,左右的margin值为20px
Margin :10px 20px 30px;//上内边距为10,左右内边距为20,下内边距为30
Margin :10px 20px 30px 40px;//从上内边距开始,按照顺时针方向依次排模型包含content尺寸,padding尺寸,border尺寸和margin尺寸
模型分为标准(w3c)盒模型和IE盒模型:
标准盒模型盒子尺寸计算方式:
盒子宽=width(content) + padding-left + padding
样式表优先级:内嵌>内部>外部>浏览器默认缺省
导入外部样式表:@import url(“css/style.css”);
链接与导入两种方式的区别
1.隶属关系不同,link属于HTML标签,@import是css提供的载入方式
lingk可以引入其他类型的文件,而@import只能载入css样式
2.加载时间和顺序不同,link会优先将css加载到网页中进行编译显示,而@import只能等HTML结构呈现出来后在进行加载渲染
3.兼容性不同,link没有任何问题 ,@import只有IE5,1以上才能使用
4.DOM模型控制样式,dom改变样式时,只能使用link,@important不受dom模型控制
css选择器:基本选择器,组合选择器,属性选择器
基本选择器:通用选择器,标签选择器,类选择器,ID选择器 ID》类》标签》通用
组合选择器:多元素选择器,后代选择器,子选择器,相邻兄弟选择器,普通兄弟选择器
属性选择器:存在选择器,相等选择器,包含选择器,选字符选择器,前缀选择器,子串选择器,后缀选择器