【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 文档

  1. 外部样式表
  2. 内部样式表
  3. 行类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
添加了右外边距,以使文本不会覆盖背景图片

你可能感兴趣的:(CSS,css,html,css3)