CSS入门知识

HTML全称超文本标记语言（HyperText Markup Language），用于构建网页的结构和内容。它通过一系列标签来定义网页中的各种元素，如标题、段落、链接、图像等，这些标签通过浏览器解析并显示为可视化的网页内容。
CSS全称层叠样式表（Cascading Style Sheets），用于设置网页的样式和布局，包括颜色、字体、间距、边框、背景等视觉效果，以及元素的位置和排列方式。它通过选择器定位HTML文档中的元素，并应用一系列属性来改变这些元素的外观。CSS可以单独存储在一个文件中，也可以直接嵌入到HTML文件中。

2、关系

分工合作：HTML负责构建网页的基本结构，提供内容框架；CSS则负责美化这些结构，使其更具吸引力和可读性。
相互依赖：HTML中的元素是CSS选择器定位和应用样式的对象；CSS的样式规则依赖于HTML元素的存在才能发挥作用。
共同构建网页：首先使用HTML定义页面的基本骨架，然后通过CSS添加样式和布局，最后通过JavaScript实现页面的交互功能。这种分工合作确保了网页既具有丰富的表现力，又具有良好的结构和可维护性。

二、CSS的添加方式

1、行内样式（Inline Styles）

行内样式是直接在HTML标签中通过style属性添加CSS代码的方式。这种方式适用于单个元素的快速样式调整，但不推荐用于大规模项目，因为不利于代码复用和维护。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
 </head>
 <body>
     <p style="color: red">这是一个红色的段落。</p>
 </body>
 </html>

优点：修改方便快捷，作用范围精确到单个元素。
缺点：不利于代码复用，难以维护，不推荐大规模使用。

2、内部样式表（Internal Stylesheet）

内部样式表是将CSS代码嵌入到HTML文档的<head>部分，通过<style>标签定义样式规则。这种方式适用于单个页面的样式管理。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
     <style>
         p {
             color: blue;
             font-size: 18px;
         }
     </style>
 </head>
 <body>
     <p>这是一个蓝色的段落。</p>
 </body>
 </html>

优点：适用于单页面的样式管理，便于集中控制页面样式。
缺点：不适合大型项目，因为样式无法在多个页面间共享。

3、外部样式表（External Stylesheet）

外部样式表是将CSS代码写在一个单独的.css文件中，然后通过HTML文档中的<link>标签或@import标记引入。这种方式是目前最常用且推荐的方式，因为它支持代码复用和集中管理。

示例：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
     <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>
 <body>
     <p>这是一个绿色的段落。</p>
 </body>
 </html>

示例CSS文件（css/style.css）：

 p {
     color: green;
 }

优点：支持代码复用，便于维护和管理，适用于大型项目。
缺点：需要额外加载CSS文件，可能影响页面加载速度。

4、其他方式

除了上述三种主要方式外，CSS还可以通过以下方式使用：

@import：在CSS文件中使用@import规则导入其他样式表文件。但是这种方式已被废弃，不推荐使用。
CSS预处理器：如Sass、Less等，用于增强CSS的功能性和可维护性，但不属于基本使用方式。

三、CSS的选择器

CSS选择器是CSS的核心组成部分，用于精确地定位HTML文档中的元素，并为其应用样式。

1、基本选择器

（1）标签选择器

标签选择器是最基础的选择器类型，通过HTML标签名匹配元素。

 p {
   color: red;
 }

此代码将所有<p>标签内的文本颜色设置为红色。

（2）类选择器

类选择器以点（.）开头，用于匹配具有特定类名的元素。

 .highlight {
     background-color: yellow;
 }

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <p class="highlight">此段落有黄色背景</p>
     <p>此段落没有背景颜色</p>
 </body>
 </html>

此代码将所有带有class="highlight"的元素文本颜色设置为黄色。

（3）ID选择器

ID选择器以井号（#）开头，用于匹配具有特定ID的元素。

 #unique {
     font-weight: bold;
 }

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <p id="unique">此段落是黑体</p>
     <p>此段落不是</p>
 </body>
 </html>

此代码将ID为unique的元素文本设置为黑体。

（4）通用选择器

通用选择器使用星号（*），匹配页面中的所有元素。

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <h1>标题</h1>
     <p>段落</p>
     <div>
         <p>此段落位于 div 内。</p>
     </div>
 </body>
 </html>

在本例中，通用选择器被用来重置所有元素的margin和padding为0，并设置box-sizing为border-box，这意味着页面上所有元素的边距和内边距都将被清除，并且元素的宽度和高度将包括内边距和边框（但不包括外边距），这对于布局的一致性非常有用。

2、组合选择器

（1）后代选择器（Descendant Selector）

选择某个元素内部的所有指定后代元素。

 .container p {
     color: blue;
 }

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <div class="container">
         <p>这是container内的一个段落。</p>
         <div>
             <p>此段落位于container内的嵌套 div 内。</p>
         </div>
     </div>
     <p>此段落位于container之外。</p>
 </body>
 </html>

在本例中，所有在.container内部的<p>元素都会被选中，并将文本颜色设置为蓝色。

（2）子选择器（Child Selector）

选择某个元素的直接子元素。

 .container > p {
     color: red;
 }

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <div class="container">
         <p>这是container内的一个段落。</p>
         <div>
             <p>此段落位于container内的嵌套 div 内。</p>
         </div>
     </div>
     <p>此段落位于container之外。</p>
 </body>
 </html>

在本例中，只有直接作为.container子元素的<p>会被选中，并将文本颜色设置为红色，嵌套的<p>不会被选中。

（3）相邻兄弟选择器（Adjacent Sibling Selector）

选择紧接在另一个元素后的兄弟元素。

 h1 + p {
     font-weight: bold;
 }

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <h1>标题</h1>
     <p>此段落与h1相邻。</p>
     <p>此段落与h1不相邻。</p>
 </body>
 </html>

在本例中，只有紧接在<h1>元素后的第一个<p>元素会被选中，并将其字体加粗。

（4）一般兄弟选择器（General Sibling Selector）

选择在同一父元素下，位于另一个元素之后的所有兄弟元素。

 h1 ~ p {
     color: green;
 }

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>css</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 <div>
     <h1>标题</h1>
     <p>此段落是h1的同级。</p>
     <p>此段落也是h1的同级。</p>
 </div>
 </body>
 </html>

在本例中，所有在<h1>元素之后的<p>兄弟元素都会被选中，并将文本颜色设置为绿色。

3、属性选择器

属性选择器允许通过HTML元素的属性值进行匹配。

（1）单一属性选择器

 input[type="text"] {
   border: none;
 }

此代码将所有类型为text的<input>标签边框设置为无。

（2）属性值范围选择器

 a[href^="https"] {
   color: red;
 }

此代码将所有以https://开头的链接文本颜色设置为红色。

（3）属性包含选择器

 a[href*="example"] {
   color: blue;
 }

此代码将所有包含example的链接文本颜色设置为蓝色。

4、伪类和伪元素选择器

（1）常见伪类选择器

:hover：鼠标悬停时触发。
:active：鼠标点击时触发。
:focus：获得焦点时触发。
:nth-child(n)：根据位置关系匹配元素。

（2）常见伪元素选择器

::before：插入内容在元素内容之前。
::after：插入内容在元素内容之后。
::first-line：匹配元素的第一行文本。
::first-letter：匹配元素的第一个字母。

四、CSS的属性与值

在CSS中，每个选择器后面跟着一对花括号{}，在花括号内写上要设置的属性和值。例如：p { color: blue; font-size: 16px; }。其中，“color”和“font-size”是属性，“blue”和“16px”是值。

常见的CSS属性包括：

字体属性：font-size（字体大小）、font-weight（字体粗细）、font-family（字体族）等。
文本属性：color（文本颜色）、text-align（文本对齐方式）、line-height（行高）等。
盒模型属性：width（宽度）、height（高度）、padding（内边距）、border（边框）、margin（外边距）等。
定位属性：position（定位方式）、top、right、bottom、left（定位偏移）等。
显示属性：display（元素显示方式）等。

五、CSS的优先级与层叠性

当多个CSS规则应用于同一个HTML元素时，最终应用的样式取决于选择器的优先级。优先级可以理解为一个计分系统，分数越高，优先级越高。计算优先级时，可以将选择器的优先级表示为四个数字（a, b, c, d）：

a：如果使用了!important，则a=1，否则a=0。
b：ID选择器的数量。
c：类选择器、属性选择器和伪类的数量。
d：元素选择器和伪元素的数量。

比较两个选择器的优先级时，从左到右依次比较a、b、c、d的值。哪个数字先出现更大的值，哪个选择器的优先级就更高。

CSS的层叠性（Cascading）允许多个样式表同时应用于一个HTML文档。当多个样式表定义了相同的样式规则时，浏览器会根据优先级规则来决定最终应用的样式。