HTML和CSS——CSS【感谢尚硅谷】_html 、感谢页面-CSDN博客

本文链接：https://blog.csdn.net/qq_32131839/article/details/118911075

CSS

参考手册
定义：**一种描述 HTML 文档样式的标记语言。**描述应该如何显示 HTML 元素
- Cascading Style Sheet，层叠样式表单
- 用于增强控制网页样式信息与网页内容分离

IDEA-tips

ctrl+r：替换

语法规则

选择器{属性: 值}
选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素
属性（property）：
- 你要改变的样式名，并且每个属性都有一个值。
- 用冒号分隔，由花括号包围，形成一个完整的样式声明（declaration）
多个声明：
- 如果要定义不止一个声明，则需要用分号将声明隔开。
- 最后一条可以不加冒号。但建议都加
- 一般一行只描述一个属性

注释：

/* 注释内容 */
/* 
   注释内容
*/

CSS的使用方法

CSS需要与HTML结合使用

使用方式：

在标签的style属性上设置“key: value value;”，修改标签样式
1. ```
<div style="border: 1px solid red;">div标签1</div>
<div style="border-width: 1px; border-style: solid; border-color: aquamarine">div标签2</div>
```
2. 缺点：
  1. 如果标签多了。样式多了，代码量非常庞大
  2. 可读性非常差
  3. CSS代码没什么复用性可言

在head标签中，使用style标签来定义各种自己需要的CSS样式

格式：

xxx{

key: value value;

}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        /*
            head中的style标签里保存的都是css语句
            因此要用css的方式来进行注释
        */
        div{
            border: 1px solid yellow;
        }
        span{
            border: 1px solid yellow;
        }
    </style>
</head>

缺点:
1. 只能在同一页面内复用代码，不能再多个页面中复用css代码
2. 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大

把css样式写成一个单独的css文件，再通过link标签引用，即可复用

创建css文件：new->Stylesheet

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="css.css"/>
</head>

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

CSS选择器

标签名选择器
1. 格式：
  
  标签名{
  
  属性: 值;
  
  }
2. 作用：可以决定那些标签被动的使用这个样式
3. 使用方式：若给你提供了样式文件，标签名选择器可以直接复制到head标签中使用
4. ```
div{
    border: 1px dashed gainsboro;
    color: aqua;
    font-size: 30px;
}
span{
    border: 5px solid blanchedalmond;
    color: darkred;
    font-size: 20px;
}
```

id选择器

格式：
```
#id 属性值{
    属性: 值;
}
```

可以让我们通过id属性选择性的去使用这个样式

#id001{
    color: darkred;
    font-size: 20px;
    border: 10px yellowgreen solid;
}
#id002{
    color: blanchedalmond;
    font-size: 30px;
    border: black 3px dotted;
}

<head>    <link rel="stylesheet" type="text/css" href="css.css"/></head><body><!--    定义两个div标签，    第一个div标签的id为id001，根据id将css样式修改字体颜色、字体大小、边框    第二个div标签的id为id002，根据id将css样式修改字体颜色、字体大小、边框--><div id="id001">div标签1</div><div id="id002">div标签2</div></body>

【注】先定义好标签，然后在html中选择你希望使用的id，但是html中的id属性值不可以重复

class选择器（类选择器）

格式：
```
.class 属性值{    属性: 值;}
```

可以通过class属性有效的选择性地去使用这个样式

.class01{    color: orangered;    font-size: 20px;    border: 1px yellowgreen solid;}.class02{    color: rebeccapurple;    font-size: 10px;    border: black 5px dotted;}

<body><!--    定义两个div标签，    第一个div标签的class为class01，根据id将css样式修改字体颜色、字体大小、边框    第二个div标签的class为class02，根据id将css样式修改字体颜色、字体大小、边框--><div class="class01">div标签1</div><div class="class02">div标签2</div></body>

【注】先定义好标签，然后在html中选择你希望使用的class，并且html中的class属性值可以重复

组合选择器

格式：

选择器1, 选择器2,……, 选择器n{    属性: 值;}

组合选择器可以让多个选择器共用同一个代码

.class01, #id001{    color: orangered;    font-size: 20px;    border: 1px yellowgreen solid;}.class02{    color: rebeccapurple;    font-size: 10px;    border: black 5px dotted;}

<body>    <!--    修改class01的div标签和id001的span标签    字体颜色、字体大小、边框    -->    <div class="class01">div标签1</div>    <div class="class02">div标签2</div>    <span id="id001">span标签1</span>    <span>span标签2</span></body>

css的常用样式

字体颜色：color，可以写名字、rgb(255,0,0)、#00F6DE
宽度：width，可以写19px、20%
高度：height，可以写19px、20%
背景颜色：background-color，可以写名字、rgb(255,0,0)、#00F6DE
字体样式：
1. color: #FF0000;
2. font-size: 20px;
红色1像素实线边框：border: 1px solid red;
DIV居中：（包裹内容的容器居中）
1. margin-left: auto;
2. margin-right: auto;
文本居中：text-align: center;
超链接去下划线：text-decoration: none;
表格细线：

table{

border: 1px solid black;

border-collapse: collapse; # 边框合并

}

td,th{

border: 1px solid black;

}
列表去除修饰

ul{

list-style: none;

}