【前端】CSS 基础

> 作者：დ旧言~
> 座右铭：松树千年终是朽，槿花一日自为荣。

> 目标：了解 CSS 基础语法。

> 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安!

> 专栏选自：前端基础知识_დ旧言~的博客-CSDN博客

> 望小伙伴们点赞👍收藏✨加关注哟💕💕

一、CSS是什么

概念：

CSS(Cascading Style Sheet)：样式层叠器，用于控制页面表现，简单来说就是用于美化页面的效果。

1.1、语法规则

使用：

选择器 {
 
	属性名1：属性值1;
	属性名2：属性值2;
	...  ...
}

说明：

冒号后面带空格。
选择器和 { 之间也有一个空格。
css 不区分大小写，开发时统一使用小写。
每一对属性需要使用；隔开，最后一对属性可以不加。
CSS注释的格式，也可以通过 ctrl + / 快速注释

1.2、引入方式

1.2.1、内部样式表

概念：

内部样式表是写在当前编辑的 html 中的 style 标签内，理论上来说 style 标签可以放到 html 的任意位置，但我们一般都是习惯放到 head 标签中。其中 p { } 表示选择器。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国漫之光</title>
    <!-- style标签里面写的是CSS代码 -->
    <style>
        p {
            /* 设置字体大小 */
            font-size: 50px;
            /* 设置字体颜色 */
            color: green;
        }
    </style>
</head>
<body>
    <!-- <div style="color: red;font-size: 20px;">welcome to the world</div> -->
    <p>
        welcome to the world
    </p>
</body>
</html>

1.2.2、行内样式表

概念：

行内样式表是通过 style 属性，来直接指定某个标签的样式。

<body>
    <p style="color: red; font-size: larger;">welcome to the world </p>
</body>

细节说明：

行内样式表的优先级更高。

1.2.3、外部样式

使用说明：

创建一个 css 文件，在 css 文件中，编辑样式。
在 html 文件中，使用 link 标签，并通过路径引入 css 文件。

举个栗子：

解释说明：

stylesheet 值：说明浏览器链接的资源是一个 CSS 样式表,用于为文档提供样式。通过这种方式,你可以将 CSS 样式与 HTML 文档分离,使代码更易于维护和管理。
href="demo1.css" ：是指定外部样式表的 URL 地址,它告诉浏览器从何处加载 CSS 文件。
CSS 文件名为 "demo1.css"：通常与 HTML 文件位于同一目录中。

二、CSS 基础选择器

2.1、基础选择器

类型如下：

元素选择器
类选择器
id 选择器
通配符选择器

2.1.1、元素选择器

语法 :

标签名{}

作用 : 选中对应标签中的内容

能快速将同一类型的标签都选择出来
但是不能差异化

举个栗子：

<head>
    <style>
        /* 标签选择器 */
        div {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div>world</div>
    <div>nihao</div>
</body>

2.1.2、类选择器

语法：class属性值{}

类名用 . 开头
通过类属性来指定元素样式，一个标签可以有多个类名
可以让多个标签都使用一个类

作用 :

选中对应class属性值的元素。

举个栗子：

<head>
    <style>
        /* 类选择器 */
        .one {
            color: green;
        }
        .two {
            font-size: 70px;
        }
    </style>
</head>
<body>
    <!-- 一个类选择器可以被多个标签来引用，一个标签也可以引用多个类选择器 -->
    <div class="one">hello</div>
    <div>world</div>
    <div class="one two">nihao</div>
</body>

2.1.3、id选择器

语法：#id属性值{}

以 #开头表示 id选择器。
id 值是唯一的，只能有一个，就像身份证号一样。

作用：

选中对应id属性值的元素

举个栗子：

<head>
    <style>
        /* id选择器 */
        #world {
            color:rgb(225, 0, 255);
            font-size: 70px;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div id="world">world</div>
    <div>nihao</div>
</body>

注意：

id的属性值只能给1个,可以重复利用,不能以数字开头。

2.1.4、通配符选择器

语法：

*{}

作用：

让页面中所有的标签执行该样式,通常用来清除间距。

举个栗子：

    <style>
        /* 通配符选择器 */
        * {
            color: red;
        }
    </style>

基础选择器总结：

2.2、复合选择器

2.2.1、后代选择器

框架如下：

元素1 元素2 {
 
	设置样式	
	
}

注意：

只对元素2 进行设置样式，不影响元素1
元素1 是父级，元素2 可以是子级，或孙子级，或重孙子级…
元素1 和元素2 可以是标签选择器、类选择器、id 选择器…

举个栗子：

2.2.2、子选择器

框架如下：

元素1>元素2 { 样式声明 }

使用大于号分割
只选儿子 , 不选孙子元素

举个栗子：

<head>
    <style>
        /* 子选择器  对孙子不生效*/
        ol>a {
            color: green;
        }
    </style>
</head>
<body>
    <ol>
        <li><a href="#">张三</a></li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

2.2.3、并集选择器

框架如下：

元素1, 元素2 { 样式声明 }

举个栗子：

<head>
    <style>
        /* 并集选择器 */
        ol li,ul li {
            color:red
        }
    </style>
</head>
<body>
    <ul>
        <li>张三</li>
    </ul>
 
    <ol>
        <li><a href="#">张三</a></li>
        <li>李四</li>
    </ol>
</body>

2.2.4、伪类选择器

举个栗子：

<head>
    <style>
        /* 伪类选择器 - 鼠标悬停的效果 */
        div:hover {
            color: green;
        }
        /* 伪类选择器 - 鼠标按下的效果 */
        div:active {
            color:blue
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>

2.3.5、复合选择器总结

2.3.6、选择器优先级

三、常见元素属性

3.1、字体属性

举例说明：

<head>
    <style>
        div {
            /* 字体大小 */
            font-size: 100px;
 
            /* 字体颜色 */
            color: red;
 
            /* 字体粗细 */
            font-weight: lighter; 
            font-weight: normal;
            font-weight: bold;
            font-weight: bolder;
 
            /* 字体属性 */
            font-family: 宋体;
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>

字体样式：

    <style>
        /* 取消倾斜 */
        div {
            font-style: normal;
        }
        /* 设置倾斜 */
        div {
            font-style: italic;
        }
    </style>

3.2、文本属性

3.2.1、设置文本颜色

举例说明：

<head>
    <style>
        div {
            color: red;
            color: #00ff00;
            color: rgb(0, 0, 255);
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>

color 属性值的三种写法：

预定义的颜色值 (单词)
[ 最常用 ] 十六进制形式
RGB 方式

认识 RGB：

我们使用 R (red), G (green), B (blue) 的方式表示颜色 ( 色光三原色 ). 三种颜色按照不同的比例搭配 , 就能混合出各种五彩斑斓的效果.
计算机中针对 R, G, B 三个分量 , 分别使用一个字节表示 (8 个比特位 , 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大 , 表示该分量的颜色就越浓 . 255, 255, 255 就表示白色 ; 0, 0, 0 就表示黑色

3.2.2、文本水平对齐

属性说明：

text-align属性主要用于设置文本的水平对齐方式。
这个属性只对行内元素和文本内容生效。对于块级元素，它不会改变其对齐方式，但是会影响其内部的文本内容和行内元素的对齐方式。
如果想让块级元素居中显示，常见的做法是使用margin: 0 auto;（前提是已设定了该块级元素的宽度）

举个栗子：

    <style>
        div {
            /* 居中对齐、左对齐、右对齐 */
            text-align: center;
            text-align: left;
            text-align: right;
        }
    </style>

3.2.3、文本修饰

text-decoration 属性：

允许对文本设置某种效果，如加下划线。

四个取值的效果：

underline 下划线 . [ 常用 ]
none 啥都没有 . 可以给 a 标签去掉下划线
overline 上划线 . [ 不常用 ]
line-through 删除线 [ 不常用 ]

3.2.4、文本缩进

使用框架：

text-indent: [值];

单位可以使用 px 或者 em，一个文字大小就是 1em。

举个栗子：

    <style>
        div {
            /* 首行缩进两个字 */
           text-indent: 2em;
        }
    </style>

3.2.5、行高

使用框架：

line-height: [值];

举个栗子：

    <style>
        div {
           line-height: 50px;
           /* 行高也可以取 normal 等值.这个取决于浏览器的实现. chrome 上 normal 为 21 px */
           line-height: normal;
        }
    </style>

3.3、列表样式

CSS 列表属性用于定义 HTML 常见列表的样式：

3.4、表格样式

CSS表格属性用于定义HTML表格的样式：

四、背景属性

背景属性：

举个栗子：

    <style>
        div {
            /* 背景颜色 可设置的值和文本颜色差不多*/
            background-color: grey;
 
            /* 背景图片 */
            background-image: url(image/female.png);
 
            /* 背景平铺 */
            background-repeat: no-repeat;
 
            /* 背景位置 水平居中，顶部对齐 */
            background-position: center top;
 
            /* 背景尺寸 */
            background-size: contain;
        }
    </style>

背景颜色 (background-color)：

设置的值和文本颜色差不多，默认情况下是 transparent（透明）的

背景图片（background-image）：

比 image 更方便控制位置，url 里可以放相对路径、绝对路径，网络路径

背景平铺（background-repeat）：

重要的四个取值，repeat（平铺），no-repeat（不平铺），repeat-x（水平平铺），repeat-y（垂直平铺）。默认情况下是 repeat。

背景位置（background-position）：

背景尺寸（ background-size）：

可以填具体数值，例如：50px，还可以是使用 cover（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域）和 contain（把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域. ）

背景图固定：

五、边框圆角矩形

概念：

使用说明：

通过 border-radius 使边框带圆角效果. 
基本用法：border-radius: length;

举个栗子：

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: grey;
        border: 2px solid green;
        /* 圆角矩形 */
        border-radius: 10px;
        /* 将 border-radius 的值设为正方形边长的一半就可以变为圆形 */
    }
</style>

六、元素的显示模式

常见的块级元素：

<div>：用于将内容分组或创建一个块状区域，通常用于布局和样式控制。
<p>：表示段落，用于展示文本段落。
<h1> 到 <h6>：表示标题，级别从最高到最低。
<ul>：表示无序列表，用于显示项目列表，每个项目前没有特定的顺序。
<ol>：表示有序列表，用于显示项目列表，每个项目前有序号。
<li>：表示列表项，在无序列表或有序列表中使用。
<table>：表示表格，用于展示有结构的数据。
<blockquote>：表示长引用，用于引用长篇文本。
<address>：表示联系信息，通常用于在文章底部提供联系方式。
<form>：表示表单，用于收集用户输入。
<hr>：表示水平分割线，用于在内容间添加分隔线。

特点：

独占一行
高度, 宽度, 内外边距, 行高都可以控制
宽度默认是父级元素宽度的 100% ( 和父元素一样宽 )
是一个容器 ( 盒子 ), 里面可以放行内和块级元素 .

注意：

文字类的元素内不能使用块级元素
p 标签主要用于存放文字 , 内部不能放块级元素 , 尤其是 div

常见的行内元素包括：

<span>：用于为文本或其他内联内容添加样式或标记。
<a>：创建超链接，使用户能够点击导航到其他页面或资源。
<strong>：表示文本的重要性，通常以加粗的形式显示。
<em>：表示文本的强调，通常以斜体的形式显示。
<abbr>：表示缩写或首字母缩略词。
<code>：用于显示计算机代码。
<cite>：表示引用的作品的标题。
<time>：表示日期和时间。

特点：

一行显示多个
宽度和高度默认由内容撑开
不可以设置宽度和高度

常见的行内块元素包括：

<span>：用于为文本或其他内联内容添加样式或标记。
<a>：创建超链接，使用户能够点击导航到其他页面或资源。
<strong>：表示文本的重要性，通常以加粗的形式显示。
<em>：表示文本的强调，通常以斜体的形式显示。
<abbr>：表示缩写或首字母缩略词。
<code>：用于显示计算机代码。
<cite>：表示引用的作品的标题。
<time>：表示日期和时间。

特点：

一行显示多个
可以设置宽度和高度

行内元素和块级元素区别：

块级元素独占一行 , 行内元素不独占一行
块级元素，高度、宽度、内外边距、行高，都是可以控制的，
行内元素，设置高度、宽度、行高，都是无效的，设置内边距有效，设置外边距，左右外边距有效，上下外边距无效。

改变显示模式(块级元素转换)：

display: block 改成块级元素 [常用]
display: inline-block 改成行内块元素 [常用]
display: inline 改成行内元素 [很少用]

七、CSS盒子模型

7.1、边框(border)

使用说明：

边框粗细 : border-width
边框样式: border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框
边框颜色: border-color

举个栗子：

div {
    width: 500px;
    height: 250px;
    border-width: 10px;
    border-style: solid;
    border-color: green; 
}
 
 
div {
    /* 支持简写 */
    border: 1px solid red;
}

7.2、设置边框不撑大盒子

可以通过设置 box-sizing: border-box，使边框不再撑大盒子，默认情况是 content-box.

7.3、内边距 (padding)

概念：

内边距会撑大盒子,可以通过设置 box-sizing: border-box，使边框不再撑大盒子

举例说明：

7.4、外边距 (margin)

使用说明：

控制盒子和盒子之间的距离 . 外边距和内边距类似，也是可以四个方向分别设置；也是可以写作，1个数字，2个数字，4个数字...规则和 padding 完全一致,外边距不会撑大盒子.

举个栗子：

div {
    height: 50px;
    width: 50px;
    margin-top: 5px;
    margin-left: 10px; 
    
    /* 先设置上下，，再设置左右 */
    margin: 20px,40px;
    /* 顺时针设置，上、右、下、左 */
    margin: 20px,40px,20px,40px;
}

外边距要注意的细节：

7.5、块级元素水平居中

说明：

前提要指定宽度才能生效 ( 如果不指定宽度 , 默认和父元素一致 )
当我们说“让块级元素居中显示”并使用margin: 0 auto;时，我们实际上是在让整个块级元素在其父容器中水平居中。这并不会影响块级元素内部的内容如何对齐。

框架：

// 三种写法等价
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：

这个水平居中的方式和 text-align 不一样.
margin: 0 auto;（需要明确的宽度）会使整个块级元素在其父容器中水平居中。
text-align: center;会使块级元素内部的行内元素和文本内容水平居中对齐。
对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式

7.6、清除默认样式

7.7、盒子模型-元素溢出

八、结束语

今天内容就到这里啦，时间过得很快，大家沉下心来好好学习，会有一定的收获的，大家多多坚持，嘻嘻，成功路上注定孤独，因为坚持的人不多。那请大家举起自己的小手给博主一键三连，有你们的支持是我最大的动力💞💞💞，回见。