CSS使用规则
选择器 { 属性：值； 属性：值； }
选择器
元素选择器
p { text-align: center; color: red; }
id 选择器
id 具有全局唯一性，
#para1 { text-align: center; color: red; }
类选择器
.center { text-align: center; color: red; } # 只有具有 class="center" 的 <p> 元素会居中对齐 p.center { text-align: center; color: red; }
通用选择器
* { text-align: center; color: blue; }
分组选择器
# 未使用分组选择器 h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } # 使用分组选择器，使用“,”分开，能尽最大可能减少代码 h1, h2, p { text-align: center; color: red; }
| 选择器 | 例子 | 例子描述 |
| .class | .intro | 选取所有 class=“intro” 的元素。 |
| #id | #firstname | 选取 id=“firstname” 的那个元素。 |
| * | * | 选取所有元素。 |
| element | p | 选取所有 元素。 |
| element,element,… | div, p | 选取所有 元素和所有 元素。 |
添加 CSS三种方法
引入外部 CSS
<link rel="stylesheet" href="/demo/css/mystyle.css">
引入内部 CSS
<style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style>
行内 CSS
# 利用 style 属性 <p style="color:red;">This is a paragraph.</p>
层叠顺序
优先级：行内元素最高
- 行内样式（在 HTML 元素中）
- 外部和内部样式表（在 head 部分）
- 浏览器默认样式
注释
在
在HTML和CSS文件中使用 注释
颜色
背景色
background-color
文本颜色
color
边框颜色
border:2px solid Tomato; # 边框大小 是否有边框 颜色
RGB 颜色
根据三原色来调节颜色
rgb(red, green, blue)
RGBA 值
多了一个 alpha 通道，可以指定透明度
rgb(red, green, blue, 0 - 1) # 1 表示不透明，0 表示全透明
HEX 颜色
#rrggbb 其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。
HSL 颜色
hsla(hue, saturation, lightness) 色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。 饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。 亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
HSLA 值
hsla(hue, saturation, lightness, alpha) alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
背景
常用属性
- background-color
background-color 属性指定元素的背景色。
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明
# 文本也会跟着变透明 div { background-color: green; opacity: 0.3; } # 文本不随背景透明度的改变而改变 div { background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */ }
- background-image
background-image 属性指定用作元素背景的图像。
默认情况下，background-image 属性在水平和垂直方向上都重复图像。
body { background-image: url("paper.gif"); }
- background-repeat
# 水平方向上重复图像 body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } # 垂直方向上重复图像 body { background-image: url("gradient_bg.png"); background-repeat: repeat-y; } # 背景图像只显示一次 body { background-image: url("tree.png"); background-repeat: no-repeat; }
- background-attachment
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：
# 固定背景图片，会从页面消失 body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } # 背景图随页面滚动，不会从页面消失 body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: scroll; }
- background-position
background-position 属性用于指定背景图像的位置。
# 将图片放在右上角 body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; }
简写属性
body { background: #ffffff url("tree.png") no-repeat right top; } # 简写顺序为background-color background-image background-repeat background-attachment background-position
属性图表
| 属性 | 描述 |
| background | 在一条声明中设置所有背景属性的简写属性。 |
| background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
| background-clip | 规定背景的绘制区域。 |
| background-color | 设置元素的背景色。 |
| background-image | 设置元素的背景图像。 |
| background-origin | 规定在何处放置背景图像。 |
| background-position | 设置背景图像的开始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
| background-size | 规定背景图像的尺寸。 |
边框
常用属性
border-style 属性指定要显示的边框类型。
允许以下值：
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：
p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style: dotted; border-width: thick; }
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：
p.one { border-style: solid; border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */ } p.two { border-style: solid; border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */ } p.three { border-style: solid; border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */ }
border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色：
- name - 指定颜色名，比如 “red”
- HEX - 指定十六进制值，比如 “#ff0000”
- RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
- HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
- transparent
**注释：**如果未设置
border-color，则它将继承元素的颜色。
p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: dotted; border-color: blue; }
border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
p.one { border-style: solid; border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */ }
单独设定每个边
p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }
边格式简写
/* 四个值 上 右 下 左*/ p { border-style: dotted solid double dashed; } /* 三个值 上 右左 下 */ p { border-style: dotted solid double; } /* 两个值 上下 右左*/ p { border-style: dotted solid; } /* 一个值 */ p { border-style: dotted; }
border-radius 属性用于向元素添加圆角边框：
p { border: 2px solid red; border-radius: 5px; }
