1. CSS入门

Vincent_TangM

已于 2023-10-12 10:55:18 修改

阅读量56

点赞数

分类专栏： CSS web前端文章标签： css 前端

于 2023-10-11 10:02:49 首次发布

本文链接：https://blog.csdn.net/Vincent_TangM/article/details/133760887

版权

web前端同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

1. CSS介绍

CSS是层叠样式表（Cascading Style Sheets）的简称，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式,而最终我们能看到只是网页的最上边一层。

2. CSS的基本语法:选择器+声明块

选择器，通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的p元素

声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以:连接，以;结尾，如color，font-size等就是样式。

3. CSS书写位置

3.1 第一种方式(内联样式，行内样式)：

在标签内部通过style属性来设置元素的样式。

- 问题：

使用内联样式，样式只能对一个标签生效，

如果希望影响到多个元素必须在每一个元素中都复制一遍

并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便

- 注意：开发时绝对不要使用内联样式

     <p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>

     <p style="color: red; font-size: 60px;">今天天气真不错！</p> -->

3.2 第二种方式（内部样式表）：

写在html的head的style标签里，如下图，注意style不属于html范畴，它属于CSS。

然后通过CSS的选择器来选中元素并为其设置各种样式

可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用

- 内部样式表更加方便对样式进行复用

- 问题：

我们的内部样式表只能对一个网页起作用，

它里边的样式不能跨页面进行复用

<head>
<style>
      /*CSS的注释和html不同，html是<!-- -->
        
        CSS中的注释，注释中的内容会自动被浏览器所忽略

        CSS的基本语法:
            选择器 声明块

            选择器，通过选择器可以选中页面中的指定元素
                比如 p 的作用就是选中页面中所有的p元素

            声明块，通过声明块来指定要为元素设置的样式
                声明块由一个一个的声明组成
                声明是一个名值对结构
                    一个样式名对应一个样式值，名和值之间以:连接，以;结尾   

      */

      p{
          color: red;
          font-size: 40px;
      }

      h1{
          color: green;
      }
    
    </style>
</head>
<body>
    <h1>我是H1</h1>
    <p>今天天气真不错！</p>
    <p>今天天气真不错！</p>
    <p>今天天气真不错！</p>
    <p>今天天气真不错！</p>
</body>

3.3 第三种方式（外部样式表）最佳实践：

将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件。

这样可以使样式可以在不同页面之间进行复用，将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

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

4. CSS选择器和HTML的标签的异同

HTML中的标签和CSS中的选择器是不同的概念，尽管它们之间存在一定的关联，但它们有不同的作用和功能。

1. HTML标签：HTML标签是用来定义网页结构和内容的元素。它们包括诸如`<div>`、`<p>`、`<h1>`、`<a>`等等。HTML标签用于创建页面的基本结构，它们定义了不同元素的类型和层次关系，如段落、标题、链接等。HTML标签通常没有直接的样式信息，它们主要用于组织和描述文档内容。

2. CSS选择器：CSS（层叠样式表）的选择器用于选择HTML元素，并为这些元素定义样式规则。CSS选择器允许你选择特定的HTML元素或一组元素，然后为它们应用样式，如颜色、字体、大小、边距、背景等等。CSS选择器的目的是将样式与HTML内容分离，以便更好地控制和设计页面的外观。

虽然CSS选择器通常是基于HTML标签来选择元素的，但它们可以根据不同的属性、类名、ID等条件来选择元素。因此，HTML标签只是CSS选择器的一部分，而选择器的功能更加强大和灵活，可以根据各种条件选择HTML元素。

举个例子，如果你想为所有段落元素（`<p>`标签）应用样式，你可以使用CSS选择器来选择这些元素并定义样式规则，如下所示：

p {
  color: blue;
  font-size: 16px;
}

这里，`p`是CSS选择器，用于选择所有`<p>`标签，然后为它们定义样式规则。这样，所有段落元素都会以蓝色文本和16像素字体大小显示。

总之，HTML标签用于定义页面的结构和内容，而CSS选择器用于选择这些标签以及其他元素，并为它们定义样式。它们在网页开发中起到不同但互补的作用。