【CSS Zoro 02】CSS引用 CSS注释 CSS颜色名颜色值RGB HEX HSL 背景色背景图像背景重复背景附着背景简写

Zanebla

于 2023-06-04 18:31:52 发布

阅读量432

点赞数 1

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_62629457/article/details/131033910

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS

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 heading</h1>
<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> 元素
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
添加了右外边距，以使文本不会覆盖背景图片

Zanebla

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS Zoro 02】CSS引用 CSS注释 CSS颜色名颜色值RGB HEX HSL 背景色背景图像背景重复背景附着背景简写

【CSS Zoro 02】CSS引用 CSS注释 CSS颜色名颜色值RGB HEX HSL 背景色背景图像背景重复背景附着背景简写其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）饱和度（saturation）是一个百分比值，0％表示灰色阴影，而 100％是全色，与灰度相反。RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。
复制链接

扫一扫