CSS样式书写位置

luckyboy!

已于 2022-09-06 09:32:31 修改

阅读量2.7k

点赞数 2

分类专栏：前端 CSS 文章标签： html5 前端 html css 开发语言

于 2022-08-15 08:00:00 首次发布

本文链接： https://blog.csdn.net/m0_57051895/article/details/126337443

版权

前端同时被 2 个专栏收录

13 篇文章 5 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

文章目录

一、CSS是什么？

二、CSS样式书写位置

1.CSS样式语法

一、CSS是什么？

css即层叠样式表，它是一种用来表现html或xml等文件样式的计算机语言。css能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、CSS样式书写位置

1.CSS样式语法

CSS样式语法，样式名：样式值，可以书写多组样式，多组样式之间用分隔号隔开

2.CSS样式的三种书写方式

第一种方式：称为行内样式

直接写在开始标签里面书写样式，利用style属性，在属性值里写CSS样式。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
    <!-- CSS样式语法，样式名：样式值，可以书写多组样式，多组样式之间用分隔号隔开 -->
    <!-- 第一种方式：直接写在开始标签里面书写样式，利用style属性，在属性值里写CSS样式， -->
    <center>
        <h3>《静夜思》</h3>
        <h4>李白</h4>
        <!-- 给 p 标签添加字体颜色和背景颜色 -->
        <P style="color: red;background-color: antiquewhite;">床前明月光，疑是地上霜。 </P>
        <P style="color: green; background-color: pink;">举头望明月，低头思故乡。 </P>
    </center>
</body>
</html>

运行结果如下：

第二种方式：内部样式

在head标签内部，写一个style标签，通过各种选择器选中对应元素，

在{}内设置样式，样式结构为名值对，可以书写多种样式，用分号隔开

代码运行如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        /*center标签里面的文字设置为红色显示 */
        center{
            color:red
        }
        /* 第一个 p 标签设置文字为橙色加粗显示 */
        #p1{
            color: orange;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- CSS样式语法，样式名：样式值，可以书写多组样式，多组样式之间用分隔号隔开 -->
    <!--第二种方式：在head标签内部，写一个style标签，通过各种选择器选中对应元素，
        在{}内设置样式，样式结构为名值对，可以书写多种样式，用分号隔开 -->
    <center>
       <P id="p1">假如我是一只鸟，</P>
       <P>我也应该用嘶哑的喉咙歌唱：</P>
       <P>这被暴风雨所打击着的土地，</P>
       <P>这永远汹涌着我们的悲愤的河流， </P>
       <P>这无止息地吹刮着的激怒的风， </P>
       <P>和那来自林间的无比温柔的黎明……</P>
       <P>——然后我死了， </P>
       <P>连羽毛也腐烂在土地里面。 </P>
       <P>为什么我的眼里常含泪水？ </P>
       <P>因为我对这土地爱得深沉…… </P> 
    </center>
</body>
</html>

运行结果如下：

第三种方式：外部样式

在html文件外部，新建一个 “.css” 文件，在 “.css” 文件里设置对应样式，设置样式

后通过link标签引入 “.css” 文件即可生效

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部部样式</title>
    <!-- 通过link标签引入rest.css文件，样式生效 -->
    <link rel="stylesheet" href="rest.css">
</head>
<body>
    <!-- CSS样式语法，样式名：样式值，可以书写多组样式，多组样式之间用分隔号隔开 -->
    <!--第三种方式：在html文件外，新建一个 .css 文件，在 .css 文件里选中对应样式，
        设置样式后通过link标签引入.css文件即可生效-->
    <center>
       <P id="p1">假如我是一只鸟，</P>
       <P id="p2">我也应该用嘶哑的喉咙歌唱：</P>
       <P>这被暴风雨所打击着的土地，</P>
       <P>这永远汹涌着我们的悲愤的河流， </P>
       <P>这无止息地吹刮着的激怒的风， </P>
       <P>和那来自林间的无比温柔的黎明……</P>
       <P>——然后我死了， </P>
       <P>连羽毛也腐烂在土地里面。 </P>
       <P>为什么我的眼里常含泪水？ </P>
       <P>因为我对这土地爱得深沉…… </P> 
    </center>
</body>
</html>

/* rest.css文件中设置对应样式 */
/* 选择id为p1的标签，设置字体大小为20排序 */
#p1{
    font-size: 28px;
}
/* 选择id为p2的标签，设置背景色为黑色,字体颜色为白色 */
#p2{
    background-color: black;
    color: white;
}

运行结果如下：