CSS基础_Day01

CSS基础

一、CSS简介

CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式。
CSS 的选择器区分大小写，因此要谨慎使用大写。
可以设置以下内容：
颜色 color、背景 background、字体 font、位置position、显示 display、边框 border、内边距 padding、外边距 margin、行高 line-height、装饰 text-decoration、过渡 transtion、变化 transform、动画 animation
使用 CSS 样式主要有三种方式：

• 内联样式——你可以直接在 HTML 元素里使用style属性。
• 内部样式——你可以在style标签里面声明样式规则。
• 外部样式——你可以创建一个.css文件，然后在文件中编写样式规则，最后在文档中引用该文件。

尽管前两个方式也有人使用，但大部分开发人员更喜欢外部样式表，因为它可以将样式与元素分开，这提高了代码的可读性和重用性。
CSS 背后的思想是，通过选择器来定位 DOM（文档对象模型）的元素，然后将各种样式规则应用在元素上，从而改变元素在页面上的显示方式。

二、更改文本的颜色

通过修改元素的style属性的color值来改变文本颜色。

<h2 style="color: blue;">更改文本的颜色</h2>

行内style最好以;来结束。

三、使用元素选择器来设置元素的样式

行内样式可以修改h2元素的颜色为红色。

<h2 style="color: red;">h2红色</h2>

当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，层叠样式表往往是一个更好的选择。

在代码的顶部，创建一个style声明区域

<style>
</style>

在style样式声明区域内，可以创建一个元素选择器，应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：

<style>
  h2 {color: red;}
  //可以对某个元素设置样式
</style>

注意，在每个元素的样式声明区域里，左右花括号（{和 }）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。

四、使用 class 选择器设置单个元素的样式

CSS 的class具有可重用性，可应用于各种 HTML 元素。

<style>
  .blue-text {
    color: blue;
  }
</style>

在<style>样式声明区域里，创建了一个名为blue-text的class选择器。
可以将 CSSclass选择器应用到一个HTML元素里。

<h2 class="blue-text">class选择器</h2>

注意：在style样式区域声明里，class需以.开头。而在 HTML 元素里，class属性的前面不能添加.。

五、使用 class 选择器设置多个元素的样式

通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。
如果有多个p元素，加class就有CSS样式，不加就没有。

谢谢你的坚持阅读ovo哟，让我们一起加油吖