继承

CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签)。
语法:
  1. p{color:red;}
  2. <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
上面代码展示了:
某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。
语法:
  1. p{border:1px solid red;}
  2. <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线,而对于子元素span是没用起到作用的。

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?
语法:
  1. p{color:red;}
  2. .first{color:green;}
  3. <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面就是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。
语法:
  1. p{color:red;} /*权值为1*/
  2. p span{color:green;} /*权值为1+1=2*/
  3. .warning{color:white;} /*权值为10*/
  4. p span.warning{color:purple;} /*权值为1+1+10=12*/
  5. #footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

层叠

我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
语法:
  1. p{color:red;}
  2. p{color:green;}
  3. <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了:

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)


重要性

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
语法:
  1. p{color:red!important;}
  2. p{color:green;}
  3. <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意:!important要写在分号的前面
这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。
这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
但记住!important优先级样式是个例外,权值高于用户自己设置的样式












HTML+CSS笔记 CSS入门续集的更多相关文章

  1. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  2. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...

  3. HTML+CSS笔记 CSS进阶续集

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  4. HTML+CSS笔记 CSS入门

    简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...

  5. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  6. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  7. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  8. HTML+CSS笔记 CSS进阶

    文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...

  9. css笔记 css用法:

    前端框架:AdminLTE  https://almsaeedstudio.com/themes/AdminLTE/index2.html CSS学习教程: http://www.divcss5.co ...

随机推荐

  1. 在mac上访问自带服务器权限问题

    在开发中,有时候我们需要自己的在电脑上做一些网络相关的测试功能,因此,我们必须在本地上模拟网络环境. 在模拟网络环境中,经常会遇到访问权限的问题.现在我就把自己的解决办法写出来.我用的模拟服务器站点是 ...

  2. 翻转View

    翻转View by 伍雪颖 CGContextRef context = UIGraphicsGetCurrentContext(); [UIView beginAnimations:nil cont ...

  3. Myeclipse2014 SVN安装方法以及项目上传到svn服务器

    1. 打开 Myeclipse 工具栏下的Help下的Install from Site 2.打开后弹出窗口, 并点击Add标签,如下图: 3.现在是最重要的一步,填写相关信息. 在对话框Name输入 ...

  4. SQL2008缩小日志脚本

    以下为SQL2008 缩小日志文件的脚本,在SQL Server Management Studio中打开数据库,将脚本里的数据库名称替换成需要缩小日志的库名称,然后 运行以下脚本. USE WSS_ ...

  5. Linux下文件及目录的一些操作(附递归遍历目录源码)

    1.获取当前工作目录 #include <unistd.h> 1.char *getcwd(char *buf,size_t size); 2. 3.其中,buf为缓冲区地址,size为给 ...

  6. Gamma网址

    git:https://code.gammainfo.com/ 官网:http://gammainfo.com/

  7. jQuery Mobile基础

    1.安装 在<head></head>标签里边写入以下内容 jQuery Mobile CDN: <head> <meta charset="utf ...

  8. NXT项目准备资料

    聊天资源 http://www.cocoachina.com/ios/20150205/11116.html https://developer.layer.com/docs/ios/quick-st ...

  9. BZOJ 1037: [ZJOI2008]生日聚会Party( dp )

    dp(i, j, a, b)表示选了i个男生, j个女生, 后缀中男生比女生多a(最多), 女生比男生多b(最多). dp(i+1, j, a+1, max(0, b-1)) += dp(i, j, ...

  10. URL伪静态设置 (apache2.4)

    ` ` 1.修改apche主配置文件 主要是 #LoadModule rewrite_module modules/mod_rewrite.so 改为 LoadModule rewrite_modul ...