理解CSS：样式表与网页美化-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_55832273/article/details/114948326

CSS（层叠样式表）是用于美化HTML页面的表现层技术，它能实现代码简洁、易于维护，并对搜索引擎友好。CSS有行内式、内嵌式和外链式三种书写位置，其中外链式在开发中最为推荐，因为它实现了结构与样式的完全分离，提高了样式复用和网页加载速度。常用的CSS样式包括字体、字体大小、颜色和盒子模型等。

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

CSS介绍

CSS是一种用于屏幕上渲染html，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。

CSS：表现层，网页的美化。

CSS与HTML都是由W3C组织进行维护的，现在的版本已经更行到3.0版本，也就是我们常说的CSS3。
CSS全称：cascading style sheets （层叠样式表）

CSS优点

能够使代码简洁，可读性比较强。
便于维护。
对搜索引擎比较友好。
提高开发效率。

CSS语法

格式：

 选择器{
属性：属性值；
}

例：

  <style>
   p {
      color: pink;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <p>这是一段文字</p>

书写位置

根据书写位置不同，CSS可以分为三种：行内式、内嵌式、外链式。

行内式

CSS属性直接写在标签的style中。

优点：写法比较简单，不用考虑选择器。
缺点：

结构与样式没有分离。
不便于维护。
样式复用性较差，只对当前元素生效。
【注意】在开发过程中不推荐使用

例：

<p style="color: pink; font-size: 16px; font-style: italic;">这是一段文字</p>

内嵌式

使用style标签，将CSS属性名与属性值引入到HTML页面中，style标签放置在head标签中。

优点：

相对于行内式，结构与样式部分分离。
便于维护。
样式可以重复。

缺点：

结构与样式没有达到完全分离。
只对当前页面生效。

例：

  <style>
   p {
      color: pink;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <p>这是一段文字</p>

外链式

新建一个CSS文件，将CSS语句写入CSS文件中，然后在HTML页面中通过link标签引入。

【注意】CSS文件不能写中文，可以写英文、数字、下划线，但是不能以数字开头。

优点：

结构与样式完全分离。
样式可以复用，多个页面都可以使用。
使用浏览器的缓存机制，提高网页的加载速度。

格式：

<link rel="stylesheet" href="css/test.css"
-rel 表示的是引入的文件与页面的关系，这里表示引入的文件是当前页面的样式表。
-href 引入文件的路径。

例：

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

缓存：浏览器在打开网页时，会将网页中的图片和文件保存到本地，下次打开页面时，不需要再次加载了，能够提高网页的加载速度。
以后的开发过程中，推荐使用外链式。

CSS常用的样式

字体 font-family

字体有中文字体和英文字体。如果文本中有中文和英文，我们最好设置两种字体。
英文字体需要放在中文字体的前面。因为英文字体一般没有为汉字设置字体样式。字体加载时按照咱们的书写顺序来的。如果前面的字体没有匹配到，才会使用后面的字体。
如果你的电脑上没有设置的字体，则会按照默认字体来显示。
英文常用字体：Arial，consolas.
中文常用字体：宋体，微软雅黑。
一些中文字体也有英文名称。
宋体：SimSun
微软雅黑：Microsoft YaHei

总结

多个属性值之间用逗号隔开，每一个属性值用双引号包裹。后面的字体表示备用字体。

字体大小 font-size

属性是以像素为单位（px）

颜色 color

作用：为文本添加字体颜色。
属性值：

颜色名：（英文-例：red、green、blue）
2.RGB：[ rgb(0,255,0);取值范围‘0~255之间’ ]
3.十六进制：#ff6700 （数值前必须有‘#’ 取值范围0~f）

例：

<style>
        p {
            font-family: Microsoft YaHei;
            font-size: 18px;
            color: red;           
        }
    </style>
</head>
<body>
    <p>这是一段文字</p>

盒子属性

盒子的宽、高、背景颜色以及边框。
width：宽（单位是px）
height：高（单位是px）
background-color：背景颜
（属性值：

颜色名：（英文-例：red、green、blue）
2.RGB：[ rgb(0,255,0);取值范围‘0~255之间’ ]
3.十六进制：#ff6700 （数值前必须有‘#’ 取值范围0~f））

border：边框（多属性值。顺序：宽度，线的类型，颜色。）

例：

    <style>
        div {
            width: 80px;
            height: 30px;
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <div></div>