什么是 CSS
CSS(Cascading Style Sheets,层叠样式表)是为 web 内容添加样式的代码。
和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。
CSS 是一门样式表语言,可以用它来选择性地为 HTML 元素添加样式。
一般在 HTML 文件中头部(也就是 head 标签之间)引入 CSS:
<link href="styles/style.css" rel="stylesheet" />
CSS 创建
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
一般情况下,优先级由高到低如下:
- 内联样式 Inline style
- 内部样式 Internal style sheet
- 外部样式 External style sheet
- 浏览器默认样式
CSS 规则集
包含以下部分:
- 选择器(Selector):HTML 元素的名称位于规则集开始。
- 声明(Declaration):一个单独的规则,如
color: red;
用来指定添加样式元素的属性。 - 属性(Properties):改变 HTML 元素样式的途径,由编写人员决定修改哪个属性以改变规则。
- 属性值(Property value):在属性的右边,冒号后面的值,它从指定属性的众多外观中选择一个值。
选择器选择一个或多个元素,给其添加样式。
常用的选择器类型
- 元素选择器(也称作标签或类型选择器),例如
p
选择<p>
- 类选择器,例如
.my-class
选择<p class="my-class">
- ID 选择器,例如
#my-id
选择<p id="my-id">
- 属性选择器,例如
img[src]
选择<img src="myimage.png">
但不是<img>
- 伪类选择器,例如
a:hover
选择仅在鼠标指针悬停在链接上时的<a>
元素
选择器分类
- 基本选择器
- 通用选择器:选择所有元素
*
- 元素选择器:按照给定的节点名称匹配
- 类选择器:按照给定的 class 属性的值匹配
.classname
- ID 选择器:按照
id
属性匹配一个元素#idname
- 属性选择器:按照给定的属性
[attr]
- 通用选择器:选择所有元素
- 分组选择器(Grouping selector)
- 用
,
将不同选择器组合在一起
- 用
- 组合器(Combinator)
- 后代组合器:空格,组合器选择前一个元素的后代节点
- 直接子代组合器:
>
组合器选择前一个元素的直接子代的节点 - 一般兄弟组合器:
~
组合器选择兄弟元素 - 紧邻兄弟组合器:
+
组合器选择相邻元素 - 列组合器:
||
组合器选择属于某个表格行的节点
- 伪选择器(Pseudo)
- 伪类:
:
对按照未被包含在文档树中的状态信息匹配 - 伪元素:
::
对无法用 HTML 语义表达的实体匹配
- 伪类:
盒子模型
页面里大部分 HTML 元素都可以被看作若干层叠的盒子。
CSS 布局主要是基于盒子模型。在页面上占用空间的每个盒子都有类似的属性:
padding(内边距):是指内容周围的空间。
border(边框):是紧接着内边距的线。
margin(外边距):是围绕元素边界外侧的空间。
CSS 规则
有相同的元素选择器,有相同的优先级,顺序在最后的生效。
一些设置在父元素上的 CSS 属性是可以被子元素继承的,有些则不能。
一个选择器的优先级可以说是由三个不同的值(或分量)相加,
可以认为是 百(ID)十(类)个(元素),三位数的三个位数:
- ID:选择器中包含 ID 选择器则百位得一分。
- 类:选择器中包含类选择器、属性选择器或者伪类则十位得一分。
- 元素:选择器中包含元素、伪元素选择器则个位得一分
通用选择器(*
)、组合符(+
、>
、~
、' ')
和调整优先级的选择器(:where()
)不会影响优先级。文章来源:https://www.toymoban.com/news/detail-822826.html
mdn文章来源地址https://www.toymoban.com/news/detail-822826.html
到了这里,关于css 起步的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!