1.选择器
- 标签选择器/元素选择器:div{background-color: red; }
- class选择器:.child{background-color: gray;}
- ID选择器:#wuyifan{background-color: brown;}
- 伪类选择器:#wuyifan:hover{background-color: green;}
- 属性选择器:不常用
组合形式:层级选择器:
.father span{background-color: black}/祖辈子孙都可以/
.father>span{background-color: blue}/父子选择器/
.father,.mahuateng{color: brown;}/z组合选择器/
.header .logo{background-color: yellow}
2.属性
- 宽高 width(min-width max-width)height(min-height max-height)
- 字体 font font-style(通常写normal) font-weight:bold粗细值 font-size:字体的大小一般设置为12px font-family:设置为字体样式但是如果其他浏览器不支持这种样式也没用
- text-intdent文字的缩进inherit; text-overflow文字溢出inherit; text-align:设置文本位置 text-shadow:阴影 line-height和verticl-align设置文本的位置为中间
- 背景 background background-color :背景颜色 background-image:背景图片 background-repeat:去掉重复的图片 background-attachment:设置滚动条一般设置默认 background-position:设置背景位置 background-size:设置背景大小
- 颜色:color:设置颜色 opacity:设置透明度
list-style:设置列表项目相关样式
list-style-image:设置或检索作为对象的列表项标记的图像
list-style-position:设置或检索作为对象的列表项标记如何根据文本排列
list-style-type:设置或检索对象的列表项所使用的预设标记
定位:position:检索对象的定位方式relative absolute相对 fixed类似广告
z-index:检索或设置对象的层叠顺序 top:检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置 right:检索或设置对象与其最近一个具有定位设置的父对象右边相关的位置 bottom:检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置 left:检索或设置对象与其最近一个具有定位设置的父对象左边相关的位置
border:边框
border:设置对象的边框样式border-width:设置对象边框的宽度 border-style:设置对象边框的样式 border-color:设置对象边框的颜色 border-radius:设置对象的圆角边框 box-shadow:设置对象阴影
内边距:
border:设置对象的边框样式border-width:设置对象边框的宽度 border-style:设置对象边框的样式 border-color:设置对象边框的颜色 border-radius:设置对象的圆角边框 box-shadow:设置对象阴影
外边距:margin:设置所有外边距属性
margin-top:设置元素的外上边距 margin-right:设置元素的外右边距 margin-left:设置元素的外左边距 margin-bottom:设置元素的外下边距
- 单位:常用px
3.盒子模型