CSS语法介绍

文章目录

前言
一、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>