当前位置：首页 > news >正文

CSS语法介绍

news 2025/8/2 18:25:01

文章目录

前言
一、CSS引入方式
- 1.行内操作
- 2.内部操作
- 3.外部操作
二、常用选择器
- 1.标签选择器
- 2.类选择器
- 3.id选择器
- 4.群组选择器
- 5.后代选择器
三、字体常用设置
- 1.字体类型
- 2.字体大小
- 3.字体样式
- 4.字体粗细
四、div盒子模型
- 1.盒子边框
- 2.外边距
- 3.内边距
- 4.浮动
综合实战案例

前言

以盖房子比喻我们的网页，HTML就是房屋主体，CSS就是给房屋装修，JS就是给房屋买家具，今天介绍CSS语法部分。

一、CSS引入方式

1.行内操作

CSS引入方式的第一种是行内操作，首先我们先写一组HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title>
</head>
<body><p>我是P标签 -- 1</p>
<p>我是P标签 -- 2</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

我们会发现字体没有颜色，大小也很单调，接下来给字体加上颜色及修改大小，用到style属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title>
</head>
<body>
<!--1、行内CSS操作-->
<p style="color: red">我是P标签 -- 1</p>
<p style="color: green; font-size: 30px">我是P标签 -- 2</p>
</body>
</html>

代码运行结果如下：
在这里插入图片描述

这时候我们也会发现如果要定义的样式非常多，写在标签内部就很长很乱，代码阅读性很差，接下来会用到第二种CSS引入方式。

2.内部操作

内部操作也叫头部操作，在head里面使用style标签，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title><!--2、头部CSS操作--><style>span {color: purple;font-family: 宋体;}</style>
</head>
<body>
<span>学习：头部CSS操作</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述

假设现在样式标签很多，全部都写在该HTML文件中，也会显得代码很冗长，接下来介绍第三种CSS引入方式。

3.外部操作

外部CSS操作，在外部单独新建一个css文件，名字随便起，比如这里取名为demo.css，然后回到HTML文件中继续写代码，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title><!--3、外部CSS操作--><link rel="stylesheet" href="demo.css">
</head>
<body>
<!--i标签是斜体标签-->
<i>好好学习，天天向上</i>
</body>
</html>

CSS代码如下：
在这里插入图片描述

运行HTML代码后结果如下：
在这里插入图片描述
三种CSS引入方式根据自己喜好选择即可，如果项目非常大，一定是使用外部CSS引入的方式。

二、常用选择器

选择器就是选中标签的方式，分为5种。

1.标签选择器

标签选择器是通过标签名选中标签，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签选择器</title><!--标签选择器通过标签名选中标签--><style>b {color: red;}span {color: green;}</style>
</head>
<body>
<!--b标签是粗体标签-->
<b>我是b标签 -- 1</b> <hr>
<span>我是span标签</span> <hr>
<b>我是b标签 -- 2</b>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.类选择器

类选择器是通过class属性值选中标签，现在有代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器.: class</title><style>p {color: red;}</style>
</head>
<body>
<p>我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p>我是p标签 -- 3</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

假如我现在只想让标签1和3改变颜色，2不变，这时候就要对1和3加上属性class，class类用.点指代，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器.: class</title><style>.p1 {color: red;}</style>
</head>
<body>
<p class="p1">我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p class="p1">我是p标签 -- 3</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
代码做进一步升级：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器.: class</title><style>.p1 {color: red;}</style>
</head>
<body>
<p class="p1">我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p class="p1">我是p标签 -- 3</p>
<span class="p1">我是span -- 3</span>
</body>
</html>

这时候span标签的内容也会变颜色，因为类选择器选中的是同一类，而不管是不是同一种标签，运行结果如下：
在这里插入图片描述

3.id选择器

id选择器用#号来指代，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器 -- #</title><style>#p1 {font-size: 20px;color: red;}</style>
</head>
<body>
<p id="p1">id选择器 -- 1</p>
<p>id选择器 -- 2</p>
<p>id选择器 -- 3</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
这时候我们继续修改代码，为下面的p标签也设置同样的id和属性值，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器 -- #</title><style>#p1 {font-size: 20px;color: red;}</style>
</head>
<body>
<p id="p1">id选择器 -- 1</p>
<p id="p1">id选择器 -- 2</p>
<p>id选择器 -- 3</p>
</body>
</html>

但是里面代码很明显是有错误的，因为id值是唯一的，类似于我们的身份证号码，不能有重复的，而类class是可以有多个重复的，这就是id选择器的特殊之处。

4.群组选择器

群组选择器用,逗号来指代，我们来写一组代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>群组选择器 -- ,</title><style>span {color: red;}p {color: red;}</style>
</head>
<body>
<span>我爱你</span>
<p>好天气</p>
</body>
</html>

这组代码实现的功能就是给span标签和p标签内容都改颜色，虽然可以实现，但是我们会发现代码变的冗长了，如果有多个不同标签，那么会更长，这时候可以使用群组选择器，将代码缩短，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>群组选择器 -- ,</title><style>span, p {color: green;}</style>
</head>
<body>
<span>我爱你</span>
<p>好天气</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

5.后代选择器

我们可以看这样一组代码：

<head><meta charset="UTF-8"><title>后代选择器</title><style>span {color: red;}</style>
</head>
<body>
<p><a href=""><span>学习后代选择器</span></a>
</p>
<span>我是span标签</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述
假如我们只想让a标签里面的span标签改变颜色，这里就要用到后代选择器，当然也可以单独设置id或者class，但是我们用后代选择器来看看怎么改，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器</title><style>p > a > span {color: blue;}</style>
</head>
<body>
<p><a href=""><span>学习后代选择器</span></a>
</p>
<span>我是span标签</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述

三、字体常用设置

1.字体类型

字体类型用font-family属性，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体类型*/font-family: 宋体;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
可以继续改为黑体，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体类型*/font-family: 黑体;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.字体大小

字体大小用属性font-size，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体大小*/font-size: 30px;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

3.字体样式

字体样式使用属性font-style，属性值常用的有italic(斜体)和normal(正常)，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体样式*/font-style: italic;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

4.字体粗细

字体粗细使用font-weight属性，常用属性值就是normal(正常)和bold(粗)，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体粗细*/font-weight: bold;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

四、div盒子模型

盒子模型就是给网页划分不同区域，每个区域有特定的功能，盒子里面的标签如果要转移位置，只需挪动盒子即可，不用一个个标签去挪动，说白了，就是便于管理。

1.盒子边框

盒子模型的标签是div，具体用法代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框</title><style>div {/*盒子宽度width*/width: 200px;/*盒子高度height*/height: 200px;/*盒子边框border*//*border有三个参数：粗细 线的类型 颜色*//*线类型有：实线(solid) 虚线(dashed) 点线(dotted)*/border: 1px solid red;}</style>
</head>
<body>
<div></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

盒子建好之后，我们可以在里面写一些标签内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框</title><style>div {width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body>
<div><p>天气真好</p><p>天气真好</p><p>天气真好</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

还可以给盒子添加背景颜色，使用background-color属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框</title><style>div {width: 200px;height: 200px;border: 1px solid red;background-color: orange;}</style>
</head>
<body>
<div></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.外边距

接下来看看外边距，外边距是盒子与盒子之间的边距，以及盒子与浏览器之间的边距，我们先创建两个盒子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;}</style>
</head>
<body>
<div id="d1"></div><div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

div标签是默认从上往下展示，可以看到两个盒子目前是挨在一起，接下来为他们设置边距，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;/*上边距*/margin-top: 50px;/*左边距*/margin-left: 50px;}</style>
</head>
<body>
<div id="d1"></div><div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

接下来很关键的是如何让盒子居中，这里用到margin属性，属性值是auto，意思就是自动根据浏览器大小居中显示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title><style>#d2 {width: 300px;height: 300px;background-color: orange;/*盒子居中*/margin: auto;}</style>
</head>
<body>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

3.内边距

内边距是盒子里面内容与盒子之间的边距，可以先看下面这组代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内边距</title><style>.d1 {width: 300px;height: 300px;border: 2px solid red;}</style>
</head>
<body>
<div class="d1"><p>学习内边距</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

接下来把盒子里面内容上下左右距离调整，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内边距</title><style>.d1 {width: 300px;height: 300px;border: 2px solid red;/*内容距离盒子上边的边距*/padding-top: 50px;/*内容距离盒子左边的边距*/padding-left: 50px;}</style>
</head>
<body>
<div class="d1"><p>学习内边距</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述
这时候我们会注意到盒子整体变大了，这是因为内边距会撑大盒子，以保持除开刚才上边和左边撑开的内边距，盒子整体大小依然是我们设置的尺寸300px。

4.浮动

浮动就是把原有默认的位置进行移动，比如我们上面定义的两个盒子默认是上下挨着展示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

现在我将下面的盒子位置移动到右边，称为浮动，用到float属性，值为right，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;float: right;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

综合实战案例

实战案例需求：编写注册页面，先看效果图如下：
在这里插入图片描述

附上全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面(案例)</title><style>div {width: 300px;height: 320px;border: 1px solid grey;border-radius: 5px;border: 1px solid grey;padding: 10px;margin: auto;}span {border-bottom: 5px solid purple;padding-bottom: 6px;}#a1 {float: right;color: deepskyblue;text-decoration: none;}.A {width: 290px;height: 30px;margin-bottom: 8px;border-radius: 5px;border: 1px solid grey;}.B {width: 190px;height: 30px;margin-bottom: 8px;border-radius: 5px;border: 1px solid grey;}.C {width: 90px;height: 30px;border-radius: 5px;border: 1px solid grey;color: purple;}.D {width: 90px;height: 30px;border-radius: 5px;border: 1px solid grey;background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzhuangjiba.com%2Fd%2Ffile%2Fhelp%2F2018%2F08%2Fcfdefaddb3f47d78f8c66a7de28720aa.png&refer=http%3A%2F%2Fzhuangjiba.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655473640&t=3942417cfe379e590c48a9340d06952b");background-size: 85px 30px;vertical-align: middle;}.E {width: 290px;height: 30px;border-radius: 5px;border: 1px solid grey;color: deepskyblue;}</style>
</head>
<body><div><form action=""><span>请注册</span><a id="a1" href="">立即登录></a><hr><input type="text" placeholder="请输入手机号" class="A"> <br><input type="text" placeholder="请输入短信验证码" class="B"><input type="button" value="发送验证码" class="C"> <br><input type="text" placeholder="请输入用户名"  class="A"> <br><input type="password" placeholder="请输入密码"  class="A"> <br><input type="password" placeholder="请再次输入密码"  class="A"> <br><input type="text" placeholder="请输入图形验证码" class="B"><input type="button" class="D"><br><input type="submit" value="立即注册" class="E"></form>
</div>
</body>
</html>