【CSS Zoro 02】CSS引用 CSS注释 CSS颜色名 颜色值RGB HEX HSL 背景色 背景图像 背景重复 背景附着 背景简写
CSS
-
-
- CSS use
- CSS 注释 comments
- CSS 颜色 colors
- RGB
- HEX
- HSL
- 背景色 background-color
- 背景图像 background-image
- 背景重复 background-repeat
- 背景附着 background-attachment
- 背景简写 shorthand
-
CSS use
浏览器根据样式表中的信息来格式化 HTML 文档
- 外部样式表
- 内部样式表
- 行类CSS
每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
head>
外部 .css 文件不应包含任何 HTML 标签
请勿在属性值和单位之间添加空格
margin-left: 20px;
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表
内部样式是在 head 部分的 style 元素中进行定义
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
style>
head>
行内样式（也称内联样式）可用于为单个元素应用唯一的样式
<h1 style="color:blue;text-align:center;">This is a headingh1>
<p style="color:red;">This is a para.p>
如果在链接到外部样式表之前定义了内部样式,则渲染的是外部样式表
<style>
h1 {
color: orange;
}
style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式
CSS 注释 comments
/* 单行注释 */
p {
color: red; /* 单行注释 */
}
/* 多行
注释 */
CSS 颜色 colors
指定颜色是通过使用预定义的颜色名称或 RGB、HEX、HSL
指定不透明度可以使用RGBA、HSLA 值
<h1 style="background-color:Tomato;">番茄色h1>
<h1 style="background-color:Orange;">橙色h1>
<h1 style="background-color:DodgerBlue;">道奇蓝h1>
<h1 style="background-color:MediumSeaGreen;">中海绿色h1>
<h1 style="background-color:Gray;">灰色h1>
<h1 style="background-color:SlateBlue;">板岩蓝h1>
<h1 style="background-color:Violet;">紫色h1>
<h1 style="background-color:LightGray;">浅灰h1>
HTML/CSS支持的140中标准颜色名
HTML元素背景色
background-color: DodgerBlue;
文本颜色
color: MediumSeaGreen;
边框色
border: 2px solid Violet;
颜色值
与颜色名Tomato等效的有
rgb(255,99,71)
#ff6347
hsl(9,100%,64%)
透明
rgba(255,99,71,0.5)
hsla(9,100%,64%,0.5)
RGB
rgb(red, green, blue)
每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度
要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)，没有光源
要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)，光源拉满
通常为所有 3 个光源使用相等的值来定义灰色阴影，黑与白之间则是灰色地带
RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度
HEX
在 CSS 中，可以使用以下格式的十六进制值指定颜色
#rrggbb
其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）
通常为所有 3 个光源使用相等的值来定义灰色阴影
HSL
色相，饱和度和明度指定颜色
hsla(hue, saturation, lightness,alpha)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色，与灰度相反
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色
饱和度可以描述为颜色的强度
100％ 是纯色，没有灰色阴影
50％ 是 50％ 灰色，但是仍可以看到颜色
0％ 是完全灰色，无法再看到颜色
通常通过将饱和度设置为 0 来定义灰色阴影
并将亮度从 0％ 到 100％ 进行调整可以得到更深/更浅的阴影
背景色 background-color
CSS 背景属性用于定义元素的背景效果
background-color 属性指定元素的背景色
body {
background-color: lightblue;
}
h1,div,p等元素同样可以拥有自己的背景色
不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0
值越低，越透明
div {
background-color: green;
opacity: 0.3;
}
注意:使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读
如果不希望对子元素应用不透明度，请使用 RGBA 颜色值
背景图像 background-image
默认情况下，图像会重复，以覆盖整个元素
body {
background-image: url("paper.gif");
}
使用背景图像时，请使用不会干扰文本的图像
还可以为特定元素设置背景图像，例如 元素
p
{
background-image: url("paper.gif");
}
背景重复 background-repeat
默认情况下，background-image 属性在水平和垂直方向上都重复图像
某些图像应只适合水平或垂直方向上重复，否则看起来会奇怪
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
如需垂直重复图像，请设置 background-repeat: repeat-y;
如需只显示一次，请设置 background-repeat: no-repeat
background-position 属性用于指定背景图像的位置
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
背景附着 background-attachment
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
body {
background-image: url("tree.pnd");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
随页面其他元素一同滚动
background-attachment: scroll;
背景简写 shorthand
使用简写属性在一条声明中设置背景属性：
body {
background: #ffffff url("/i/photo/tree.pnd") no-repeat right top;
margin-right: 200px;
}
简写属性的属性值顺序为:color image repeat attachment position
添加了右外边距，以使文本不会覆盖背景图片