基础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等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。