CSS快速入门及简单实战

最新推荐文章于 2024-04-12 02:57:04 发布

Nuc-不晚

最新推荐文章于 2024-04-12 02:57:04 发布

阅读量378

点赞数

分类专栏：前端基础文章标签： css 前端

本文链接： https://blog.csdn.net/m0_73770225/article/details/128195292

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS语法结构

样式类型;

内联样式

内部样式

外部样式表

类型选择器

类选择器

id选择器

属性选择器

选取器优先级

盒子模型

border

padding：

margin

前提：

需有一定的html基础，推荐看我的上一篇文《HTML入门》

vs code仍然需要上次在讲HTML中的两个插件，即

live server

HTML CSS Support

同样我们需要在phpstudy中创建好网站（详细可见我的《第一个php程序》）

在这个网站的根目录下提前创建好一个HTML文件index.html

使用vs code打开这个文件，我们在这里进行实战

CSS语法结构

h1{
width:600px;
height:1200px;
margin:auto;
}
h1:选择器
margin:auto：声明（可以有多个）
margin：属性 auto：属性值

样式类型;

内联样式内部样式外部样式

内联样式：直接写在html元素上，没用选择器，直接声明，仅对当前的html元素有效

<p style="color:red;">好好学习</p>

内部样式：写到html文件的head标签里面，使用style标签，里面可以有一个或多个css规则，仅对当前页面有效

<head>
 <meta charset="UTF-8">
 <title>好好学习</title>
 <style>
.box{
    width:600px;
    height:1200px;
}
 </style>
</head>

外部样式：通过把另一个标签放到head标签内，然后指定link标签的href属性，来指定外部css文件路径从而引入外部样式表，仍然是只对当前页面有效

<html>
 <head>
   <meta charset="UTF-8">
   <title>好好学习</title>
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
 ...
 </body>
</html>

下面开始进入实战

同样是直接输入！+回车出现框架，删去没用的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

创建三个h1标签（在body里直接h1+回车）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>好好学习</h1>
    <h1>天天向上</h1>
    <h1>加油！</h1>
</body>
</html>

首先看内联样式直接写在标签里，打开我们刚刚创建的浏览器看一下效果

可以看见我们的第一个标签已经被赋了红色

接下来看内部样式（写在head里）需要使用css规则

我们使用style标签，使用选择器h1，添加颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1 style="color: red;">好好学习</h1>
    <h1>天天向上</h1>
    <h1>加油！</h1>
</body>
</html>

保存，刷新浏览器

可见我们的所有h1标签都变成了红色

外部样式表：首先在根目录下创建一个外部样式表文件：style.css，同样使用cs code打开

选择器同时使用h1，在css文件里进行编辑

h1{
    color: red;
}

保存，回到html文件

外部样式表需要通过link css来引用，直接在head里输入link css回车即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="color: red;">好好学习</h1>
    <h1>天天向上</h1>
    <h1>加油！</h1>
</body>
</html>

打开浏览器我们可以看见h1标签全部变红

接下来详细说一下选择器

作用：选择html元素

类型选择器：如h1 直接写html标签的名称

作用：选择页面上所有的该类型

我们在加入一个h2对比一下

在css文件里创建h2选择器

h1{
    color: red;
}
h2{
    color: blue;
}

保存回到html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="color: red;">好好学习</h1>
    <h2>天天向上</h2>
    <h1>加油！</h1>
</body>
</html>

这里我们把一个h1改为h2，刷新浏览器看一下效果：

效果很明显

我们在h标签下新建一个p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="color: red;">好好学习</h1>
    <h2>天天向上</h2>
    <h1>加油！</h1>
    <p>冲冲冲冲冲</p>
</body>
</html>

下面看一下类选择器，类选择器用.+类名，回到css文件

h1{
    color: red;
}
h2{
    color: blue;
}
.my-p{
    color: green;
}

回到html文件进行引用

类选择器我们需要一个class属性来指定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="color: red;">好好学习</h1>
    <h2>天天向上</h2>
    <h1>加油！</h1>
    <p class="my-p">冲冲冲冲冲</p>
</body>
</html>

刷新浏览器看看效果

接下来看id选择器

id选择器以#开头

作用：在页面中寻找id

回到css文件进行编辑

h1{
    color: red;
}
h2{
    color: blue;
}
.my-p{
    color: green;
}
#my-p{
    color: blueviolet;
}

回到我们的html文件给一个id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="color: red;">好好学习</h1>
    <h2>天天向上</h2>
    <h1>加油！</h1>
    <p class="my-p">冲冲冲冲冲</p>
    <p id="my-p">冲冲冲冲冲</p>
</body>
</html>

刷新浏览器

这样id选择器就运用上了

属性选择器

我们现在html文件中新添几个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="color: red;">好好学习</h1>
    <h2>天天向上</h2>
    <h1>加油！</h1>
    <p class="my-p">冲冲冲冲冲</p>
    <p id="my-p">冲冲冲冲冲</p>
    <a title="baidu" href="https://www.baidu.com">百度</a>
    <a title="" href="https://www.baidu.com">百度</a>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

回到css使用属性选择器

h1{
    color: red;
}
h2{
    color: blue;
}
.my-p{
    color: yellow;
}
#my-p{
    color: blueviolet;
}

a[title] {
    color: green;
}

刷新浏览器可以看见所有的title标签都变成了绿色

同时还可以指定他的值

h1{
    color: red;
}
h2{
    color: blue;
}
.my-p{
    color: yellow;
}
#my-p{
    color: blueviolet;
}

a[title=""] {
    color: green;
}

选择title值为空，保存

可见只有第二个标签被改变了颜色

选择器也可以组合来用，来表达且的关系

在css文件再添上一行

h1.my-p{
    color: blue;
}

表达既是h1标签又是my-p标签

在HTML文件中也进行编辑，在第一个h1中添加my-p标签

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="my-p">好好学习</h1>
        <h2>天天向上</h2>
        <h1>加油！</h1>
        <p class="my-p">冲冲冲冲冲</p>
        <p id="my-p">冲冲冲冲冲</p>
        <a title="baidu" href="https://www.baidu.com">百度</a>
        <a title="" href="https://www.baidu.com">百度</a>
        <a href="https://www.baidu.com">百度</a>
    </body>
</html>

刷新浏览器看效果

这个组合不仅限于两个，多个仍然可以

父子组合：

在HTML文件进行编辑

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="my-p">好好学习</h1>
        <h2>天天向上</h2>
        <h1>加油！</h1>
        <p class="my-p">冲冲冲冲冲</p>
        <p id="my-p">冲冲冲冲冲</p>
        <a title="baidu" href="https://www.baidu.com">百度</a>
        <a title="" href="https://www.baidu.com">百度</a>
        <a href="https://www.baidu.com">百度</a>
        <div>
            <h1>DIV里的元素</h1>
        </div>
    </body>
</html>

div即使父标签，h1即使子标签

在css文件进行编辑，添加一行

div h1{
    color: aqua;
}

空格即使父和子的关系，刷新浏览器看一下效果

既是选择在div里的h1标签

选取器优先级：

1.相同的规则按照加载顺序，写在后面的优先级更高

2.继承下来的样式优先级永远低于直接指定的样式

3.内联样式优先级更高，!important是个意外，带有!important的优先级最高

4.类型选择器<类选择器<ID选择器

5.内部样式和外部样式的优先级没有什么区别，谁在后就是谁，可以理解为后面的在加载过程中覆盖了前面的

这里只举例一下!important

在css标签进行如下编辑：

body{
    color: greenyellow;
}
h1{
    color: red;
}

h2{
    color: blue;
}

h2{
    color: aquamarine!important;
}

在html文件里：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="my-p">好好学习</h1>
        <h2 style="color:black;">天天向上</h2>
        <h1>加油！</h1>
        <p class="my-p">冲冲冲冲冲</p>
        <p id="my-p">冲冲冲冲冲</p>
        <a title="baidu" href="https://www.baidu.com">百度</a>
        <a title="" href="https://www.baidu.com">百度</a>
        <a href="https://www.baidu.com">百度</a>
        <div>
            <h1>DIV里的元素</h1>
        </div>
    </body>
</html>

可以看见虽然我们在h2标签里有一个内联样式，但是我们有一个!important，带有!important的优先级最高，所以起作用的是带有!important的

盒子模型

以div为例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="box">
            内容
        </div>
    </body>
</html>

在css编辑

.box{
    width: 500px;
    height: 500px;
    background-color: red;
}

刷新浏览器

这就是盒子模型

三个重要属性：

border

.box{
    width: 500px;
    height: 500px;
    background-color: red;
    border: 3px solid blue;
}

刷新浏览器，可以看到出现了蓝色的边框

padding：

.box{
    width: 500px;
    height: 500px;
    background-color: red;
    border: 3px solid blue;
    padding: 20px;
}

可以看到内容的位置发生了变化，这是因为在内容周围上下左右都填充了20px

当然也可以单独指定上下左右

.box{
    width: 500px;
    height: 500px;
    background-color: red;
    border: 3px solid blue;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

margin

margin同样也是既可以统一指定也可以单独指定

.box{
    width: 500px;
    height: 500px;
    background-color: red;
    border: 3px solid blue;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 15px;

}

当然也有一个更为简便的指定的方式，按照顺时针方向上坐下右

.box{
    width: 500px;
    height: 500px;
    background-color: red;
    border: 3px solid blue;
    padding: 10px 9px 8px 7px;
    margin: 10px 9px 8px 7px;

}

像这样，这就是盒子模型了