HTML+CSS笔记 CSS入门续集

继承

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优先级样式是个例外,权值高于用户自己设置的样式

来自为知笔记(Wiz)

时间: 2024-10-12 20:28:56

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

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

颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数. 每

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

盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有三种缩写的方法: 1.如果top.right.bottom.left的值相同, margin:10px 10px 10px 10px; 可缩写为: margin:10px; 2.如果top和

HTML+CSS笔记 CSS进阶续集

元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<span>.<br>

HTML+CSS笔记 CSS进阶再续

CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.

HTML+CSS笔记 CSS进阶

文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体.(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体.) 现在一般网页喜欢设置"微软雅黑" 关于字体的问题可以参考阮一峰的经典文章:http://www.ruanyifeng.com/blog/20

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

水平居中 行内元素的水平居中 在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 语法: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> <style> div.txtCenter{ text-ali

[html] 学习笔记-CSS入门基本知识

1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14px;} 属性大于1个之后,属性之间用分号隔开:如果大于1个单词,需要加上引号:p{font-family:"sans serif";} 2)CSS高级语法 选择器分组:h1,h2,h3,h4,h5,h6{color:red;} 继承:body{ color:green; } 例子: 1

《CSS设计指南》笔记--CSS工作原理

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社 本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! CSS工作原理 2.1 剖析CSS规则 ??规则实际上就是一条完整的CSS指令.规则声明了要修改的元素和要应用给该元素的样式. 2.1.1 为文档添加样式的三种方法 ??有三种方法可以把CSS添加到网页中,分别是写在元素标签里(行内样式),写在&

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左