02_后端开发工程师需要的css笔记_后端开发需要掌握的css样式-CSDN博客

本文链接：https://blog.csdn.net/qq_41781632/article/details/121707572

0. CSS概述

作用 : 页面美化和布局控制
概念 : 层叠样式表(层叠 : 多个样式可以作用在一个HTML元素上,同时失效)

1. CSS与HTML结合

三种结合方式 :

1.内联样式 :
- 在HTML标签内加入style属性,在style属性里写css代码
- 没有降低耦合性,不常用
- 作用域 : 标签
2.内部样式
- 在head标签里定义style标签,在style标签里写css代码
- 作用域 : 此网页
3.外部方式
- 新建一个css文件夹,定义css文件,在里面写css代码
- 在head标签里定义link标签,在link的href属性里写css代码的URL
- 作用域 : 全部

示例 :

方式1 : 
<div style = "color:red;"> dddd </div>

方式2 : 
<head>
    <style>
        div{
            color:red;
        }
    </style>
</head>
<body>
     <div>dddd</div>
</body>
        
方式3 : 
css文件夹下a.css:
div{
    color:red;
}
html: 
<head>
    <link rel = "stylesheet" href = "css/a.css">
</head>
<div>dddd</div>

2. 语法格式

格式 :

选择器{
	属性名1:属性值1;
	属性名2:属性值2;
	...
}

选择器 : 筛选具有相似特征的元素
最后一对属性键值对可以不加分号

3. 选择器

3.1 基础选择器

3.1.1 id选择器

语法 :
```
#id属性值{

}
```
id建议唯一,在标签中定义id值

3.1.2 元素选择器(标签)

针对具有相同标签的元素
语法 :
```
标签名称{

}
```
id选择器优先级大于元素选择器

3.1.3 类选择器

语法 :
```
.class属性值{

}
```
在标签中定义class属性值,需要相同时建议class
类选择器优先级大于元素选择器

3.1.4 优先级

id>class>元素

3.2 拓展选择器

3.2.1 通用选择器

语法 :

*{

}

全局所有都生效

3.2.2 并集选择器

对多个选择器同时生效

语法 :

选择器1,选择器2{

}

3.2.3 子选择器

通过空格筛选父选择器下的子选择器

语法 :

选择器1 选择器2{

}

3.2.4 父选择器

筛选子选择器2下的父选择器1

语法 :

选择器1>选择器2{

}

3.2.5 属性选择器

选择该元素下属性名=属性值的元素

语法 :

元素名称[属性名="值"]{

}
<!-- 示例 -->
<style>
	input[type="text"]{
    	boder : 5px solid;    
	}
</style>
<input type = "text">

3.2.6 伪类选择器

用来控制一些元素具有的状态
例如超链接标签a具有的状态有:
- link : 初始化状态
- visited : 被访问过的状态
- active : 正在访问状态
- hover : 鼠标悬浮状态

语法 :

元素 : 状态{
    
}
<!-- 示例 -->
<style>
    a:link{
		color:pink;
    }
	a:link{
		color:yellow;
    }
	a:link{
		color:red;
    }
	a:link{
		color:black;
    }
</style>
<a hred = "#">d</a>