【CSS学习第一篇】

最新推荐文章于 2024-08-10 22:43:21 发布
最新推荐文章于 2024-08-10 22:43:21 发布
阅读量1.2k 收藏 20
点赞数 44
分类专栏： 前端 文章标签： css 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77399671/article/details/140386264
版权

CSS学习第一篇

1. CSS简介

1.1 什么是CSS？

CSS是层叠样式表（Cascading style sheets）的简称，有时我们也称之为CSS样式表或级联样式表
（CSS也是一种标记语言）

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

简言之，CSS是用来美化网页、布局页面的

1.2 CSS语法规范

CSS规则由两个主要的部分构成：
选择器以及一条或多条声明
在这里插入图片描述
选择器是用于指定CSS样式的HTML标签

2. CSS选择器

2.1 CSS选择器的作用

选择器（选择符）是根据不同需求把不同的标签选出来

2.2 CSS选择器的分类

CSS选择器分为基础选择器和复合选择器两个大类。
此篇我们先讲基础选择器。

基础选择器是由单个选择器组成的

基础选择器包括标签选择器、类选择器、id选择器、通配符选择器

2.3 标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

作用：标签选择器可以将某一类标签全部选择出来

优点：能快速为页面中同类型的标签统一设置样式

缺点：不能设计差异化样式

<!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: pink;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

2.4 类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。

在HTML中以class属性表示，在CSS中以一个"."号表示

命名规范：见“web前端开发规范手册.doc”

<!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>
        .pink {
            color: pink;
        }
    </style>
</head>
<body>
    <h2 class="pink">pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

类选择器在修改样式中用的最多

2.5 id选择器

id选择器一般用于页面唯一性的元素上，
经常和JavaScript搭配使用
（只能使用一次）

<!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>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p id="pink">静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

2.6 通配符选择器

在CSS中，通配符选择器使用“*”定义，
它表示选取页面中所有元素（标签）

<!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: pink;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

3. CSS字体属性

CSS font（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）

3.1 font-family设置字体系列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style>
        h2 {
            font-family: 'Microsoft YaHei';
        }

        p {
            font-family: 'Times New Roman', Times;
        }
    </style>
</head>

<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

3.2 font-size字号大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字号大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

3.3 font-weight字体粗细

属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100-900400等同于normal，而700等同于bold（注意数字后不跟单位）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体粗细</title>
    <style>
        .bold {
            /* font-weight: bold; */
            font-weight: 700;
        }
        h2 {
            font-weight: 400;
            /* font-weight: normal; */
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p class="bold">拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

3.4 font-style字体样式

属性值作用
normal默认值，浏览器会显示标准的字体样式
italic浏览器会显示斜体的字体样式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体样式</title>
    <style>
        p {
            font-style: italic;
        }
        em {
            /* 让倾斜的字体不倾斜*/
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>同学,上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

在这里插入图片描述

3.5 font复合属性写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体font复合属性</title>
    <style>
        p {
            /* 复合属性:简写的方式 节约代码 */
            /* font: font-style font-weight font-size/line-height font-family */
            font: italic 700 16px 'Microsoft YaHei';
            /* 必须留下font-size font-family */
            /* font: 20px '黑体'; */
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

4. CSS文本属性

CSS text（文本）属性用于定义文本的外观，比如文本的颜色，对齐文本、装饰文本、文本缩进、行间距等

4.1 文本颜色color

表示属性值
预定义的颜色值red、green、blue、pink
十六进制##FF0000
RGB代码rgb(255,0,0)或者rgb(100％,0％,0％)

开发中最常用的是十六进制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之文本颜色</title>
    <style>
        p {
            /*color: deeppink;*/
            color: #a94ba9;
            /* color: rgb(37, 126, 110);*/
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

4.2 文本对齐text-aligh

一般指的是水平对齐，包括left、center、right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之文本对齐</title>
    <style>
        h2 {
            /* 让h1盒子里面的文字水平居中对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

4.3 文本装饰text-decoration

我们可以给文本添加下划线、删除线、上划线等。

属性值描述
none默认，没有装饰线（最常用）
underline下划线。（常用）
overline上划线。（几乎不用）
line-through删除线。（几乎不用）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之文本装饰</title>
    <style>
        p {
            /* 下划线  */
            text-decoration: underline;
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            /* text-decoration: overline; */
        }
        a {
            /* 取消a默认的下划线 */
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <a href="#">正文</a>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

4.4 文本缩进text-indent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

注意：em是一个相对单位，是当前元素（font-size）1个文字的大小。如果当前元素没有设置大小，则会按照父元素的1个文字大小定义em。

4.5 行间距line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style>
        p {
            line-height: 50px;
        }
    </style>  
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

5. CSS的引入方式

根据CSS样式书写的位置（或者引入的方式），
CSS样式表可以分为三大类：
（1）行内式样式表（行内式）
（2）内部样式表（嵌入式）
（3）外部样式表（链接式）

（1）行内式样式表（行内式）：
是在元素标签内部的style属性中设定CSS属性
（适合于修改简单样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p style="color: pink;">拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

（2）内部样式表（嵌入式）：
是写到HTML页面内部，将所有的CSS代码抽取出来，
单独放到一个<style>标签中
前面我们所举的例子均是如此

这样做代码结构清晰，但并没有实现结构和样式完全分离

（3）外部样式表（链接式）
样式单独写到CSS文件中，
之后把CSS文件引入到HTML页面中使用。

引入外部样式表分为两步：
新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中
在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

CSS代码：

p {
    color: pink;
}

在这里插入图片描述

后记

还未完成知识点：

（1）chrome调试工具未写入
（2）这篇学太久了，没按照正常的方法走

希冀123
关注
  • 44
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
学习css，这一篇足矣
m0_64336780的博客
04-07 9620
关于CSS的所有常用知识点来了，满满的干货！
学习CSS3这一篇就够了
轻松的小希
11-25 4万+
目录CSS第一章 CSS概述1.1、概述1.2、语法1.3、注释1.4、如何创建并引用1.4.1、外部样式表（外联式）1.4.2、内部样式表（内联式）1.4.3、内联样式（行内式）1.5、三种引入优先级第二章 CSS选择器2.1、id选择器2.2、class选择器2.3、标签选择器2.4、子代选择器2.5、后代选择器2.6、相邻兄弟选择器2.7、后续兄弟选择器2.8、交集选择器2.9、并集选择器2.10、通配符选择器2.11、伪类选择器2.11.1、anchor伪类2.11.2、input伪类2.11.3、
CSS学习第一篇CSS基本语法+内联样式+内部样式+外部样式
MW
02-02 920
CSS基本语法     格式：               选择器{属性1：值1；属性2：值2}     单位：      &nb...
【从零开始学习CSS | 第一篇】选择器介绍
fckbb的博客
07-12 3201
在CSS（层叠样式表）中，选择器是一种用于选择 HTML 元素以应用特定样式的模式或规则。选择器通过匹配 HTML 元素的不同属性、关系或状态来确定要应用样式的目标元素。
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 76万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
CSS（第一篇）
weixin_45947655的博客
10-04 1029
CSS 1.初识CSS 1.1什么是CSS 层叠样式表（级联样式表）：Cascading Style SheetSEO CSS : 表现（美化图片） 字体，颜色，边距，高度，宽度，背景图片，网页浮动… 1.2CSS的发展史 CSS 1.0 CSS 2.0 DIV（块）+ CSS, HTML与CSS结构分离的思想，网页变得简单，SEO CSS 2.1 浮动，定位 CSS 3.0 圆角，阴影，动画…浏览器兼容性 1.3快速入门 可在HTML页面直接编写CSS： <style>
PHP基础学习第六篇（初识CSS）
xiaomoge__的博客
09-20 670
CSS简单学习
CSS学习
FM11101001的博客
10-18 2406
css基础入门、常用标签
学习jQuery这一篇就够了
轻松的小希
11-25 9万+
目录第一章 jQuery简介1.1、jQuery简介1.2、jQuery官网1.3、jQuery版本介绍1.4、jQuery引入方式1.5、jQuery快速使用1.6、jQuery两把利器第二章 jQuery核心函数2.1、选择器2.1.1、基本选择器2.1.1.1、标签选择器2.1.1.2、id选择器2.1.1.3、class选择器2.1.1.4、通配符选择器2.1.1.5、并集选择器2.1.1.6、交集选择器2.1.2、层级选择器2.1.2.1、子代选择器2.1.2.2、后代选择器2.1.2.3、兄弟选
BootStrap入门学习第一篇
12-02
这篇“BootStrap入门学习第一篇”旨在引导初学者了解如何开始使用这个强大的工具。以下是主要的知识点： 1. **环境搭建**： - 首先，你需要从BootStrap的中文官方网站（http://www.bootcss.com）下载最新的...
一篇文章带你学习CSS3图片边框
01-18
表中的数字指定完全支持该属性的第一个浏览器版本。 数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。 二、CSS3 border-image 属性 CSS3 border-image 属性允许您指定要用来代替元素周围的正常边界的图像。...
CSS学习之一 CSS样式引入方法
09-25
本篇文章主要探讨了三种常见的CSS样式引入方法：外部样式表、内部样式表和内联样式。 首先，外部样式表是通过`<link>`标签来引入的，这通常是推荐的最佳实践。`<link>`标签有四个关键属性： 1. `rel`属性定义了链接...
css网站布局实录学习笔记第一部分
09-25
在本篇《CSS网站布局实录》学习笔记中，我们主要探讨了Web标准与CSS布局的基本概念，这对于理解和掌握前端开发至关重要。Web标准是确保网页在不同浏览器和设备上一致显示的关键，它由W3C和其他标准化组织制定，涵盖...
如何使用css写三角形
最新发布
z16638522031的博客
08-10 78
在这个示例中，我们首先创建了一个名为.parent-element的div元素，然后通过:before伪元素在其上方创建一个向下指向的黄色三角形。通过调整top值和边框宽度，你可以根据需要自定义三角形的大小和位置。你可以使用一个div元素，然后将其宽度和高度设置为0，接着定义透明和实色边框来实现三角形的形状。根据你需要的三角形样式（例如朝向、大小、颜色等），你可以调整边框的宽度和颜色。这种方法类似于第一种方法，但它允许你在现有的HTML元素上添加三角形形状，而不是使用一个单独的div元素。
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 153
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
使用tailwindcss轻松实现移动端rem适配
felix_alone2012的博客
08-10 181
本示例节选自小卷全栈开发实战系列的《Vue3实战》，将演示如何用所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 282
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
08-07 604
对于有打印需求的网页，特别是文章的详情页，需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值