您的位置：首页 > Web前端 > CSS

CSS样式简单总结

2016-03-08 00:18 555 查看

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

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

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

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

2、选择器的优先权

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>

可以看到div p虽然定义在.div1 p后面，但是并没有把.div1 p的样式进行了覆盖，是因为div p的优先级要低于.div1
p，

所以造成了。img图片显示还是居左的。如图

这时可以在<p>加上 align='center'属性，发现图片并没有居中显示。

又尝试了下在 p上直接定义内联样式，style="text-align:center;" 这下起到作用了图片居中了。

个人感觉标签上的属性，会被CSS样式覆盖掉。

选择器可以参考http://www.w3school.com.cn/cssref/selector_attribute_value.asp

另外注意遇到 .class element 时，这里选中的元素为，使用.class样式下，标签为element的所有子孙。

比如

<div class='div1'>

<p></p>

<p></p>

</div>

.div1 p选中所有的p标签，另外.div>p不会只取第一个p，效果与.div p 一样的。

element .class

举例

<div>

<div class="div1">xxxx </div>

<p></p>

<div>xxxxx</div>

</div>

div .div1 选中的是第一个div。

若有错误，请大家帮纠正啊！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航