2.HTML和CSS CSS介绍_二. html与css-CSDN博客

本文链接：https://blog.csdn.net/m0_59376721/article/details/122529130

文章目录

1.CSS语法规则
2.HTML和CSS的结合方式
3.选择器样式
4.CSS常用样式

1.CSS语法规则

1）选择器： 浏览器根据“选择器”决定CSS样式影响的HTML元素（标签）。
2）属性： 是要改的样式名，并且每个属性都有一个值。
3）多个声明： 如果要定义不止一个声明，则需要用分号将每个声明分开。
4）图示：
在这里插入图片描述
5）注释：/* 注释内容*/

2.HTML和CSS的结合方式

2.1结合方式一

1）在标签的style属性上设置"key:value value;"，修改标签样式。
2）需求：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.结合方式一</title>
</head>
<body>
    <div style="border:1px solid red;">标签一</div>
    <div style="border:1px solid red;">标签二</div>
    <span style="border:1px solid red;">标签三</span>
    <span style="border:1px solid red;">标签四</span>
</body>
</html>

3）问题： 样式多了，标签多了，代码庞大。可读性差

2.2结合方式二

1）style标签专门用来定义CSS样本代码。
2）需求： 分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.结合方式一</title>
    <style type="text/css">
        div{
            border:1px solid red;
        }
        span{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div >标签一</div>
    <div >标签二</div>
    <span >标签三</span>
    <span >标签四</span>
</body>
</html>

3）问题： 只能在同一个页面复用代码，不能在多个页面中复用css代码。

2.3结合方式三

1）link标签专门用来引入CSS样式代码。
2）需求： 分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.结合方式一</title>
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
    <div >标签一</div>
    <div >标签二</div>
    <span >标签三</span>
    <span >标签四</span>
</body>
</html>

3.选择器样式

3.1标签选择器

1）需求： 在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。并且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.标签名选择器</title>
    <style type="text/css">
        div{
            border:1px solid yellow;
            color:blue;
            font-size:30px;
        }
        span{
            border:5px dashed blue;
            color:yellow;
            font-size:20px;
        }
    </style>
</head>
<body>
    <div >标签一</div>
    <div >标签二</div>
    <span >标签三</span>
    <span >标签四</span>
</body>
</html>

3.2id选择器

1）需求： 分别定义两个div标签，第一个div标签定义id为id001，然后根据id属性定义css样式修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线。
第二个div标签定义id为id002，然后根据id属性定义css样式修改的字体颜色为红色，字体大小为20个像素，边框为5像素蓝色点线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.id选择器</title>
    <style type="text/css">
        #id001{
            border:1px solid yellow;
            color:blue;
            font-size:30px;
        }
        #id002{
            border:5px dotted blue;
            color:yellow;
            font-size:20px;
        }
    </style>
</head>
<body>
    <div id="id001">标签一</div>
    <div id="id002">标签二</div>
</body>
</html>

3.3class类选择器

1）需求1： 修改class属性值为class01的sapn或div标签，字体颜色为蓝色，，字体大小30个像素。边框为1像素黄色实线。
2）需求2： 修改class属性值为class02的div标签，字体颜色为灰色，，字体大小26个像素。边框为1像素红色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.class选择器</title>
    <style type="text/css">
        .class01{
            border:1px solid yellow;
            color:blue;
            font-size:30px;
        }
        .class02{
            border:1px solid red;
            color:grey;
            font-size:26px;
        }
    </style>
</head>
<body>
    <div class="class01">标签一</div>
    <div class="class02">标签二</div>
    <span class="class01">标签三</span>
</body>
</html>

3.4组合选择器

1）**需求：**修改class="class01"的div标签和id="id01"所有的span标签，字体颜色为蓝色，字体大小为20个像素，边框为1像素黄色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.组合选择器</title>
    <style type="text/css">
        .class01,#id01{
            border:1px solid yellow;
            color:blue;
            font-size:20px;
        }
    </style>
</head>
<body>
    <div class="class01">标签一</div>
    <span id="id01">标签二</span>
</body>
</html>

4.CSS常用样式

1）颜色：

color: red;

2）宽度：

width: 300px;

3）高度：

heigth: 400px;

4）背景颜色：

background-color: #0F2D4C

5）字体样式：

color: #FF0000; 字体颜色红色
font-size: 20px; 字体大小

6）红色1像素实线边框：

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:cooapse;/*将边框合并*/
}
td{
	border:1px solid black;/*设置边框*/
}

11）列表去除修饰：

ul{
	list-style:none;
}