CSS基础

文章目录

[一基础认知](#一基础认知)
- [1.1 CSS初识](#1.1 CSS初识)
- - [1.1.1 CSS介绍](#1.1.1 CSS介绍)
  - [1.1.2 CSS语法规则](#1.1.2 CSS语法规则)
- [1.2 CSS引入样式](#1.2 CSS引入样式)
- - [1.2.1 CSS引入方式](#1.2.1 CSS引入方式)
  - [1.2.2 CSS小结](#1.2.2 CSS小结)
[二基础选择器](#二基础选择器)
- [2.1 标签选择器](#2.1 标签选择器)
- [2.2 类选择器](#2.2 类选择器)
- [2.3 id选择器](#2.3 id选择器)
- [2.4 通配符选择器](#2.4 通配符选择器)
[三字体和文本样式](#三字体和文本样式)
- [3.1 文字](#3.1 文字)
- - [3.1.1 字体大小](#3.1.1 字体大小)
  - [3.1.2 字体粗细](#3.1.2 字体粗细)
  - [3.1.3 是否倾斜](#3.1.3 是否倾斜)
  - [3.1.4 字体系列](#3.1.4 字体系列)
  - [3.1.5 样式折叠问题](#3.1.5 样式折叠问题)
  - [3.1.6 字体相关属性font的连写](#3.1.6 字体相关属性font的连写)
- [3.2 文本样式](#3.2 文本样式)
- - [3.2.1 文本缩进：text-indent](#3.2.1 文本缩进：text-indent)
  - [3.2.2 文本水平对齐方式：text-align](#3.2.2 文本水平对齐方式：text-align)
  - [3.2.3 文本修饰：text-decoratio](#3.2.3 文本修饰：text-decoratio)
- [3.3 line-height行高](#3.3 line-height行高)
- [3.4 拓展颜色常见取值](#3.4 拓展颜色常见取值)
- [3.5 拓展水平居中](#3.5 拓展水平居中)
[四综合案例](#四综合案例)
- [4.1 新闻](#4.1 新闻)

一基础认知

1.1 CSS初识

1.1.1 CSS介绍

1.1.2 CSS语法规则

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* css注释 */
        /* 这里写css */
        /* 选择器{} */
        /* 选择器：查找标签 */
        p{
            /* 文字颜色 */
            color: red;
            /* 字变大,像素px */
            font-size: 30px;
            /* 背景颜色 */
            background-color: aqua;
            /* width,height */
            width: 400px;
            height: 150px;
        }
    </style>

</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

1.2 CSS引入样式

1.2.1 CSS引入方式

外联式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 关系为样式表 href：路径 -->
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p>这是p标签</p>
</body>
</html>

css 复制代码

/* 选择器{} */
p{
    color: aqua;
}

行内式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 关系为样式表 href：路径 -->
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p>这是p标签</p>
    <div style="color: red;">这是div标签</div>
</body>
</html>

1.2.2 CSS小结

二基础选择器

2.1 标签选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{} */
        /* 标签选择器就是以标签命名的选择器 */
        p{
            color: red;
        }
        /* 标签选择器:选中所有的这个标签都生效 */
    </style>
</head>
<body>
    <p>pppppppppppp</p>
    <p>lll</p>
</body>
</html>

2.2 类选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            color: aqua;
        }

        .p2{
            color: red;
        }

        .size{
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 一个标签可以使用多个类名，用空格隔开即可 -->
    <p class="p1 size">123</p>
    <p class="p2">666</p>
</body>
</html>

2.3 id选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #two{
            color: aqua;
            font-size: 66px;
        }
    </style>
</head>
<body>
    <div id="two">666</div>
</body>
</html>

2.4 通配符选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <div>444</div>
    <p>6666</p>
    <h1>9999</h1>
</body>
</html>

三字体和文本样式

3.1 文字

3.1.1 字体大小

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 60px;
        }
    </style>
</head>
<body>
    <p>段落文字</p>
</body>
</html>

3.1.2 字体粗细

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-weight: 700;
        }

        h1{
            font-weight: 100;
            color: aqua;
        }
    </style>
</head>
<body>
    <div>这是div</div>
    <h1>标题</h1>
</body>
</html>

3.1.3 是否倾斜

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-style: italic;
            color: aqua;
        }

        em{
            font-style: normal;
        }
    </style>
</head>
<body>
    <div>倾斜</div>
    <em>倾斜</em>
</body>
</html>

3.1.4 字体系列

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* font-family: 宋体; */
            /* 如果用户电脑内有安装微软雅黑，就使用黑体显示字体 */
            /* 如果电脑没有安装黑体，就按照任意一种非衬线字体系列显示 */
            font-family: 微软雅黑,黑体,sans-serif;
        }
    </style>
</head>
<body>
    <div>字体</div>
</body>
</html>

3.1.5 样式折叠问题

3.1.6 字体相关属性font的连写

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* font: style weight size 字体 */
        p{
            color: aqua;
            font: italic 700 60px 宋体;
        }
        /* 一个属性冒号后面书写多个值的写法：复合属性 */
    </style>
</head>
<body>
    <p>666666</p>
</body>
</html>

3.2 文本样式

3.2.1 文本缩进：text-indent

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
             /* 首行缩进2个字的大小 */
             /* 默认字号：16px 32 */
             /* text-indent: 32px; */
             /* em：一个字的大小 */
             text-indent: 2em;
             font-size: 40px;
        }
    </style>
</head>
<body>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>

3.2.2 文本水平对齐方式：text-align

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            /* text-align: right; */
            text-align: center;
        }
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    <img src="./屏幕截图 2024-10-17 210230.png" alt="">
</body>
</html>

3.2.3 文本修饰：text-decoratio

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            text-decoration: underline;
        }
        p{
            text-decoration: line-through;
        }
        h2{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>ppp</p>
    <h2>h</h2>
    <a href="#">超链接</a>
</body>
</html>

3.3 line-height行高

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            text-indent: 2em;
            /* line-height: 50px; */
            /* 自己字号的1.5倍 */
            line-height: 1.5;
            /* 66px 宋体 倾斜 加粗 行高是2倍 */
            font: italic 700 66px/2 宋体;
        }
    </style>
</head>
<body>
    <p>孔子三岁丧父，家道中落，早年做过管粮仓、管放牧的小官。他"少好礼"，自幼熟悉传统礼制，青年时便以广博的礼乐知识闻名于鲁，从事儒者之业，以办理丧祭之礼为生。中年聚徒讲学，从事教育活动。年五十，曾一度担任鲁国的司寇，摄行相职，积极推行自己的政治主张，不久因与当政者政见不合而弃官去鲁，偕弟子周游列国，宣传自己的政治主张和思想学说，终未见用。晚年回到鲁国，致力教育事业，整理《诗》《书》，删修《春秋》，以传述六艺为终身志业。 [53]</p>
</body>
</html>

3.4 拓展颜色常见取值

3.5 拓展水平居中

四综合案例

4.1 新闻

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }
        .c1{
            text-align: center;
        }
        .c2{
            color: #808080;
        }
        .c3{
            color: #87ceeb;
            font-weight: 700;
        }
        a{
            text-decoration: none;
        }
        .suojin{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="c1">孔子</h1>
        <p class="c1">
            <span class="c2">2024年1月1日14:56</span> 
            <span class="c3">新浪科技</span>
            <a href="#">收藏文本</a>
        </p>
        <hr>
        <p class="suojin">孔子（公元前551年9月28日---前479年4月11日），名丘，字仲尼，春秋时期鲁国陬邑（今山东省曲阜市）人，祖籍宋国栗邑（今河南省夏邑县）。父叔梁纥，母颜氏。中国古代思想家、政治家、教育家，儒家学派创始人。 [1-3] [53] [56]</p>
        <p class="suojin">孔子三岁丧父，家道中落，早年做过管粮仓、管放牧的小官。他"少好礼"，自幼熟悉传统礼制，青年时便以广博的礼乐知识闻名于鲁，从事儒者之业，以办理丧祭之礼为生。中年聚徒讲学，从事教育活动。年五十，曾一度担任鲁国的司寇，摄行相职，积极推行自己的政治主张，不久因与当政者政见不合而弃官去鲁，偕弟子周游列国，宣传自己的政治主张和思想学说，终未见用。晚年回到鲁国，致力教育事业，整理《诗》《书》，删修《春秋》，以传述六艺为终身志业。 [53]</p>
        <p class="suojin">孔子曾带领部分弟子周游列国十四年，修订六经。去世后，其弟子及再传弟子把孔子及其弟子的言行语录和思想记录下来，整理编成《论语》。该书被奉为儒家经典。 [1]孔子对后世影响深远长久。他的"仁"与"礼"成为国家施政和个人自我修养的重要准则；"有教无类"的平民教育思想使华夏文明得以无限传承；对古代文献的系统整理，不仅寄予了自己的理想，更使得中华民族的文化遗产具有了深广的内涵。 [54]</p>
    </div>
</body>
</html>

文章目录

一 基础认知

1.1 CSS初识

1.1.1 CSS介绍

1.1.2 CSS语法规则

1.2 CSS引入样式

1.2.1 CSS引入方式

1.2.2 CSS小结

二 基础选择器

2.1 标签选择器

2.2 类选择器

2.3 id选择器

2.4 通配符选择器

三 字体和文本样式

3.1 文字

3.1.1 字体大小

3.1.2 字体粗细

3.1.3 是否倾斜

3.1.4 字体系列

3.1.5 样式折叠问题

3.1.6 字体相关属性font的连写

3.2 文本样式

3.2.1 文本缩进：text-indent

3.2.2 文本水平对齐方式：text-align

3.2.3 文本修饰：text-decoratio

3.3 line-height行高

3.4 拓展 颜色常见取值

3.5 拓展 水平居中

四 综合案例

4.1 新闻

一基础认知

二基础选择器

三字体和文本样式

3.4 拓展颜色常见取值

3.5 拓展水平居中

四综合案例