CSS初步--定义和应用样式

最新推荐文章于 2025-05-12 00:41:34 发布

RainMcCom

最新推荐文章于 2025-05-12 00:41:34 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html5学习文章标签： css html5

本文链接：https://blog.youkuaiyun.com/RainMcCom/article/details/53054865

Html5学习专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在HTML文档中使用CSS样式，包括内联样式、内部样式表和外部样式表的应用方法，并探讨了如何通过@import导入样式及声明样式表的字符编码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义和应用样式
CSS样式由一条或多条以分号隔开的样式声明组成，每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。
例如：background-color:grey; color:white。

1.使用元素内嵌方式：使用全局属性style将样式应用到具体的某些元素上去。例如：

<a title="测试内容" href="http://www.baidu.com" style="background-color:#d0d0d0;color:#0000ff;">百度</a>
<p>I like <span>some </span>apples.</p>

效果如下：
这里写图片描述

2.使用文档内嵌样式
相比较style属性，我们可以使用style元素定义文档内嵌样式，通过CSS选择器指示浏览器应用样式。例:

<html>
<head>
    <title>hhhhfff</title>
    <style type="text/css">
        a{
            background-color: #d0d0d0;
            color: #0000ff;
        }
    </style>
</head>
<body>
<a title="测试内容" href="http://www.baidu.com">百度</a>
<p>I like <span>some </span>apples.</p>
</body>
</html>

效果和上面的一致。
在一个style元素中可以定义多条样式，例：

<html>
<head>
    <title>hhhhfff</title>
    <style type="text/css">
        a{
            background-color: #d0d0d0;
            color: #0000ff;
        }
        span{
            border: thin red solid;
            padding: 10px;
        }
    </style>
</head>
<body>
<a title="测试内容" href="http://www.baidu.com">百度</a>
<p>I like <span>some </span>apples.</p>
</body>
</html>

效果如下:
这里写图片描述
可以看到a元素和span元素同时有了样式。

3.使用外部样式表
为了在每一个文档中避免重复定义相同的样式，我们可以创建一个独立的样式表文件。例如，我们可以将上面的样式放到名为test.css的文件中去:

 a{
            background-color: #d0d0d0;
            color: #0000ff;
        }
        span{
            border: thin red solid;
            padding: 10px;
        }

然后在HTML文档就可以使用link元素将样式表导入，例:

<html>
<head>
    <title>hhhhfff</title>
    <link rel="stylesheet"  type="text/css" href="test.css"></link>
</head>
<body>
<a title="测试内容" href="http://www.baidu.com">百度</a>
<p>I like <span>some </span>apples.</p>
</body>
</html>

得到的效果仍旧和上面的效果一致。

文档只要使用link元素就可以链接想要的样式表，但是需要注意的是，如果不同样式表中使用了同样的选择器，那么这些样式表的导入顺序很重要，这种情况下得以应用的是后导入的样式。

1.从其他样式表导入样式
可以使用@import语句将样式从一个样式表导入另一个样式表。例如下面的combine.css:

@import "styles.css"
span
{
    border:medium black dashed;
    padding:10px;
}

然后用link链接新的样式表:

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

可以看到的是，最后是combine.css的span起了作用:
这里写图片描述

2.声明样式表的字符编码
在CSS样式表中可以出现在@import语句之前的只有@charset语句，它用于声明样式表使用的字符编码，例如:

@charset "UTF-8";
@import "styles.css";
span
{
    border:medium black dashed;
    padding:10px;
}