【CSS3】初始前端 CSS，选择器，字体文本列表样式_前端实现字体的列表-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43763344/article/details/109405448

本文介绍了CSS3的基础知识，包括选择器的种类如标签选择器、类选择器和ID选择器，以及层次选择器、结构伪类选择器的应用。此外，还讨论了字体样式、文本样式和列表样式的设置，如颜色、对齐、缩进和装饰。文章还提到了背景图片和渐变的使用，并强调了CSS的优势和导入方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

学习路径

1、CSS 是什么 ?
2、怎么快速入门?
3、什么是 CSS 选择器?
4、美化网页(文字，阴影，超链接，渐变)
5、盒子模型
6、浮动
7、定位
8、网页动画(特效)

初识 CSS

Cascading Style Sheet 层叠级联样式表

CSS 表现层，美化网页，字体，颜色，边距，宽度，背景图片，网页定位浮动

发展史：CSS1.0 -> CSS2.0 -> CSS2.1 -> CSS3.0

CSS1.0 只能美化基本样式，比如加粗字体

CSS2.0 (DIV块 +CSS) ，提出了 HTML 和 CSS 结构分离的思想，网页变得简单

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个CSS网页学习</title>
    <style>
        h1{
    
            color: aqua;

        }
    </style>
</head>
<body>
<h1>我是一级标题</h1>

</body>
</html>

但是建议使用下面的写法

在这里插入图片描述
CSS 优势
1、内容和表现分离
2、网页结构表统一，可以实现复用
3、样式十分丰富
4、建议使用独立的 HTML 的 CSS 文件
5、利用 SEO，容易被搜索引擎收录

CSS 导入方式：

内部样式：写在 header 头部
外部样式：写在了 css 文件(推介)
行内样式：(和标签写在一起)

优先级问题

行内优先级 > 内/外部优先级

内部和外部是就近原则

拓展：外部样式两种写法

链接式：link
导入式：@import url(“path”);

链接式和导入式的区别
link 属于 HTML 标签，导入属于 css

三种基本选择器

作用：选择页面上的某一个或者某一类元素

1、标签选择器

2、类选择器 class

3、id 选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        h1{
    
            color: #115293;
        }
    </style>
</head>
<body>

<h1>学前端技术</h1>

</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .maze{
    
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="maze">学前端技术</h1>

</body>
</html>

id 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #maze{
    
            color: aqua;
        }
    </style>
</head>
<body>
<h1 id="maze">学前端技术</h1>