CSS 选择器

颜色取值

• 文字颜色 color
• 背景颜色 background-color

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue
rbg 表示法	红绿蓝三原色，取值 0-255	rgb(0,0,0)
rgba 表示法	红绿蓝三原色+透明度，取值 0-1	rgba(0, 0, 0, 0.5)
十六进制表示法	#开头	#000000 简写 #000

<p style="color: green;">Hello World!</p>
<p style="color: rgb(0, 255, 0);">Hello World!</p>
<p style="color: rgba(0, 255, 0, 0.5);">Hello World!</p>
<p style="color: #00FF00;">Hello World!</p>
<p style="color: #0F0;">Hello World!</p>

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

水平居中

margin: 0 auto;

div、p、h 需要设置元素的宽度，否则会自动撑满父元素

<div
  style="margin: 0 auto; width:200px; border: 1px solid #cccccc; text-align: center;"
>
  Hello World!
</div>

Hello World!

选择器

1、复合选择器

（1）后代选择器

父选择器 后代选择器: {
}

示例：

（2）子代选择器

父选择器 > 子代选择器: { }

示例：

2、并集选择器

选择器1, 选择器2: {
}

示例：

3、交集选择器

选择器1选择器2: { }

示例：

4、hover 伪类选择器

鼠标悬停状态

选择器:hover {
}

示例：

5、Emmet 语法

• 简写语法，快速生成代码
• VS Code 等代码编辑器自带

语法	示例	效果
标签名	div	<div></div>
类选择器	.red	<div class="red"></div>
id 选择器	#one	<div id="one"></div>
交集选择器	p.red#one	<p class="red" id="one"></p>
子代选择器	ul>li	<ul><li></li></ul>
内部文本	ul>li	<ul><li>Hello</li></ul>
创建多个	ul>li*3	<ul><li></li><li></li><li></li></ul>
创建自增	ul>li{$}*3	<ul><li>1</li><li>2</li><li>3</li></ul>
同级	div+p	<div></div><p></p>

css 提示

单词首字母	效果
fw	font-weight
w	width
h	height
bgc	backgroud-color
lh	line-height
w300+h200	width: 300px;height: 200px;