常用选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
常用选择器:
#abc{
color: aqua; /*字体颜色*/
letter-spacing: 10px; /*字体间距*/
text-indent: 10px; /*文本缩进*/
text-align: center; /*文本对齐*/
font-size: 10px; /*字体大小*/
font-family:'Times New Roman', Times, serif; /*字体字形*/
font-weight: bold; /*字体加粗*/
font-style: italic; /*斜体字*/
line-height: 30px; /*行高*/
text-decoration: underline; /*文本装饰,下划线:underline*/
outline: aqua 5px dashed; /*外轮廓*/
border: dashed red 2px; /*表格边框*/
cursor: crosshair; /*鼠标样式*/
}
.blue{
color: blue;
}
.size{
font-size: 20px;
}
复合选择器:
b.blue{
font-size: 20px;
} /*交集选择器*/
h1,span{
color: green;
}/*并集选择器*/
/* *{}可以选中所有h1,span */
关系选择器:
div > span{
color:salmon;
}/*子元素选择器,选择比div小一级的span元素*/
div span{
color: silver;
}/*后代选择器,选择div里的所有span元素*/
p + span{
color:coral;
}/*选择p后面紧挨的那个span元素*/
p ~ span{
color: cornsilk;
}/* 选择p后面所有的span元素*/
属性选择器:
p[class]{
color: aqua;
}
/* [属性名]选择含有指定属性的元素 */
p[class=12]{
color: aqua;
}
/* [属性名=属性值]选择含有属性和属性值的元素 */
p[class^=12]{
color: aqua;
}
/* [属性名^=属性值]选择以12属性值开头的元素 */
p[class$=34]{
color: aqua;
}
/* [属性名$=属性值]选择以34属性值结尾的元素 */
p[class*=34]{
color: #00ffff;
}
/* [属性名*=属性值]选择属性值有34属性的元素 */
伪类选择器:
ul>li:first-child{
color: aqua;
}
/* :first-child--第一个子元素,:last-child--最后一个子元素,
:nth-child()--选中第n个子元素,odd选中奇数,even选中偶数 */
a:link{
color: azure;
}
/* link表示正常的链接 给超链接设置属性*/
a:visited{
color: red;
}
/* :visited用来表示访问过的链接,由于隐私原因visited这个伪类只能修改链接的颜色 只适用于超链接*/
a:hover{
font-size: 30px;
}
/* :hover用来表示鼠标移入的状态 */
a:active{
color: royalblue;
}
/* 表示鼠标正在点击的状态 */
伪元素选择器:
:root{
background-color: aqua;
/* 设置整个网页的样式 */
}
p::first-letter{
font-size: 50px;
}
/* 表示第一个字母 */
p::first-line{
background-color: salmon;
}
/* ::first-line 表示第一行 */
p::selection{
color: rgb(7, 7, 7);
}
/* ::selection 表示选中的内容 */
p::before{
content: '开始';
color: slateblue;
}
p::after{
content: '结束';
color: tan;
}
/* 元素的开始和结束位置;必须结合content使用,开始和结束显示content中的内容;
并且无法用鼠标选中 */
样式的继承:
p{
color: bisque;
}
/* 为一个元素设置的样式也会应用到他的后代元素上,并不是所有的样式都会被继承,比如布局 背景等,38讲 */
选择器的权重:
div{
color:blanchedalmond;
}
.red{
color: brown;
}
/* 样式冲突,通过不同的选择器选中相同的元素,并且为相同的样式设置不同的值时,
此时发生样式的冲突,应用哪个样式由选择器的权重(优先级)决定,
权重:
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器(*) 0,0,0,0
继承选择器 没有优先级
比较优先级时需要将优先级相加计算,分组选择器单独计算,(一般选择器越具体优先级越高)
如果优先级计算后相等,则优先使用靠下的
可以在某一个样式后面加一个(!important)就可以获取到最高的优先级,(开发中这个要慎用!)
39讲 */
.box1{
width: 200px;
height: 200px;
background-color: aqua;
}
/* 不同的屏幕像素大小不同 */
.box2{
width: 50%;
height: 50%;
background-color: beige;
}
/*百分比可以将属性值设置为相对于父元素属性的百分比
并且跟随父元素的改变而改变
40讲*/
.box3{
width: 10em;
height: 10em;
background-color: blanchedalmond;
}
/* em是相对于字体大小来计算的,1em = 1fint-size =10个像素,
rem相对于根元素(html)来计算大小
41讲*/
.box4{
background-color: rgb(230, 61, 201);
}
/* css中可以用颜色名直接设置,但是很不方便,
RGB值:
RGB通过三种颜色的不同浓度来调配出不同的颜色
R red,G green,B blue
每一种颜色在0-255之间(0&-100%)
语法:RGB(红色,绿色,蓝色)*/
/* RGBA:
RGB的基础上增加了一个A表示不透明度(红色,绿色,蓝色,A)
1表示完全不透明,0表示完全透明,0.5半透明 */
/* 十六进制的RGB值:
语法:#红色绿色蓝色
颜色浓度通过 ff0000
如果颜色两位两位重复可以进行简写
如#aabbcc=#abc
42讲*/
.box4{
background-color: hsl(hue, saturation, lightness);
}
/* HSL值(工业设计用的多)H:色相(0-360) S:饱和度(0%-100%) L:亮度(0%-100%) 43讲 */
/* 网页是一个多层结构,一层层叠起来,通过css分别设置每一层的样式,用户只能看到最顶上一层,
最底下的一层称为文档流,是网页的基础,我们创建的元素默认在文档流中排列
元素只有两种状态:在文档流中,不在文档流中。
元素在文档流的特点:
块元素<div>:会在页面中独占一行,默认宽度是父元素的全部,默认高度会被内容撑开
行内元素<span>:行内元素不会独占页面的一行,如果一行不能容纳所有则自动跳到第二行,默认高度和内容被内容撑开 44讲*/
</style>
</head>
<body>
</body>
</html>