menu Secto白帽博客-专注于技术研究
HTML文档CSS样式引入的几种方法
414 浏览 | 2020-03-23 | 分类:程序设计 | 标签:HTML

1. 内联样式(Inline Style)

在使用内联样式的时候,你必须在标签内部使用Style属性,Style属性包括了全部的CSS属性,使用内联样式建议在对单一标签添加样式的时候使用。本例给大家展示如何改变字体背景颜色和字体颜色。

<p style="background:#7bff00;color:#ba00ff">Sectoer白帽博客-专注于技术研究</p>

运行结果:

2. 外部样式表(External Style Sheet)

在使用外部样式表的时候,你需要建立一个新的页面可以命名为:style.CSS,切记不能已.html命名,下面你就需要在使用页面的<head></head>标签中使用<link>标签将他们链接起来。
link标签语法:

<link rel="stylesheet" type="text/css" href="样式表地址">

外部样式表格式:

body {background-color:#7bff00;}
p {margin-life:20px;}
hr {color:sienna;}

ps:属性值之间禁止打空格

3. 内部样式表(Internal Style Sheet)

如果在编写单个HTML文档时,该页面需要使用样式时,可以使用内联样式表,内联样式表添加在<head>标签中。
内联样式表语法:

<style>
body {background-color:#7bff00;}
p {margin-life:20px;}
hr {color:sienna;}
</sytle>

4. 多样优先级

如果在同一页面使用了全部样式,浏览器会根据优先级进行显示
(1)优先级如下:
内联样式>内部样式>外部样式>浏览器默认样式

<head>
<!--外部样式style.css设置为粉红色 -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置h3为红色 -->
<style type="text/css">
  /* 内部样式 */
  h3{color:#f0038;}
</sytle>
<body>
   <!--这里设置为蓝色-->
  <h3>secteo博客-专注于技术研究</h3>
 </body>

运行结果如下:

外联CSS文件:

By:岸阳.
Time:2020/3/23

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表评论

email
web

全部评论 (共 1 条评论)

    2020-03-23 17:47
    本人新入驻Secto,有写的不好的地方请在评论区提出。我会慢慢改进的!谢谢