CSS 第四章选择器

来源：互联网发布：人工智能书智能菌知乎编辑：程序博客网时间：2024/05/05 20:11

CSS 第四章选择器

1、标签选择器
<style type="text/css">
body,p,dl,ul,ol{
color:red;
}
</style>

2、类选择器
<style type="text/css">
.rd{color:red;}
.se{font-size:24px}
</style>
</head>
<body>
<p class="rd">段落样式</p>
<h3 class="se">标题样式</h3>

3、ID选择器
<style type="text/css">
#fontstyle{color:red;font-weight:bold;}
#textstyle{color:blue;font-size:24px}
</style>
</head>

<body>
<h3 id=textstyle>学习ID选择器</h3>
<p id=textstyle>此处使用ID选择器aa控制段落样式</p>
<p id=fontstyle>此处使用ID选择器bb控制段落样式</p>

类选择器与ID选择器的区别：
1、类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记中只能使用一次。
2、ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器发生冲突时，优先使用ID选择器。

4、全局选择器
<style type="text/css">
*{color:blue;font-size:24px}
</style>
</head><body>
<h1>全局选择器</h1>
<p>使用全局选择器</p>

5、组合选择器
<style type="text/css">
p{color:blue;}
p.par{color:red;}
.par{color:green;}
</style>
</head><body>
<p>这是普通段落</p>
<p class="par">此处使用混合选择器</p>
<h1 class="par">我是一个标题</h1>

6、继承选择器
<style type="text/css">
h1{color:red;text-decoration:underline;}
h1 strong{color:blue;font-size:40px;}
</style></head>
<body>
<h1>测试CSS的<strong>继承</strong>效果</h1>
<h1>此处使用继承<span>选择器</span>了么?</h1>

7、伪类
<style>
a:link{color:red;} //未访问的链接
a:visited{color:green;}//已访问的链接
a:hover{color:blue;}//鼠标移动到链接上
a:active{color:orange;}//选定的链接
</style>
</head><body>
<a href="">链接到本页</a>
<a href="http://www.sohu.com">搜狐</a>

4.3 常用单位
<h3>命名颜色</h3>
<p style="color:aqua">颜色：水绿</p>
<p style="color:lime">颜色：浅绿</p>
<p style="color:olive"> 颜色：橄榄</p>

<p style="color:teal"> 颜色：深青</p>
<p style="color:navy">颜色：深蓝</p>

<p style="color:purple">颜色：紫</p>
<p style="color:fuchsia">颜色：紫红</p>
<p style="color:maroon">颜色：褐色</p>

<p style="color:silver">颜色：银</p>
<p style="color:gray">颜色：灰</p>

<p style="color:white"> 颜色：白</p>
<p style="color:black"> 颜色：黑</p>

<h3>RGB颜色</h3>
RGB=red + green + blue
十进制颜色：取值 0~255 或 0%~100%
<p style="color:rgb(123,0,25)">RGB颜色</p>
<p style="color:rgb(45%,0%,25%)">RGB颜色</p>

<h3>十六进制颜色</h3>
基本格式：#RRGGBB
取值范围：00~FF
<p style="color:#FF6600">十六进制：橙色</p>

<h3>颜色对照表</h3>
颜色名称十六进制值 RGB值
红色 #FF0000 rgb(255,0,0)
绿色 #00FF00 rgb(0,255,0)
蓝色 #0000FF rgb(0,0,255)
白色 #FFFFFF rgb(255,255,255)
黑色 #000000 rgb(0,0,0)

橙色 #FF6600 rgb(255,102,0)
黄色 #FFFF00 rgb(255,255,0)
紫色 #800080 rgb(128,0,128)
紫红色 #FF00FF rgb(255,0,255)
水绿色 #00FFFF rgb(0,255,255)

灰色 #808080 rgb(128,128,128)
褐色 #800000 rgb(128,0,0)
橄榄色 #808000 rgb(128,128,0)
深蓝色 #000080 rgb(0,0,128)

银色 #C0COCO rgb(192,192,192)
深青色 #0080808 rgb(0,128,128)

<h3>HSL色彩模式</h3>
HSL=hue（色调）+ saturation（饱和度）+ lightness（亮度）
取值范围：hsl(0~360,0%~100%,0%~100%)
<p style="color:hsl(0,0%,0%)">HSL颜色：红色</p>
<p style="color:hsl(120,50%,50%)">HSL颜色:绿色</p>
<p style="color:hsl(240,100%,100%)">HSL颜色：蓝色</p>
注：工业颜色标准，运用最广

<h3>HSLA色彩模式</h3>
hsla(<length>,<percentage>,<percentage>,<opacity>)
<opacity>不透明度，取值范围0~1
<p style="color:hsla(120,50%,50%,0.5)">HSLA颜色：绿色</p>

<h3>RGBA色彩模式</h3>
<p style="color:rgba(0,0,255,0.5)">RGBA颜色：蓝色</p>

<h3>网络安全色</h3>
红绿蓝三基色：各6种，6*6*6=216
取值范围：0,51,102,153,204,255
注：在任何操作系统和浏览器上显示都是相同的

大小
<h3>绝对单位</h3>
1英寸（in）=2.54厘米=72磅(pt)：字体大小用磅 pt
1厘米=0.394英寸

<h3>相对单位</h3>
em:
h1{font-size:20pt}
h2{font-size:15pt}
p{font-size:10pt}
h1,h2,p{margin-left:1em}
结果：h1,1em=20pt;h2,1em=15pt;p,1em=10pt

用法二：em值有时还相对于其上级元素的字体大小

px 像素：应用最广
1px 是屏幕上的小方格

ex: 以给定字体的小写字母"x"高度作为基

0 0

CSS 第四章 选择器

CSS 第四章选择器