选择器:HTML元素
生命块:用;隔开的各种声明 {a;b}
每条声明有CSS属性名称和值,用冒号分割{属性:值;属性:值}
DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
style>
head>
<body>
<h1>我的第一个 CSS 实例h1>
<p>这是一个段落。p>
body>
html>
p {
color: red;
text-align: center;
}
p是选择器
color 是属性,red是属性值
align也是属性,center也是属性值
概念:选择器根据元素名称来选择HTML元素
实例:是对页面上的所有p元素居中对齐、红色文本
p {
text-align: center;
color: red;
}
概念:根据HTML的元素的id属性来选择特定元素,id是唯一的
实例:**id=“para1”**的HMTL元素
#para1 {
text-align: center;
color: red;
}
.center {
text-align: center;
color: red;
}
* {
text-align: center;
color: blue;
}
h1, h2, p {
text-align: center;
color: red;
}
"stylesheet" type="text/css" href="mystyle.css">
This is a heading
This is a paragraph.
概念:如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表
实例:在 HTML 页面的 部分内的
This is a heading
This is a paragraph.
"color:blue;text-align:center;">This is a heading
"color:red;">This is a paragraph.
"stylesheet" type="text/css" href="mystyle.css">
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表,其中第一优先级最高:
/* 这是一条单行注释 */
p {
color: red; /* 把文本设置为红色 */
}
Tomato、Orange、DodgerBlue、MediumSeaGreen、Gray
"background-color:Tomato;">番茄色
"background-color:Orange;">橙色
使用:background-color
实例
"background-color:DodgerBlue;">China
"background-color:Tomato;">China is a great country!
"color:Tomato;">China
"color:DodgerBlue;">China is a great country!
"color:MediumSeaGreen;">China, officially the People's Republic of China...
"border:2px solid Tomato;">Hello World
"border:2px solid DodgerBlue;">Hello World
"border:2px solid Violet;">Hello World
"background-color:rgb(255, 99, 71);">...
"background-color:#ff6347;">...
"background-color:hsl(9, 100%, 64%);">...
"background-color:rgba(255, 99, 71, 0.5);">...
"background-color:hsla(9, 100%, 64%, 0.5);">...
rgb(red, green, blue)
rgb(255, 0, 0) 显示为红色
rgb(255, 0, 0) 显示为黑色
rgb(255, 0, 0) 显示为白色
alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字
rgba(red, green, blue, alpha)
#rrggbb
其中rrggbb是介于00到ff之间的十六进制值,没看懂
hsla(hue, saturation, lightness)
色相(hue)是色轮上从 0 到 360 的度数。0 是红色,120 是绿色,240 是蓝色。
饱和度(saturation)是一个百分比值,0% 表示灰色阴影,而 100% 是全色。
亮度(lightness)也是百分比,0% 是黑色,50% 是既不明也不暗,100%是白色。
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字
background-color
background-image
background-repeat
background-attachment
background-position
body {
background-color: lightblue;
}
使用opacity
div {
background-color: green;
opacity: 0.3;
}
使用rgba的alpha透明值
div {
background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}