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

企业网站模板带后台百度指数预测

news 2025/8/3 20:36:14

企业网站模板带后台,百度指数预测,node mysql做动态网站,大连甘井子区房价目录前言： 1.CSS是什么 1.1CSS基本语法 2.引入样式 2.1内部样式表 2.2行内样式表 2.3外部样式 3.选择器 3.1选择器的种类 3.1.1基础选择器 3.1.2复合选择器 4.常用元素属性 4.1字体属性 4.2文本属性 4.3背景属性 4.4圆角矩形 4.5元素的显示模式 4…

前言：

1.CSS是什么

1.1CSS基本语法

2.引入样式

2.1内部样式表

2.2行内样式表

2.3外部样式

3.选择器

3.1选择器的种类

3.1.1基础选择器

3.1.2复合选择器

4.常用元素属性

4.1字体属性

4.2文本属性

4.3背景属性

4.4圆角矩形

4.5元素的显示模式

4.6盒模型

4.7内边距

4.8外边距

4.9弹性布局

结束语：

前言：

在上一节中小编与大家分享了有关于JavaScript的一些基础知识，以及给大家演示了几个案例，接下来小编带着大家一起来看一下有关于前端中的另一个技术CSS，想要让界面好看，那么就离不开CSS的渲染。话不多说我们一起来看吧。

1.CSS是什么

CSS是层叠样式表，所谓“层叠”就是针对html的元素/标签，可以同时应用多组CSS样式，将多组样式叠加在一起。“样式”就是大小、位置、间距、颜色、字体、边框、背景....统称为“样式”，它描述了一个网页张啥样。

CSS能够对网页元素的位置的排版进行像素精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。

1.1CSS基本语法

选择器 + {一条/N条声明}

选择器决定针对谁修改。
声明决定修改啥。
声明的属性是键值对，使用;区分键值对，使用：区分键和值。

<body>

<style>

p{

/* 设置字体颜色 */

color: red;

/* 设置字体大小 */

font-size: 30px;

}

</style>

<p>hello</p>

</body>

注意：

CSS要写到style标签中（后面还会介绍其他写法）。
style标签可以放到页面任意位置，一般是放置在head标签中。
CSS使用/**/作为注释。

2.引入样式

2.1内部样式表

内部样式是直接把CSS嵌入到HTML中，放到style标签里。



<style>

div{

font-size: 50px;

color: red;

}

</style>

代码展示：

<!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><!-- 在style标签中写的是css代码，他可以放置在head中也可以放置在body中 --><style>div{font-size: 50px;color: greenyellow;}</style><div>hello world！</div>
</body>
</html>

结果展示：

2.2行内样式表

行内样式是将CSS写到一个单独的.css文件中，有html通过link标签来引进来。

首先我们先来创建一个.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标签将css文件引入进来 --><link rel="stylesheet" href="style.css">
</head>
<body><div>hello world！</div>
</body>
</html>

css文件代码展示：

div {font-size: 50px;color: blue;
}

结果展示：

2.3外部样式

内部样式也叫内联样式，他是直接把CSS属性写到元素的style属性内。

代码展示：

<!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><div style="color: blueviolet; font-size: 60px;"> hello world!</div>
</body>
</html>

结果展示：

3.选择器

选择器就是要我们选中页面中的元素然后再进行操作。只有先选中元素才能生效。下面我们来分别来看一下四种选择器。

3.1选择器的种类

3.1.1基础选择器

标签选择器

标签选择器是用来选中页面中的所有同名标签的元素，它的缺点也很显而易见就是很难针对某个元素进行个性化制定。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签选择器</title>
</head>
<body><style>p {color: red;font-size: 30px;}div {color: burlywood;font-size: 20px;}</style><p>hello</p><p>world</p><div>css</div><div>JavaScript</div>
</body>
</html>

结果展示：

类选择器

在css中创建一个“类名”，这个类名对应一组css属性，制定让html元素应用这样的类名即可。

代码展示：

css文件代码：

.one {color: rosybrown;font-size: 50px;
}
.tow {color: blueviolet;font-size: 30px;
}

html文件代码：

<!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="Test3.css">
</head>
<body><div class="one">hello</div><div class="tow">hello</div>
</body>
</html>

结果展示：

id选择器

一个html标签中可以有一个id属性，这个属性的值会被作为身份标识的唯一值。所以通过id选择器就可以给制定元素设置样式了。

代码展示：

css代码展示：

#test {color: brown;font-size: 50px;
}

html代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器</title><link rel="stylesheet" href="Test4.css">
</head>
<body><div id="test">hello world</div>
</body>
</html>

结果展示：

通配符选择器

通配符选择器就是给所有的都设置样式。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符选择器</title>
</head>
<body><style>* {color: aquamarine;font-size: 40px;}</style><div>hello</div><p>world</p>
</body>
</html>

结果展示：

3.1.2复合选择器

上述都是css中最基础的选择器，其实在css中海油很多复杂的“复合选择器”，下面我们只给大家介绍一种后代选择器。

后代选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title>
</head>
<body><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
</body>
</html>

后代选择器的效果就是把上述三种基础选择器进行组合，同时能够体现出“标签的层次结构”。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title>
</head>
<body><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
</body>
</html>

结果展示：

除了后代选择器之外还有以下这些，小编这里就不给大家一一介绍了。

子选择器
并集选择器
伪类选择器

4.常用元素属性

4.1字体属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体属性</title>
</head>
<body><div class="one">hello</div><style>.one {font-family: '微软雅黑';font-size: 100px;font-weight: 900;font-style: italic;}</style>
</body>
</html>

结果展示：

我们也可以在控制台中通过勾选下面的条件来看到效果。

4.2文本属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本属性</title>
</head>
<body><div class="one">hello world</div><style>.one {font-size: 100px;/* 文本颜色 */color: brown;/* 文本对齐，左对齐(left)，右对齐(right)，居中对齐(center) */text-align: center;/* 文本装饰，加一个下划线... */text-decoration: underline;/* 文本缩进 */text-indent: 20px;/* 行高(行间距) */line-height: 100px;}</style>
</body>
</html>

结果展示：

注意：

这里颜色的写法有很多中，其中可以直接写表示颜色的单词，也可使用rgb的方式来表示，还可以使用十六进制的方式来表示。

4.3背景属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景设置</title>
</head>
<body><div class="background">1</div><style>.background {font-size: 100px;width: 200px;height: 160px;color: blueviolet;background-color: gold;/* 导入背景图 */border-image: url(cat.jpg);/* 禁止平铺 */background-repeat: no-repeat;/* 设置背景图的位置 */background-position: center center;/* 设置背景图的大小 */background-size: 2000px 1600px;}      </style>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景设置</title>
</head>
<body><div class="one"></div><style>.one {background-image: url(cat.jpg);height: 300px;background-repeat: no-repeat;background-position: center center;}</style>
</body>
</html>

结果展示：

4.4圆角矩形

我们之前生成的边框都是矩形的，但是如果我们想要让他变成圆边的该怎么弄呢？如下代码所示：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆角矩形</title>
</head>
<body><div>111</div><style>div {width: 200px;height: 100px;border: 2px solid green;border-radius: 10px;}</style>
</body>
</html>

结果展示：

4.5元素的显示模式

在CSS中，HTML的标签的显示模式有很多，此处只重点介绍两个：

块级元素和行内元素。

块级元素：

像我们之前学习的h1-h6、p、div、ul、ol...都是块级元素。

它的特点：

独占一行。
高度、宽度、内外边距、行高都可以控制。
宽度默认是父级元素宽度的100%（和父级元素一样框宽）。
是一个容器（盒子），里面可以放行内和块级元素。

行内元素/内联元素：
常见的元素有：a、strong、b、em、i、del、s、ins...

特点：

不独占一行，一行可以显示多个。
设置高度、宽度、行高无效。
左右外边距有效（上下无效），内边距有效。
默认宽度就是本身的内容。
行内元素只能容纳文本和其他行内元素，不能放块级元素。

行内元素和块级元素的区别：

块级元素独占一行，行内元素不独占一行。
块级元素可以设置宽高，行内元素不能设置宽高。
块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置。

使用display属性可以修改元素的显示模式：

display：block；（修改成块级元素）。
display：inline；（修改成行内元素）。

一般都是修改成块级元素，不会说是把块级元素修改成行内元素，也可以使用display：none实现元素隐身的效果。

4.6盒模型

每一个HTML元素就相当于是一个矩形的“盒子”，这个盒子是由这几个部分组成的。

边框：border
内容：content
内边距：padding
外边距：margin

如下图所示：

4.7内边距

padding是设置内容和边框之间的距离的。

基础写法：
默认内容是顶着边框来放置的，用padding来控制这个距离可以给四个方向都加上边距。

padding-top 上
padding-bottom 下
padding-left 左
padding-right 右

复合写法：

可以把多个方向的padding合并到一起。

padding：5px; 表示四个方向都是5px。
padding：5px 10px; 表示上下内边距是5px，左右内边距是10px。
padding：5px 10px 20px; 表示上内边距是5px，左右内边距是10px，下内边距是20px。
padding：5px 10px 20px 30px; 表示上内边距是5px，右内边距是10px，下内边距是20px，左内边距是30px。（顺时针）

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边距</title>
</head>
<body><div>设置内边距</div><style>* {/* 防止撑大盒子 */box-sizing: border-box;}div {padding-top: 20px;padding-bottom: 10px;padding-left: 20px;padding-right: 10px;}</style>
</body>
</html>

结果展示：

4.8外边距

基础写法：

控制盒子和盒子之间的距离。可以给四个方向都加上外边距。

margin-top 上
margin-bottom 下
margin-left 左
margin-right 右

复合写法：

规则与padding一样。

margin：10px; 四个方向都是10px
margin：10px 20px; 上下外边距为10px，左右外边距为20px。
margin：10px 20px 30px; 上外边距10px，左右外边距20px，下外边距30px。
margin：10px 20px 30px 40px; 上外边距10px，右外边距20px，下外边距30px，左外边距40px。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距</title>
</head>
<body><div>test</div><style>* {box-sizing: border-box;}div {margin-top: 10px;margin-bottom: 20px;margin-left: 30px;margin-right: 40px;}</style>
</body>
</html>

结果展示：

4.9弹性布局

我们先来看一下下面的这个案例。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局</title>
</head>
<body><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>

结果展示：

通过结果我们可以看出来里面的元素是垂直方向排列的，那么有的时候我们希望块级元素是可以水平方向排列。此时我们就可以使用弹性布局了。

如下所示：
代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局</title>
</head>
<body><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;/* 开启弹性布局 *//* 一旦开启了弹性布局，此时内部的子元素就会按照水平的方向进行排布，子元素里面的子元素是不受影响的 */display: flex;/* justify-content：设置水平方向的排列规则 */justify-content: space-between;/* align-items：设置垂直方向的排列规则 */align-items: center;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>

结果展示：