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"高度作为基
转载请注明原文地址: https://ju.6miu.com/read-1201804.html
