入门CSS

CSS简介

1.什么是 CSS？

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

CSS 语法

CSS（层叠样式表）用于设置HTML页面中元素的样式，其语法主要包括以下几个部分：

1.选择器

选择器用于选择页面中的元素，以便为其应用样式。常见的选择器类型有：

元素选择器：直接使用元素名称，如p选择页面中所有的<p>元素。
类选择器：以.开头，如.my-class选择页面中所有class="my-class"的元素。
ID选择器:以#开头，如#my-id选择页面中id="my-id"的元素。
属性选择器:以[attribute]形式，如[type="text"]选择所有type属性值为text的元素。
伪类选择器:以:开头，如:hover选择鼠标悬停的元素，:nth-child(n)选择其父元素的第n个子元素等。
伪元素选择器:以:before在元素内容前插入内容，::after在元素内容后插入内容等。
组合选择器:可以将多个选择器组合使用，如div p选择<div>元素内的所有<p>元素，.class1.class2选择同时具有class1和class2类的元素等。

2.声明器

选择器后面跟着一个花括号{}，里面包含一个或多个声明，用于定义元素的样式。每个声明由属性和值组成，属性和值之间用英文冒号:分隔，每个声明之间用英文分号;分隔。例如：

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

示例:

/* 选择所有段落元素，设置字体颜色为红色，字体大小为16px */
p {
    color: red;
    font-size: 16px;
}

/* 选择id为"header"的元素，设置背景颜色为蓝色，文字颜色为白色 */
#header {
    background-color: blue;
    color: white;
}

/* 选择类名为"highlight"的元素，鼠标悬停时设置背景颜色为黄色 */
.highlight:hover {
    background-color: yellow;
}

/* 选择所有input元素，且type属性值为"text"，设置边框为1px实线黑色 */
input[type="text"] {
    border: 1px solid black;
}

CSS的语法简洁而强大，通过合理使用选择器和声明块，可以灵活地为HTML页面中的元素设置各种样式。

CSS 样式

有三种主要的插入CSS样式表的方法，分别是内联样式、内部样式表和外部样式表。以下是详细介绍：

1. 内联样式（Inline CSS）

定义:直接在HTML元素的标签中使用style属性来添加CSS样式。
使用方法:在元素标签中添加style="样式规则"，样式规则中包含属性和值，属性和值之间用英文冒号分隔，多个样式规则之间用英文分号分隔。例如：

1	<p style="color: red; font-size: 16px;">这是一段红色的文本，字体大小为16px。</p>

特点:

优点：可以直接在元素上应用样式，对于单个元素的样式修改非常方便，可以快速看到效果。
缺点：样式与结构混合，违反了CSS与HTML分离的原则，不利于维护和重用。当需要对多个元素应用相同的样式时，代码会变得冗余。

2. 内部样式表（Internal CSS）

定义:在HTML文档的<head>部分使用<style>标签来定义CSS样式。
使用方法:在<head>标签内添加<style>标签，在<style>标签内编写CSS选择器和对应的样式规则。例如：

<head>
    <style>
        p {
            color: blue;
            font-size: 14px;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>这是一段蓝色的文本，字体大小为14px。</p>
    <div class="highlight">这是一个黄色背景的div。</div>
</body>

特点:

优点：样式与HTML结构在同一文件中，方便查看和修改，适用于单个页面的样式定义。可以避免内联样式带来的代码冗余问题。
缺点：样式仍然局限于单个HTML文件，不利于多个页面之间的样式共享和维护。当网站包含多个页面时，每个页面都需要重复编写相同的样式代码。

3. 外部样式表（External CSS）

定义:将CSS样式写在一个单独的.css文件中，然后在HTML文档中通过<link>标签引入该样式表。
使用方法:首先创建一个CSS文件（如styles.css），在其中编写CSS样式规则。然后在HTML文档的<head>部分使用<link>标签引入该CSS文件。例如：

styles.css文件内容：

body {
    font-family: Arial, sans-serif;
}
p {
    color: green;
    font-size: 18px;
}
#header {
    background-color: #333;
    color: white;
}

HTML文件内容：

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="header">这是页面头部。</div>
    <p>这是一段绿色的文本，字体大小为18px。</p>
</body>

特点:

优点：实现了CSS与HTML的完全分离，符合Web开发的最佳实践。样式文件可以被多个HTML页面共享，便于维护和更新。当需要修改样式时，只需修改一个CSS文件，所有引用该文件的页面都会自动更新样式。
缺点：需要额外的文件管理，对于非常简单的页面或临时的样式修改，可能会显得有些繁琐。

样式优先级

当同时使用以上三种方法时，样式的优先级从高到低依次为：内联样式 > 内部样式表 > 外部样式表。此外，还可以通过使用!important规则来提高某个样式规则的优先级，但应谨慎使用，因为它可能会导致样式难以维护。例如：

/*这会使<p>元素的文本颜色无论如何都显示为红色，即使有其他更高优先级的样式规则存在。*/
p {
    color: red !important; 
}