CSS——CSS样式表的创建

9 篇文章 0 订阅

1.   样式表分类    

  •     内部样式表
  •     外部样式表
  •     行间样式表    

2.   内部样式表

    当单个文档需要特殊的样式时,使用内部样式表。使用 <style> 标签在文档头部定义内部样式表,语法格式如下:

    <style></style>

<head>
<style  type="text/css">
.p{
    color:black;
}
</style>
</head>

3.   外部样式表

    当样式需要应用于多个页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变多个网页的外观。语法格式如下:

     <link   href="index.css"  rel="stylesheet"  type="text/css" >


每个页面使用 <link> 标签链接到样式表。 <link> 标签在文档的头部:

<head>
 <link   href="index.css"  rel="stylesheet"  type="text/css" >
</head>


下面是一个样式表文件的例子:

hr {color:red;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}


【注】:

  •     不要在属性值与单位之间留有空格。如:"margin-left: 20 px" ,正确的写法是 "margin-left: 20px" 。
  •     每一条声明以";"结束,声明组用{ }括起来,声明组与声明组之间回车换行就行,不需要其他符号分隔。


4.   行间样式表

    使用行间样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。语法格式如下:

    <p   style=""></p>


    【例】改变段落的颜色和左外边距。

<p style="color:red;margin-left:20px">This is a paragraph.</p>


5.   多重样式


当同一个 HTML 元素被不止一个样式定义时,层叠次序为(从低到高):

  1.  浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 行间样式表(在 HTML 元素内部)
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值