css总结
时间:2017年12月10日 21:52:59
用途:此文章用于个人总结
css笔记
1.CSS全称为"层叠样式表(Cascading Style Sheets)"
2.CSS样式的语法: 选择符{属性:值}
3.CSS样式代码插入的三种形式:内联/嵌入/外部
内联式:就是把代码写在html标签的行间样式(不建议用这种)
嵌入式:就是把样式写在<style>css样式</style>里的
外部式:就是把css代码写在一个单独的外部文件中,用<link href="css地址" rel="stylesheet" type="text/css">
4.CSS选择器:
标签选择器,如 p{}
类选择器,如 .class{}
ID选择器,如 #id{}
子选择器,如 .class>li{} //仅仅li的代码有样式
后代选择器 .class li{} //全部li下的代码都有样式
通用选择器 *{}
伪类选择器 a:hover{color:red;} //css3新增 允许给html不存在的标签设置样式
分组选择器 h1,span{}
5.元素分类
块级元素:div,p,h1...h6,ol,ul,table,address,blockquote,form //{display:block}
行内元素:a,span,b,strong,i,em,label //{display:inline}
6.css布局模型:
基本文档流
浮动布局
绝对布局 position:absolute绝对 relative相对 fixed固定
绝对定位:相对于父级
相对定位:相对于以前的定位
固定定位:相对于窗口
7.居中
水平居中
text-align:center //对父元素进行设置
margin:0 auto //对子元素进行设置
8.清除浮动有哪些方式?比较好的方式是哪一种?
(1)父级div定义height。
(2)结尾处加空div标签clear:both。
(3)父级div定义伪类:after和zoom。
(4)父级div定义overflow:hidden。
(5)父级div定义overflow:auto。
(6)父级div也浮动,需要定义宽度。
(7)父级div定义display:table。
(8)结尾处加br标签clear:both。
比较好的是第3种方式,好多网站都这么用。
未完待续......
这周比较忙,找时间把上周那篇html总结也慢慢补上