CSS基本样式与元素选择器

最新推荐文章于 2024-07-06 20:00:00 发布

Taciturn_Grasp

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量233

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Taciturn_Grasp/article/details/104264396

版权

CSS基本样式与元素选择器

1. 什么是CSS？

			 层叠样式表（Cascading Style Sheets，简写CSS），是一种用来为HTML文档添加样式（字体、间距、位置、颜色、角度等显示效果）的计算机语言
			 HTML是内容的展示，而CSS是内容的装饰

2. CSS的引用方式

行内样式

在开始标签的内部可以设置一个叫做style的属性，属性的双引号内存放该元素代码的CSS样式。

<div style="存放该元素的css样式"></div>

内部样式

 在head标签中间新建一个style标签，该标签内部存放的就是网页文件中的CSS代码

CSS中的代码注释格式采用的是：/* 注释文字 */

<head>
<style>/*层叠样式表：css，专门用来修饰网页内容的显示效果*/
...
</style>
</head>

外部样式
在head标签中间新建一个link标签，通过href属性设置外部CSS文件地址。
rel是relationship的缩写（指定当前文档与被链接文档的关系）rel=“stylesheet”表示我们引用的是一个样式表（CSS）文件

<link rel="stylesheet" href="这里写css文件的地址">/*引入网页文件外部的一个css文件*/

3. CSS代码的基本格式

class命名（别称：类名）
class命名：谁都可以取，可以取任意次（就像人的姓名似的）

class命名的元素使用: . + 元素名称，来找到一个元素
id命名
ID命名：只能是唯一的，一旦被使用了一次，其他人再也不能用（就像是人的身份证号）

id命名的元素使用: # + 元素名称，来找到一个元素
此外直接写上标签的名称：如，div,p,h1等也可以直接找到元素

4. 常用复合选择器的使用

交集选择器

由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。 即同时带有两个选择器的才能使用你的交集选择器所规定属性

交际选择器

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的

任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
ps：并集选择器是你所写的css属性，都会额外添加到你选的选择器中去

后代元素选择器

	后代元素选择器是一个空格，空格前后各有一个选择器

作用是：找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的要求的元素
后代选择器
ps：一个标签中A标签包含B标签，B标签包含C标签，那么B，C都叫做A的后代

子代元素选择器

 子代元素选择器是一个大于号，大于号前后各有一个选择器

作用是：找到大于号的选择器所选中的元素的子元素中大于号后选择器的要求的元素
子代元素选择器
ps：一个标签中A标签包含B标签，B标签包含C标签，那么B叫做A的子代，C叫做B的子代，只要是子代都会满足子代选择器所添加的属性

相邻元素选择器

  相邻元素选择器是一个+号
  作用是：找到加号前的选择器所选中的元素紧跟其后第一个符合+号后选择器选中的元素

相邻元素选择器
ps：注意如果相邻的没有你算选的选择器，相邻选择器将没有目标，也就没有作用了

兄弟元素选择器

兄弟元素选择器是一个~号
作用是：找到_{号前的选择器所选中的元素紧跟其后所有符合}号后的选择器选中的元素

5. 样式优先级

!important是最重要的，加在任何地方都是顶级重要的。设置权重为：无穷大
行内样式，权重1000
ID选择器，单个权重100
类名选择器，属性选择器，伪类选择器，单个权重10
标签选择器，伪元素选择器，单个权重1
通配符选择器，关系选择器（+，>,~,""），否定伪类，权重0
复合选择器中要注意注意：这里0+0还是还是0，10个1相加不等于10，永远比1小，以此类推