CSS样式的特点与优先选择权
CSS样式的特点:(子元素会继承父元素的某些样式,子元素有自己的样式就用自己的样式,没有的就用父元素的)
1.继承:
网页中子元素,将继承父元素的样式(比如要控制p标签中的文字大小,可以直接给body标记添加样式)
2.层叠:
网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖父元素的样式
后面的样式会覆盖前面的样式
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>CSS样式的特点</title>
6 <style type="text/css">
7 body{
8 font-size:24px;
9 color:#F00;}
10 p{color:#F0F;}
11 /*下面的样式会覆盖上面的样式*/
12 p{color:#0F0;}
13 </style>
14 </head>
15 <body>
16 <p>0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>
17 <h1>玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>
18 <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p>
19 <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>
20 <p>斯帅称客战开拓者奥登不打 波什:他很快就可复出</p>
21 </body>
22 </html>
CSS样式优先选择权:当样式有冲突时,以哪个为准
内联式-----内嵌式-----链接式----导入式
就近原则
作用范围越小优先权越高
离要修饰的目标越近的样式优先权越高
选择符优先权:
行内----id----class----标签选择符(可以采用!important语法来提升优先权(IE6不支持))
CSS样式的特点与优先选择权的更多相关文章
- css样式的优先顺序
一.css样式的权重:!important(1000+) > 内联样式( 1000 ) > ID选择器(100 ) > 类选择器(10) > 标签选择器( 1 ) > ...
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- CSS样式之优先级
说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级: 内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- [HTML/HTML5]2 CSS样式表设置
2.1 在HTML文件中设置样式表 当前HTML"规则"指出:HTML仅用于标识页面的内容,应该使用样式表来定义内容的呈现样式.这不仅使Web页面对于所有用户(无论采用什么浏览器 ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- [程序猿入行必备]CSS样式之优先级
专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
随机推荐
- 【翻译】Sencha Touch2.4 The Layout System 布局
[翻译]The Layout System 布局 In Sencha Touch there are two basic building blocks: componentsand containe ...
- hadoop1.2.1配置文件
1)core-site.xml <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" ...
- win8系统输入法设置
Windows 8系统自带微软拼音简捷输入法,无论是在Windows的开始屏幕新界面中还是Windows传统桌面里,按Shift键或者直接点击屏幕上的"中/英"标识即可切换中英文输 ...
- 从底层理解Python的执行
摘要:是否想在Python解释器的内部晃悠一圈?是不是想实现一个Python代码执行的追踪器?没有基础?不要怕,这篇文章让你初窥Python底层的奥妙. [编者按]下面博文将带你创建一个字节码级别的追 ...
- VS2012如何更新下载TFS上面的代码到本地
现在的代码基本上全都放在TFS上面,如何同步TFS上面的code呢? 1. Open "Team Explorer - Home" 2. Click "Source Co ...
- Linux command: usermod -- 改变用户状态
应用举例: 1. usermod -g newuser newuser force use GROUP as new primary group. 一般时候是默认的,也是必须的(不能更改).2. 指定 ...
- 阿里巴巴fastJson进行json数据解析
1.生成JsonObject:将Java bean转换成易于处理和传输的strig的key value形式. 2.解析JsonObject:将收到的字符串转换成JsonObejct这种对象形式,Jso ...
- Linux基础--文件压缩
1.compress [root@linux ~]# compress [-dcr] 档案或目录 参数: -d:用来解压缩的参数 -r:可以连同目录下的档案也同时给予压缩呢! -c:将压缩数据输出成为 ...
- Qt之窗体透明 (三种不同的方法和效果)
关于窗体透明,经常遇到,网上的资料倒不少,也不知道写的时候是否验证过,很多都不正确...今天就在此一一阐述! 以下各效果是利用以前写过的一个小程序作为示例进行讲解!(代码过多,贴主要部分) ...
- http://www.ibm.com/developerworks/cn/java/j-lo-junit-src/
http://www.ibm.com/developerworks/cn/java/j-lo-junit-src/