选择器:用于选中要设置样式的 HTML 元素。常见的选择器有标签选择器(如p、div)、类选择器(.classname)、ID 选择器(#idname)、属性选择器([attribute=value])等。
声明块:由属性和值组成,用于定义样式规则。例如color: red;中,color是属性,red是值。
规则集:由选择器和声明块组成,例如p { color: red; }表示选择所有p标签,将其文本颜色设置为红色。
常用属性
文本样式
color:设置文本颜色,如color: #333;或color: blue;。
font-size:设置字体大小,如font-size: 16px;。
font-family:设置字体族,如font-family: Arial, sans-serif;。
text-align:设置文本对齐方式,可选值有left、right、center、justify。
背景样式
background-color:设置背景颜色,如background-color: #f5f5f5;。
background-image:设置背景图片,如background-image: url('image.jpg');。
background-repeat:设置背景图片的重复方式,可选值有repeat、no-repeat、repeat-x、repeat-y。
盒模型
width和height:设置元素的宽度和高度。
padding:设置元素的内边距,可分别设置padding-top、padding-right、padding-bottom、padding-left,也可使用简写形式,如padding: 10px 20px 30px 40px;(上、右、下、左)。
border:设置元素的边框,如border: 1px solid #ccc;,也可分别设置border-width、border-style、border-color。
margin:设置元素的外边距,用法与padding类似。
定位
position:设置元素的定位方式,可选值有static(默认)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、sticky(粘性定位)。
top、right、bottom、left:用于配合position属性,指定元素在定位时相对于其父元素或视口的位置。