CSS基本标签使用

article/2025/10/8 6:36:14

1.CSS技术介绍

css是层叠样式表单。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

1.2CSS语法规则

选择器：浏览器根据“选择器”决定受css样式影响的HTML元素标签。

属性：是你要改变的样式名，并且每个属性都有一个值。

多个声明：如果定义多个声明，则要用分号分开。

1.3CSS和HTML的结合方式

第一种

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body> <!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。--><div style="border: 1px solid red;">div 标签 1</div><div style="border: 1px solid red;">div 标签 2</div><span style="border: 1px solid red;">span 标签 1</span> <span style="border: 1px solid red;">span 标签 2</span>
</body>
</html>

如果只使用HTML代码编写的话具有一定的缺点：

1.如果标签多了。样式多了。代码量会很大。

2.可读性也很差

3.HTML代码没什么复用性

第二种

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title> <!--style 标签专门用来定义 css 样式代码--><style type="text/css">/* 需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。*/div {border: 1px solid red;}span {border: 1px solid red;} </style>
</head>
<body><div>div 标签 1</div><div>div 标签 2</div><span>span 标签 1</span> <span>span 标签 2</span>
</body>
</html>

可以看出第二种方法代码量和代码复用性比第一种要好很多。

但是还存在一定的缺点：

1.只能在同一页面内复用代码，对于代码的复用还是不到位。

2.维护起来不方便，实际开发中会有很多这样的页面，修改起来工作量很大。

第三种

1.CSS内容

div{border: 1px solid yellow; 
}
span{border: 1px solid red; 
}

2.HTML文件代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title> <!--link 标签专门用来引入 css 样式代码--><link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body><div>div 标签 1</div><div>div 标签 2</div><span>span 标签 1</span> <span>span 标签 2</span>
</body>
</html>

这种方法完美的解决了第一种和第二种的问题。

1.4CSS选择器

1.4.1标签名选择器：

标签名{

属性：值；

}

1.4.2id选择器

#id属性值{

属性：值；

}

id选择器，可以让我们根据自己设定的id属性选择性的去使用这个样式。

1.4.3class选择器

.class属性值{

属性：值；

}

class选择器：可以让我们根据自己定义的class属性有效的选择性的去使用这个样式。

1.4.4组合选择器

选择器1，选择器2，选择器n{

属性：值；

}

组合选择器可以让我们选择多个选择器去使用一个css代码。

1.5常用样式

1.字体颜色

color：red；

2.宽度

width：10px；/width：10%；

3.高度

height：10px；/height：10%；

4.背景颜色

background-color：red；

5.字体样式

color：#FF0000；字体颜色

font-size：10px；字体大小

6.红色一像素实线边框

border：1px solid red；

7.div居中

margin-left：auto；

margin-right：auto；

8.文本居中

text-align：center；

9.超链接去下划线

text-decoration：none；

10.表格细线

table{

border:1px solid black;设置边框

border-collapse;将边框合并

}

td,th{

border:1px solid black;

}

11.列表去除修饰

ul{

list-style：none；

}

例：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>06-css 常用样式.html</title><style type="text/css"> div {color: red;border: 1px yellow solid;width: 300px;height: 300px;background-color: green;font-size: 30px;margin-left: auto;margin-right: auto;text-align: center;}table {border: 1px red solid;border-collapse: collapse;}td {border: 1px red solid;}a {text-decoration: none;}ul {list-style: none;} </style>
</head>
<body>
<ul><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li>
</ul>
<table><tr><td>1.1</td><td>1.2</td></tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是 div 标签</div>
</body>
</html>