CSS基础入门

1.官方文档

1.CSS 指的是层叠样式表* (Cascading Style Sheets)

2.地址: https://www.w3school.com.cn/css/index.asp

2.为什么需要 CSS

1.在没有 CSS 之前，我们想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，费心费力。所以 CSS 就出现了。

2.使用 CSS 将 HTML 页面的内容与样式分离提高 web 开发的工作效率(针对前端开发)

3.CSS 可以让 html 元素(内容) + 样式(CSS)分离，更好的控制页面

3.CSS快速入门

1.应用实例 simple_css.html, 使用 css 完成下面页面

需求: 创建simple_css.html 完成如下网页显示

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 快速入门title>

    
    <style type="text/css">
        div{
            width: 300px;
            height: 100px;
            background-color: aquamarine;
        }

    style>
head>
<body>
<div>hello, 北京div>
<br/>
<div>hello, 上海div>
<br/>
<div>hello, 天津div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

4.CSS 语法

1.CSS 语法可以分为两部分： (1)选择器 (2)声明

2.声明由属性和值组成，多个声明之间用分号分隔

3.说明：最后一条声明可以不加分号(建议加上)

4.一般每行只描述一个属性

5.CSS 注释：/*注释内容*/, 类似 java

5.常用样式-字体颜色

1.介绍

颜色可以写颜色名比如 green，也可以写 rgb 值(三原色) 比如 rgb(200,200,200)和十六进制表示
值比如 #708090

2.应用实例 color.html

1.修改 color.hml, 完成如下页面.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色title>
    <style type="text/css">
        /*
            说明:
            颜色可以写颜色名 比如 green，
            也可以写 rgb 值 比如 rgb(200,200,200)
            和十六进制表示值 比如 #708090
            color: rgb(255, 222, 1); //color: #ff7d44; //color: red;
         */
        div {
            /*有三种方式，指定颜色
                1. 英文
                2. 16进制 #ff7d44 [使用最多]
                3. 三原色 rgb(1,1,1)
            */
            color: #ff7d44;
        }
    style>
head>
<body>
<div>css 颜色字体div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

6.常用样式-边框 border

1.应用实例 border.html

1.修改 border.html, 完成如下页面.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框title>
    <style type="text/css">
        div {
            /*具体的像素*/
            width: 300px; 
            height: 100px;
            /*border表示边框 dashed表示虚线 blue表示蓝色*/
            border: 1px dashed blue;
        }
    style>
head>
<body>
<div>css borderdiv>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

7.常用样式-宽度 width/高度 height

1.介绍

宽度/高度像素值：100px；也可以是百分比值：50%；

2.应用实例，看前面案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框title>
    <style type="text/css">
        div {
            /*width: 300px; 具体的像素*/
            width: 50%; /*百分比*/
            height: 100px;
            /*border表示边框 dashed表示虚线 blue表示蓝色*/
            border: 1px dashed blue;
        }
    style>
head>
<body>
<div>css borderdiv>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

8.常用样式-背景颜色

1.应用实例 bg.html

1.需求: 编写代码，修改 bg.html 显示如下网页.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: #ff7d44;
        }
    style>
head>
<body>
<div>css backgroundcolordiv>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

9.常用样式-字体样式

1.介绍

font-size: 指定大小，可以按照像素大小
font-weight : 指定是否粗体
font-family : 指定类型

2.应用实例 font-style.html

需求, 修改 font-sytle.html , 显示如下网页

代码实现

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小，可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 华文新魏;
        }
    style>
head>
<body>
<div>css 字体样式div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

10.常用样式-DIV 居中

1.应用实例 div-center.html

需求，修改 div-center.html, div 居中效果

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中显示title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小，可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型,前提是电脑上安装有响应的字体
            4. margin-left margin-right 如果设置为auto, 表示左右居中
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 微软雅黑;
            margin-left: auto;
            margin-right: auto;
        }
    style>
head>
<body>
<div>css 字体样式 div居中显示div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

11.常用样式-文本居中

1.应用实例 text-center.html

1.需求，修改 text-center.html , 显示如下网页

2.代码实现

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本居中显示title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小，可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
            4. margin-left margin-right 如果设置为auto, 表示左右居中
            5. text-align: center 表示文本居中
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 华文新魏;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    style>
head>
<body>
<div>文本内容居中显示div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

12.常用样式-超链接去下划线

1.应用实例 link_none.html

1.需求，修改 link_none.html, div 居中效果

2.代码实现

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接去掉下划线title>
    
    <style type="text/css">
        a {
            text-decoration: none;
        }
    style>
head>
<body>
<a href="http://www.baidu.com">点击到百度a>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

13.常用样式-表格细线

1.应用实例 table-collapse.html

1.需求，修改 table-collapse.html, 实现如下效果

2.代码实现

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格细线title>
    <style type="text/css">
        /*
        	table, tr, td组合选择器
            设置边框 : border: 1px solid black
            将边框合并: border-collapse: collapse;
            指定宽度： width
            设置边框： 给 td, th 指定即可 border: 1px solid black;

            说明
            1. table, tr, td 表示组合选择器
            2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性·
         */
        table, tr, td {
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    style>
head>
<body>
<table>
    <tr>
        
        <td align=center colspan="3">星期一菜谱td>
    tr>

    <tr>
        
        <td rowspan=2>素菜td>
        <td>青草茄子td>
        <td>花椒扁豆td>
    tr>
    <tr>
        <td>小葱豆腐td>
        <td>炒白菜td>
    tr>
    <tr>
        <td rowspan=2>荤菜td>
        <td>油闷大虾td>
        <td>海参鱼翅td>
    tr>
    <tr>
        <td>红烧肉td>
        <td>烤全羊td>
    tr>
table>

body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

14.常用样式-列表去修饰

1.应用实例 ul-none.html

1.需求，修改 ul_none.html, 完成如下网页显示

2.代码实现

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表去修饰title>
    <style type="text/css">
        ul {
            /*说明:list-style:none表示去掉默认的修饰*/
            list-style: none;
        }
    style>
head>
<body>
<ul>
    <li>三国演义li>
    <li>红楼梦li>
    <li>西游记li>
    <li>水浒传li>
ul>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

15.CSS 使用三种方式

1.方式 1：在标签的 style 属性上设置 CSS 样式

1.应用实例修改 1.use-css-style.html , 看使用效果

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在标签的 style 属性上设置CSS样式title>
head>
<body>
<div style="width: 300px;height: 100px;background-color: red">hello, 北京div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 上海div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 天津div>
<br/>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

问题分析

标签多了。样式多了，代码量庞大
可读性差
CSS 代码没有复用性

2.方式 2：在 head 标签中，使用 style 标签来定义需要的 CSS 样式

1.应用实例修改 2.use-css-style.html , 看使用效果

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在 head 标签中，使用 style 标签来定义需要的 CSS 样式title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: beige;
        }
        span {
            border: 1px solid red;
        }
    style>
head>
<body>
<div>hello, 北京div>
<br/>
<div>hello, 上海div>
<br/>
<span>hello, spanspan>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

问题分析

只能在同一页面内复用代码维护不方便，
实际项目中会有很多页面，需要到对应页面去修改。工作量大

3.方式 3：把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入

1.应用实例创建 test.css 和修改 3.use-css-style.html , 演示使用

div {
    width: 200px;
    height: 100px;
    background-color: red;
}
span {
    border: 2px dashed blue;
}
1
2
3
4
5
6
7
8

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入外部的css文件title>
    
    <link rel="stylesheet" href="./css/my.css" />
head>
<body>
<div>hello, 北京~div>
<br/>
<div>hello, 上海div>
<br/>
<span>hello, spanspan>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.第三种方式是我们推荐使用的.

16.CSS 选择器

1.CSS 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
CSS 元素/标签选择器通常是某个 HTML 元素，比如 p、h1、a div 等
比如:

应用实例修改 element-selector.html

2.ID 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
比如:

应用实例修改 id-selector.html, 演示使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id 选择器title>
    
    <style type="text/css">
        #llp {
            color: gold;
        }
        #css2 {
            color: green;
        }
    style>
head>
<body>
<h1 id="llp">llph1>
<p id="css2">hello, world~p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3.class 选择器（类选择器）

class 类选择器，可以通过 class 属性选择去使用这个样式
基本语法

应用实例修改 class-selector.html,演示如何使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器title>
    
    <style type="text/css">
        .css1 {
            color: red;
        }
        .css2 {
            color: sandybrown;
        }
    style>
head>
<body>
<div class="css1">llpdiv>
<div class="css1">llp1110div>
<p class="css2">hello, world~p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

4.组合选择器

组合选择器可以让多个选择器共用同一个 css 样式代码
语法格式

应用实例修改 all-selector.html, 演示如何使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        /*
        组合选择器的基本语法:
        选择器 1，选择器 2，选择器 n{ 属性：值; }
        */
        .class01,#id01 {
            width: 300px;
            height: 100px;
            border: 2px solid red;
        }
    style>
head>
<body>
<div class="class01">llp1110div>
<p id="id01">hello, world~p>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5.优先级说明

行内样式 > ID 选择器 > class 选择器 > 元素选择器

相关阅读:
vite+vue3+ts项目搭建之集成Layout组件搭建、全局自动注册基础组件、缓存页面
 【Unity3D】Unity 组件 ④ ( 摄像机 | 调整摄像机 | 手工调整 | 3D 视图对齐 Align with View 调整摄像机 )
数据库高阶语句
 五、vue组件与props自定义属性
 前后端都用得上的 Nginx 日常使用经验
 【rust工具链】
cf edu #135 Div.2(A~C)
HTTPS 之fiddler抓包--jmeter请求
 CSDN文章复制没有图片只有文字
 SD-WAN NFV uCPE VNF
原文地址：https://blog.csdn.net/qq_44981526/article/details/127920132