基础CSS
1、CSS基本选择器
①、标签选择器:P{color:green;}
②、id选择器:#info{font-size:30px;}
③、class选择器:.info{background:#ff0;}
④、通配选择器:*{margin:0;padding:0;}
2、伪类
a:hover 悬浮,产生视觉效果
.c1 :hover a{background:#ff0;} 悬浮c1区域,变化的是 a
3、选择器的优先级
继承
①、继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。
②、CSS继承性的权重非常低,比普通元素的权重还要低的0。
③、CSS继承是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
优先级
CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序
!important>内嵌式(1000)>id(100)>class(10)>element(1)
4、文本属性(css text)
text-align:文本对齐方式
text-align:center 水平居中 left左对齐,rigth右对齐 ,justify两端对齐
line-heigth:200px;文本行高,文本垂直居中
text-decoration:none;删除文本装饰
text-decoration:underline;文本加下划线
font-size:10px;
5、背景属性
background-color:red;背景颜色
background-image:url('1.jpg');背景图片
background-repeat:no-repeat;去掉平铺(默认是平铺的)
background-position:right top(20px,20px);
background:#fff url('1.jpg') no-repeat right top
6、display属性
display:none;隐藏某个元素,该元素被隐藏后,原本占用的空间也会从页面布局中消失。
display:inline-block;可以把块级标签当成内联标签,布局时,放在一行里面
display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:
#outer{
border:3px dashed;
word-spacing:-5px;
}
7、position定位
position:fixed;对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。