作用:美化页面
样式放置位置
标签内:style属性
文件head内:style标签放置于head标签中
link引用:link标签 + rel属性指明引用类型 + href属性指明文件地址
样式优先级:标签内>文件head内>link引用
css选择器
- 标签名{}:标签选择器
- #id_name{}:id选择器, id不能重复
- .class_name{}:class选择器, class是可以重复的,选择一类class进行样式渲染
- .class_name div .class_name2(使用空格间隔):层级选择
- .class_name,#id_name(使用逗号间隔):同级组合选择
css基本样式
- color字体颜色
- background-color背景颜色:#ddd(RGB可以在网上搜索对应表格)/red
- background-position背景图片位置:80px 90px
- background-repeat是否重复填充:no-repeat
- height高度 150px像素,没有占比x%这种说法
- width宽度 150px 或者 相对于父类标签占比100%
- float使块级元素在同一行
- border/border-left/border-top/border-buttom
- display:none全部隐藏(可以用作模态对话框,菜单得收拢显示);inline块级变内联;block内联变块级;inline-block(width+height在内联标签中不生效)同时具有内联块级标签属,默认会有3px移动,使用float属性则可以消除;
- visibility:只隐藏内容
- cursor鼠标形态:pointer/help/wait
- opacity透明度==background-coloe:rgba(0,0,0,.6):0.4
- list-style-type去除li元素的前缀
- text-align文本内容在标签中水平居中:center
- line-height == 样式标签的height
边距
内边距padding(属于该样式,本身会改变):20px 0 0 0,遵循上右下左设置
外边距margin/margin-top/margin-left(不属于该样式,本身不改变):20px
body加样式margin = 0去除边框
悬浮 float
需要有宽度限制
,将块级元素可以并列排放
子标签使用了 float 需要加上 + 最后一个子标签包含样式clear:both 属性,否则子块将无法显示
position
- 默认relative + absolute结合使用:父类使用position:relative + 子类使用position:absolute;bottom:0;right:0(寻找最近的用position:relativ的父类)
- fixed相对浏览器窗口固定:组合位置参数top:0/right:100px使用
- absolute相对页面固定
- z-index:数量越大,越靠上
Tips:
- 调试可以先在浏览器中调试,再copy到代码中
- img{border:0}设置之后img标签将不会再IE中又边框