CSS新手入门笔记【导入方法、选择器介绍、选择器优先级、属性详细介绍、盒子模型】
warning:
这篇文章距离上次修改已过471天，其中的内容可能已经有所变动。
CSS是一种用于描述网页样式的语言，主要包括以下部分：
导入方法：
CSS可以通过以下方式导入：
- 在HTML文件中使用
<style>标签。 - 使用
@import规则，在CSS文件中导入另一个CSS文件。 - 使用
<link>标签，在HTML文件的<head>部分链接外部CSS文件。
- 在HTML文件中使用
选择器介绍：
- 标签选择器：直接使用HTML标签作为选择器。
- 类选择器：以
.开头，可以应用于任何元素。 - ID选择器：以
#开头，用于特定元素的样式。 - 伪类选择器：用于定义元素的特殊状态，如
:hover、:active等。 - 伪元素选择器：用于在元素内容前后插入特定内容，如
:before、:after。 - 属性选择器：用于选择具有特定属性的元素，如
[href="value"]。 - 相邻选择器：
+，选择紧跟在另一个元素后的元素。 - 子选择器：
>，选择作为某元素直接子元素的元素。 - 后代选择器：空格，选择某元素下的所有子元素。
- 通配选择器：
*，选择所有元素。 - 组选择器：多个选择器可以用逗号分隔，任何一个选择器匹配的元素都会应用样式。
选择器优先级：
CSS解析时，如果多个选择器同时应用于同一元素，会通过以下优先级规则决定最终应用哪个样式：
- 内联样式
style属性（Inline styles） - 整个选择器中的
!important规则 - ID选择器（
#id） - 类选择器、属性选择器和伪类选择器（
.class,[attr=value],:pseudo-class） - 标签选择器和伪元素选择器（
element,::pseudo-element） - 通配选择器（
*） - 继承的样式
- 内联样式
CSS属性详细介绍：
- 字体属性：
font-family,font-size,font-weight,font-style等。 - 文本属性：
color,text-align,text-decoration,text-transform等。 - 背景属性：
background,background-color,background-image等。 - 边框属性：
border,border-style,border-width,border-color等。 - 布局属性：
display,position,top,right,bottom,left,float,clear等。 - 尺寸属性：
width,height,padding,margin等。 - 透明度属性：
opacity。 - 阴影属性：
box-shadow,text-shadow等。 - 转换属性：
transform。 - 动画属性：
animation。
- 字体属性：
盒子模型：
CSS盒子模型由四个部分组成：
- 内容（Content）
- 内边距（Padding）
- 边框（Border）
- 外边距（Margin）
可以通过以下属性调整这些部分：
width和height应用于内容区。padding应用于内边距区。border应用于边框区，可以单
评论已关闭