CSS样式简单总结

来源：互联网发布：淘宝二级页面怎么做编辑：程序博客网时间：2024/05/21 09:07

感谢这篇文章，参考http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html

之前对CSS的样式的优先级不太清楚，只知道

1、（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

现在了解到CSS的优先级分为

2、选择器的优先权

jc6_002

CSS 优先级法则：

A 选择器都有一个权值，权值越大越优先；

B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

D 继承的CSS 样式不如后来指定的CSS 样式；

E 在同一组属性设置中标有“!important”规则的优先级最大；

今天调试页面样式的时候发现图片一直，居中不了，查看了CSS样式才发现问题。

Demo如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
.div1 {
    float: left;
    width: 100%;
}

.div1 p {
   color: #000;
   float: left;
   font-size: 14px;
   text-align: left;
   width: 100%;
}

.div1 img {
    max-width: 1100px;
    padding: 10px;
}

div p{
   text-align: center;
}

</style>
<body>
<div class='div1'>
   <p>
       <img src="./demo.png">
   </p>
</div>
</body>
</html>