【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 正文

css内部样式表示例

放大字体  缩小字体 发布日期:2020-09-12 10:47:39    浏览次数:17
导读

  内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:  语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。  type=“text/CSS” 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。  内联样式,又有人称

  内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:

  语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。

  type=“text/CSS” 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。

  内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:

  语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。

  链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:

  该语法中,link标签需要放在head头部标签中,并且必须指定link标签的三个属性,具体如下:

  href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。 rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

  代码集中写在HTML文档的head头部中,并且用style标签定义,基本语法如下:语法中,style标签一般位于head标签中title标签之后,也可以放在HTML文档的任何地方。type=text/

  内嵌式是将CSS代码集中写在HTML文档的head头部中,并且用style标签定义,基本语法如下:

  语法中,style标签一般位于head标签中title标签之后,也可以放在HTML文档的任何地方。

  它由两部分构成,一个是.css文件,一个是html文件中的link标签,起到连接.html与.css文件的作用。

  上面的代码是CSS表中的DIV的属性通过link标签在两个不同的HTML完成CSS的样式。浏览器会从.css文件中读取样式,并对页面上的html进行修饰。

  由例1可以看出:p1继承了div1的样式;p2继承了div2的样式,而非集成div1的样式;p3则直接使用了自己的样式。

  规则3:标签有多重样式时的优先级:内联样式 内部样式 外部样式 浏览器用户自定义样式 浏览器默认样式。特殊地,如果外部样式放在内部样式之后,外部样式覆盖内部样式。

  规则4:内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择器 = 伪元素选择器

  规则5:不同的选择器分配权值,令:内联样式权值为1000;id选择器权值为100;类选择器、属性选择器和伪类选择器权值为10;标签选择器和伪元素选择器的前中为1。权值的和越大,优先级越高。如果权值和相同,则按照“就近原则”。(规则4包含在该规则中)

  注意:选择器的权值不能进位。比如:有11个类选择器,按理说权重应该是110。但由于权值不能进位,所以11个类选择器的权值也不能超过100,可以理解为99.99999。

  上例中“段落1”的颜色为蓝色。因为样式1和样式3的权重最大且相等,而根据“就近原则”,样式3的优先级最高。

  规则6:当某一元素有重样式同时又有多个选择器时,应先遵循规则4,在选择器相同时,遵循规则5。

  CSS提供了一种可以完全忽略以上规则的方法,当你一定、必须确保某一个特定的属性要显示时,可以使用这个技术。

  规则7:属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则5判断优先级。

  在此例中,“段落1”的颜色为红色。如果按权值确定优先级,应该为id选择器的优先级最高,但这里的标签选择器中,加入了important,无视了优先级规则,直接将自身所在的样式确定为最高优先级,所以“段落1”的颜色为红色。

 
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-529479.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4