初识CSS（详细版）

已于 2024-08-02 18:07:52 修改
阅读量1.2k 收藏 18
点赞数 37
分类专栏： Web 文章标签： css 前端 html vscode web
于 2024-08-01 23:55:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wrrtx/article/details/140859986
版权

文章目录

CSS是什么

CSS全称叫：层叠样式表 (Cascading Style Sheets)，CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离

总的来说：

1、css控制页面的展示效果

2、html决定页面结构

基本语法规范

选择器 + {一条/N条声明}
1、选择器决定针对谁修改 (找谁)
2、声明决定修改啥(干啥)
3、声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值

注意：
1、CSS 要写到 style 标签中(后面还会介绍其他写法)
2、style 标签可以放到页面任意位置，一般放到 head 标签内
3、CSS 使用 /* */ 作为注释(使用 ctrl + / 快速切换)

<!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一般放在head中 -->
    <style>
        /* 这个是注释 */

        /* p是选择器，color等是声明 */
        p {
            /* 设置字体颜色 */
            color: red;
            /* 设置字体大小 */
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p>你好</p>
    <h1>你好</h1>
</body>
</html>

1

引入方式

内部样式表

将css嵌入到 html 页面中，写在 style 标签中，理论上来说 style 放到 html 的哪里都行，但是一般都是放到 head 标签中，这种写法不常用

优点：这样做能够让样式和页面结构分离
缺点：分离的还不够彻底，尤其是 css 内容多的时候

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- 将style放到head中 -->
    <style>
        p {
            color: red;
            font-size: 40px;
        }
    </style>
</head>

行内样式表

通过 style 属性，来指定某个标签的样式，这种写法只适合于写简单样式，针对某个标签生效，并且这种写法优先级较高，会覆盖其他的样式

缺点: 不能写太复杂的样式

<body>
    <!-- 行内优先级高 -->
    <p style="color: green;">hello world</p>
    <p>你好</p>
    <!-- 行内样式表 -->
    <h1 style="color: blue; font-size: 40px;">你好</h1>
</body>

2

外部样式

实际开发中最常用的方式

  1. 创建一个 css 文件.
  2. 使用 link 标签引入 css
<link rel="stylesheet" href="[CSS文件路径]">

优点：样式和结构彻底分离了
缺点：受到浏览器缓存影响, 修改之后 不一定 立刻生效

关于缓存:
这是计算机中一种常见的提升性能的技术手段
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来(就是存在本地磁盘上了)，从而提高访问效率
可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>外部样式引入</title>
    <!-- rel表示引入的文件是样式表，href表示路径 -->
    <link rel="stylesheet" href="./html02.css">
</head>
<body>
    <p>hello css</p>
</body>
</html>

p {
    color: red;
    font-size: 40px;
}

3

代码风格

样式大小写：CSS不区分大小写，但开发时统一使用小写字母

空格规范：冒号后面带空格，选择器和 { 之间也有一个空格

选择器的种类

选择器要先选中指定的元素，才能设置元素属性

基础选择器：单个选择器构成

标签选择器

能快速为同一类型的标签选择出来，但不能差异化选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>外部样式引入</title>
    <!-- rel表示引入的文件是样式表，href表示路径 -->
    <link rel="stylesheet" href="./html02.css">
</head>
<body>
    <p>hello css</p>
    <p>hello html</p>
    <p>hell JavaScript</p>
    <h2>这是h2标题</h2>
</body>
</html>

p {
    color: red;
    font-size: 40px;
}

4

类选择器

差异化表示不同标签，多个标签可以使用统一标签

类名用 . 开头的，下方的标签使用 class 属性来调用，一个类可以被多个标签使用，一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让
代码更好复用)，如果是长的类名，可以使用 - 分割，不要使用纯数字、中文以及标签名来命名类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./html03.css">
</head>
<body>
    <!-- class命名类名 -->
    <p class="eat">吃饭</p>
    <p class="sleep">睡觉</p>
    <!-- 多个类名要使用空格分割 -->
    <!-- 可以多个命名，从而进行样式叠加，如果出现同一样式多个声明，以最后的声明定义生效 -->
    <p class="typing code">打代码</p>
</body>
</html>

/* .开头，接class类名 */
.eat {
    color: red;
}

.sleep {
    color: green;
}

.code {
    color: blue;
}

.typing {
    color: red;
    font-size: 40px;
}

5

id选择器

在CSS 中使用 # 开头表示 id 选择器，id 选择器的值和 html 中某个元素的 id 值相同，html 的元素 id 不必带 #，id 是唯一的，不能被多个标签使用 (是和 类选择器 最大的区别)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./html03.css">
</head>
<body>
    <p id="front">前端开发</p>
    <p id="server">后端开发</p>
</body>
</html>

/* #开头，接id名字 */
#front {
    color: red;
}

#server {
    color: green;
}

6

通配符选择器

使用 * 的定义，不需要被页面结构调用，选取所有的标签，主要用来争对页面中所有元素默认样式进行消除，主要用来消除边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./html03.css">
</head>
<body>
    <p id="haha">哈哈哈哈</p>
    <p id="fr">前端开发</p>
</body>
</html>

#haha {
    color: red;
}

/* *开头，接花括号 */
* {
    background-color: beige;
}

7

小结

作用特点
标签选择器能选出所有相同标签不能差异化选择
类选择器能选出一个或多个标签根据需求选择，最灵活，最常用
id选择器能选出一个标签同一个id在一个HTML中只能出现一次
通配符选择器选出所有标签特殊情况下使用

复合选择器：把多种基础选择器综合运用起来

后代选择器

又叫包含选择器，选择某个父元素中的某个子元素

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

元素 1 和 元素 2 要使用空格分割
元素 1 是父级，元素 2 是子级，只选元素 2，不影响元素 1

<!-- 修改ol的颜色，不改变ul的颜色 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 会全部变颜色 */
        /* li {
            color: red;
        } */
        /* 后代选择器 */
        /* 方法1:类名 */
        /* .red {
            color: red;
        } */
        /* 方法2:修改ol中的li */
        /* ol li {
            color: red;
        } */
        /* 方法3:组合选择器 */
        /* .hobby li {
            color: red;
        } */
        /* 方法4:爷爷和孙子 */
        ol a {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打代码</li>
    </ul>
    <ol class="hobby">
        <li class="red">吃饭</li>
        <li class="red">睡觉</li>
        <li class="red">
            <a href="#">打代码</a>
        </li>
    </ol>
</body>
</html>

8

伪类选择器

用来定义元素状态

链接伪类选择器

a：link 选择未被访问过的链接
a：visited 选择已经被访问过的链接
a：hover 选择鼠标指针悬停上的链接
a：active 选择活动链接(鼠标按下了但是未弹起)

如何让一个已经被访问过的链接恢复成未访问的状态?
清空浏览器历史记录即可，快捷键为：ctrl + shift + delete

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        a {
            color: black;
        }
        /* 选择鼠标指针悬停上的链接 */
        a:hover {
            color: red;
        }
        /* 选择活动链接(鼠标按下了但是未弹起) */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">不跳转</a>
</body>
</html>

9

:force 伪类选择器

选取获取焦点的 input 表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 被选中的表单的字体就会变成红色 */
        .three>input:focus {
            color: red;
        }
    </style>
</head>
<body>
    <div class="three">
        <input type="text"><br>
        <input type="text"><br>
        <input type="text"><br>
        <input type="text">
    </div>
</body>
</html>

10

小结

选择器作用
后代选择器选择后代元素，可以是孙子元素
链接伪类选择器选择不同状态的链接
:force 伪类选择器选择被选中的元素

更多选择器的学习可以通过以下链接进行学习：

CSS 选择器参考手册 (w3school.com.cn)

常见元素属性

元素有很多，不用硬背，借助参考文档学习：CSS 参考手册 (w3school.com.cn)

字体属性

font-family：设置字体

font-size：字体大小

font-weight：字体粗细

normal：默认值

bold：粗体

bolder：更粗的字体

lighter：更细的字体

100（数字）：数字越大越粗

inherit：从父元素继承字体

font-style：字体倾斜度

normal：默认值，不倾斜

italic：斜体

oblique：倾斜字体

inherit：从父元素继承字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        div {
            /* 如果字体相关修改写错的话,会显示默认的大小 */
            /* 字体修改可以写中文,但不推荐 */
            font-family: '宋体';
            /* 字体大小 */
            font-size: 40px;
            /* 字体粗细 */
            font-weight:700;
            /* 字体样式 */
            font-style: italic;
        }
    </style>
</head>
<body>
    <div>这是宋体</div>
</body>
</html>

11

文本属性

color：设置字体颜色

预定义的颜色值：直接是单词
（最常用） 十六进制形式：每两位表示一种三原色(可以简写成3个16进制数)，三原色顺序为红绿蓝，数字越大颜色越深

RGB 方式：和十六进制形式一样，变成3个 0-255 的值

text-align：控制文字水平方向对齐

center: 居中对齐
left: 左对齐
right: 右对齐

text-decoration：表示文本装饰

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

text-indent：控制文本缩进

单位可以使用 px 或者 em
使用 em 作为单位更好，1 个 em 就是当前元素的文字大小
缩进可以是负的，表示往左缩进(会导致文字就冒出去了)

line-height：表示行高，上下文之间的基线距离

行高 = 上边距 + 下边距 + 字体大小

行高也可以取 normal 等值

行高等与元素高度，就可以实现文字居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        .color {
            font-size: 40px;
            /* 直接写颜色名称 */
            color: red;
            /* 16进制表示颜色,两位表示一种三原色(可以简写成3个16进制数) */
            /* 表示的颜色顺序为红绿蓝,数字越大颜色越深 */
            color: #0000ff;
            /* 和上面的表示方法是一样的 */
            color: rgb(0, 255, 0); 
        }
        h1 {
            text-align: left;
            text-decoration: overline;
        }
        h2 {
            text-align: center;
            text-decoration: line-through;
        }
        h3 {
            text-align: right;
        }
        p {
            text-indent: 2em;
            text-decoration: underline;
            line-height: 50px;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="color">这是文本属性</div>
    <h1>靠左</h1>
    <h2>居中</h2>
    <h3>靠右</h3>
    <!-- lorem 可以生成一大串文字 -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo perspiciatis sunt molestiae porro cum quaerat tempore neque, voluptatibus dolorem ipsam vero at quam praesentium. Labore, atque? Aperiam a asperiores libero?</p>
    <a href="#">不跳转</a>
</body>
</html>

13
12

背景属性

背景颜色和图片：

background-color：设置背景颜色

background-image: url(……)：设置背景图片

比 image 更方便控制位置(图片在盒子中的位置)
注意：

url 不要遗漏，url 可以是绝对路径，也可以是相对路径，url 上可以加引号，也可以不加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        /* 全局换背景色 */
        body {
            background-color: #6fb7e7e7;
        }
        /* 添加div的背景图片 */
        div {
            font-size: 40px;
            background-image: url(./img.png);
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>
        这是我学习背景属性
    </div>
</body>
</html>

14

background-repeat：设置背景平铺方式

重要取值:
repeat：平铺（默认）
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

<!-- 在上述代码的基础上修改 -->
<style>
    /* …… */
    div {
        font-size: 40px;
        /* background-image: url(./img.png); */
        background-image: url(../Html/female.png);
        background-repeat: repeat-y;
        width: 700px;
        height: 400px;
    }
</style>

15

background-position：修改背景图片的位置

参数有三种风格:

  1. 方位名词: (top, left, right, bottom)

  2. 精确单位: 坐标或者百分比(以左上角为原点)

  3. 混合单位: 同时包含方位名词和精确单位

    关于坐标系:
    计算机中的平面坐标系, 一般是左手坐标系

    16

<style>
    /* …… */
    div {
        /* …… */
        /* 设置背景图片位置 */
        /* 坐标 */
        background-position: 200px 200px;
        /* 方位名词 */
        background-position: top;
        /* 混合 */
        background-position: 100px center;
    }
</style>

17

background-size：设置背景尺寸

1、可以填具体的数值：如 40px 60px 表示宽度为 40px，高度为 60px
2、可以填百分比：按照父元素的尺寸设置.
3、cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4、contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

    <style>
        /* …… */
        div {
            /* …… */
            /* 设置背景图片尺寸 */
            /* 具体数值 */
            background-size: 700px 400px;
            /* cover */
            background-size: cover;
            /* contain */
            background-size: contain;
        }
    </style>

18

圆角矩形

通过 border-radius 使边框带圆角效果

border-radius: length（length 是内切圆的半径，数值越大，弧线越强烈）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角矩形</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            border: 2px red solid;
            /* 圆角矩形 */
            border-radius: 20px;
            /* 生成圆角矩形 */
            /* 让 border-radius 的值为矩形高度的一半即可 */
            border-radius: 100px;
            /* 也可以用百分比表示 */
            border-radius: 50%;

            /* 生成圆形 */
            width: 200px;
            height: 200px;
            /* 让 border-radius 的值为正方形宽度的一半 */
            border-radius: 100px;

            /* 展开写法,对四个角分别设置 */
            border-top-left-radius:10px;
            border-top-right-radius:20px;
            border-bottom-right-radius:30px;
            border-bottom-left-radius:40px;
            /* 等价于(顺时针排列) */
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

19
这就是CSS的基本内容啦！

没事学习去
关注
  • 37
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
初识CSS
weixin_47651920的博客
01-13 714
一.css的作用 css是层叠样式表的简称，作用是：能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。 二.语法规范 选择器+{1/n条声明} 选择器就是指定修改的目标，如里面的标签p或者a,都可以指定设置样式。 声明就是对具体修改成什么样式，其中声明的书写格式是键值对的方式。 例子： <style> /* 这里是对p标签设置样式 */ p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-
初识css3
一个臭小孩的修炼之路
12-03 302
css教程1，css是什么？以及三种链接方式
第四章 初识css
dawnlini的博客
12-27 139
初识css
初识CSS3
shi15062772894的博客
12-07 104
CSS的概念 Cascading Style Sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言 （包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定） CSS基本语法结构 选择器{声明1； h1{ 声明2； font-size：12px； 。。。} ...
CSS简介：初识CSS
2401_84098058的博客
04-19 636
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。6.2 易于使用和修改CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
01-CSS初识
qq_41963519的博客
12-15 440
本资源由 itjc8.com 收集 typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义， 比如表明这是一个大标题，用 表明这是一个段落，用 表明这儿有一个图片， 用 表示此处有链接。 很早的时候，世界上的网站虽然很多，但是他
初识css
wqx88888888的博客
02-27 74
（Cascading Style Sheets）3、css引入方式：行间样式表、内部样式表、外部样式。通常称为css样式表、层叠样式表、级联样式表。作用：设置页面中元素的位置、排版、样式外观等。主要由两部分组成：选择器、样式声明。表现层、美化html。
02-初识CSS
qq_73966534的博客
09-03 962
初识CSS
初识CSS总结
TH_Kakashi的博客
07-11 261
初识CSS一、什么是CSS？1、CSS的定义2、CSS的主要作用1. 布局2. 美化二、盒子模型盒子的分类块级元素行内元素行内块元素盒子模型的六大属性1. 内容区域：width 和 height块级元素行内元素2. 内填充区域： padding块级元素行内元素3. 边框： borderborder-widthborder-styleborder-color4. 外填充区域：margin设置盒子水平居中块级元素行内元素5. 背景： backgroundbackground-colorbackground-im
HTML-css初识.md
01-06
HTML-css初识.md
CSS初识初学者思维导图-css学习第一天
12-24
css 目的、样式表分类（位置）、选择器、常见文字css属性
初识前端，学习html+css.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
CSS行元素的截断样式box-decoration-break属性，有点儿意思！
流绪@微梦
09-03 542
在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。常用行内元素：a、span、i、em、strong、img等。
css radius
时间不说谎
09-03 632
在 css 中，radius 属性用于设置元素角落的圆角半径，以创建更美观的现代化外观。属性值包含绝对长度或百分比，或继承父元素的半径。指定一个值会影响所有四个角，指定两个值会分别影响左上角和右下角、右上角和左下角的半径。Radius 是 CSS 中的一个属性，它允许开发者对元素的角落进行圆角处理。它为元素创建圆角边框，使元素看起来更加美观和现代。radius 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
css spacing设置间距
时间不说谎
09-03 299
将在每个单词之间增加30像素的间距。这个属性可以增加或减少字与字之间的空白，并且允许负值，即减少字与字之间的间距。将在每个字母之间增加10像素的间距。这个属性会影响一个单词中每个字母之间的间距，使得单词中的字母之间也有空白。属性用于设置单词之间的间距。它只影响英文单词之间的间距，对中文无效。属性用于设置字母之间的间距，适用于中文和英文。
VitePress 自定义 CSS 指南
最新发布
软考鸭
09-06 402
首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在目录下创建一个名为custom.css的文件。接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是。import './custom.css' // 引入自定义 CSS。
HTML标签大合集
2302_78656999的博客
09-02 297
本文详细介绍常用的HTML标签及其用法
html 初识CSS：丰富多彩的网页样式品
04-02
在初识CSS时，你可以了解以下几个方面： 1. CSS的基本语法：CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，声明块中包含了一系列的样式属性和值。 2. 样式属性和值：CSS提供了丰富的样式属性和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值