一、CSS在哪写
1.标签内的style属性
2.html的<style></style>标签内
3..css文件内
二、CSS语法格式
1.CSS语法
CSS由特征和值成对出现 <div style="特征:值;特征:值;"></div>
<style></style>或.css文件中<link rel="默认" href="路径" >在head标签内部
div {
特征:值;
特征:值;
}
2.CSS选择器
通过标签名,#id名,.class名
3.其他选择器
*{}
(1)对选择的class名定样式(即父节点)border-width,border-color,bord-style .class名{}
(2.1)对选择的class的子节点定样式 .class名 div{}对class名下所有div标签定样式改,重叠会加粗.
(2.2).class名>div{}对紧挨class名下只一级的div标签样式改
(3)对选的class名标签之后(不含text3)兄弟标签改样式.class名~.text4(.class名或.class名~div)
4.伪类选择器
已选好的标签或class名等,之后加上:hover{}鼠标经过时显示的样式
同上:active{}鼠标点击时显示的样式
同上:visited{}已访问的链接,只针对a标签 a是行级标签,暂时无法设置背景色
三、CSS优先级
style属性里>id>class>标签
同一级别选择器后写优先
四、常用样式
1.盒子模型
1.1 标签元素排列规则:从左往右,从上往下
1.2内部大小-内边距-边框-外边距
1.3两个盒子水平放的外边距不能重合,垂直方的外边距重合成一个
1.4div的
margin:10px;
(float:left;)
2.盒子样式
2.1.border边框(border/border-top/border-bottom/border-left/border-right:)
border:1px solid red;(width:100px;height:100px;)粗细,线条,颜色(三个属性都要设置)
2.2.margin外边距(margin/margin-top/margin-bottom/margin-left/margin-right)
margin:1px,3px,2px,4px;上右下左、(上下,左右)
2.3padding内边距(同margin)
同margin
2.4width
2.5height
*设置居中
左右外边距设成auto,设置宽,最好设高(不设会占满一行)
div{margin:100px auto;width:100px;}
3.文本样式
font/font-family/font-size/font-weight/font-align/line-height/text-decoration
line-height:为div的height/div的font-size数字时,文字垂直居中
或line-height=div的height的px时,文字垂直居中
4.背景样式
background:背景色,背景图片,图片坐标,背景尺寸,图片重复方式
background-color
background-image:url("图片地址");
background-position
background-size
background-repeat
5.图片样式
6.布局样式