本帖最后由 alizee1025 于 2019-4-18 14:10 编辑
通过插入样式表来创建CSS,插入样式表的方式有以下三种:
外部样式表 外部样式表就是将CSS放到一个css后缀的文件中,用过下面方式来引用:
- <head>
- <link rel="stylesheet" type="text/css" href="mystyle.css" />
- </head>
复制代码 外部样式是的页面结构与样式完全分离,外部样式可以通过上面的方式应用到多个页面中,也是开发中使用频率最高的方式。
另外,外部样式的权重最低,相同的部分会被其他样式表所覆盖。
内部样式表
内部样式表将CSS写入到style标签中,将标签引入页面进行引用:
- <head>
- <style type="text/css">
- hr {color: sienna;}
- p {margin-left: 20px;}
- body {background-image: url("images/back40.gif");}
- </style>
- </head>
复制代码 内部样式表适用于该页面存在特殊样式时可以通过内部样式表对整个页面生效,相较于外部样式表,内部样式表的权重更高,相同部分会覆盖掉外部样式的部分,例如:
外部样式表拥有针对 h3 选择器的三个属性:
- h3 {
- color: red;
- text-align: left;
- font-size: 8pt;
- }
复制代码
内部样式表拥有针对 h3 选择器的两个属性:
- h3 {
- text-align: right;
- font-size: 20pt;
- }
复制代码 假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
- color: red;
- text-align: right;
- font-size: 20pt;
复制代码 相同的text-align属性,内部样式表会覆盖掉外部样式表。
内联样式
内联样式就是直接在标签中加入style属性,将样式表设置在style属性中:
- <p style="color: sienna; margin-left: 20px">
- This is a paragraph
- </p>
复制代码
内联样式由于设置在标签中,所以无法与页面结构分离,对于大量的元素,浏览器会花费更多的时间脚本,并重新计算样式,这样会导致性能变慢,所以请慎重使用。
另外内联样式的权重最高,当遇到样式仅需要在一个元素上应用一次时,可以使用内联样式。
PS:获取更多前端技术,请加入QQ群:720389894
|
|