前端-CSS-zxst
CSS
层叠样式表，为了定义HTML标签的样式
-
内联样式
在标签内部通过 style 属性设置样式值
样式名:样式值;样式名:样式值; -
内部样式
在 head 标签内通过 style 标签选择器设置样式，供这个网页上的元素使用
-
外部样式
在 head 标签内通过 link 标签引入外部的 CSS 文件
内联样式
<div style="height:200px; width:200px; background-color: red;"></div>
内部样式
<head><!-- type="text/css"代表标签内部是css代码 --><style type="text/css">div {width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body><!--从结果上可以看出，内联的优先级要比内部样式的优先级高--><div style="height:200px; width:200px; background-color: red;"></div><div></div><div></div>
</body>
外部样式
内部样式和外部样式根据在head标签的先后顺序执行，有可能先执行完的样式会被后面的样式覆盖掉
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6UNbcyK-1677158598500)(C:\Users\99498\AppData\Roaming\Typora\typora-user-images\image-20230214204308547.png)]
需要在 html 文件中通过 link 标签导入这个 CSS 文件。
<head><style type="text/css">div {width: 200px;height: 200px;background-color: blue;}</style><!--注意不要忘记写rel属性--><link href="css/c1.css" rel="stylesheet"/>
</head>
<body><!--从结果上可以看出，内联的优先级要比内部样式的优先级高--><div style="height:200px; width:200px; background-color: red;"></div><div></div><div></div>
</body>
选择器
-
id 选择器
#div1 {width: 200px;height: 200px;background-color: blue; } <div id="div1"></div> -
class 选择器。一个标签可以有多个class值，中间用空格隔开
.d1 {width: 200px;height: 200px;background-color: blue; }<div class="d1"></div> <div class="d2"></div> <div class="d1 d2"></div> -
标签选择器，直接通过标签名找到元素
-
上下文选择器
-
后代选择器
父选择器 子选择器，找到这个父元素的所有子元素。子选择的元素是父元素的后代，不管是不是父子还是爷孙辈 -
子元素选择器
父选择>子选择，只找自己的亲儿子 -
兄弟选择器
选择器1 + 选择器2，通过选择器 1找选择器2的兄弟关系的元素通过哥哥找（相邻的）弟弟<style type="text/css">.d1 div{width: 300px;height: 300px;}<!--在定位到class="d1"之后，选择它的子标签中的div标签, 也能定位到孙子，重孙子...元素-->.d1 div{width: 300px;height: 300px;}<!--在定位到class="d1"之后，选择它的子标签中的div标签，只能定位到儿子元素-->.d1>div{width: 300px;height: 300px;}<!--在定位到class="c2"之后，选择它的兄弟标签，只能定位到当前元素的相邻的下一个元素-->.c2+span {font-size:40px;}<!--标签属性选择器-->input[type=number] {font-size: 30px;}<!--伪类选择器,鼠标放到该元素上，d3这个类才会使用这个样式-->.d3:hover {} </style><div class="d1"><div>11</div><div class = "c2">22</div><span>33</span> </div> <input type="number"></input>
-
-
属性选择器
通过标签的属性找到元素，
input[type=number] -
伪类选择器
选择器优先级
优先级从大到小：
- important
- 内联样軾
- id 选择器
- class 选择器
- 标签
.d3 {width: 150px;height: 150px;<!--!important 会提高该选择器的优先级-->background-color: red!important;
}