一、选择器：根据不同需求把不同的标签选出来这就是选择器的作用
1、基础选择器
- 基础选择器是由单个选择器组成的
- 包括：标签选择器、类选择器、id选择器和通配符选择器
1.1标签选择器（元素选择器）
指用HTML标签名称作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式
语法：标签名 {
属性：属性值；
}
1.2类选择器
①使用场景：如果想要差异化选择不同的标签，单独选一个或者某几个标签
②语法：.类名 {
属性：属性值；
}
在 CSS 中，类选择器以一个点"."号显示，在HTML中以class属性表示
<style>
p.center
{
text-align:center;
}
</style>
<p class="center">这个段落居中对齐。</p> 此为让所有 p 元素使用 class="center" 让该元素的文本居中若不指定p元素则所有使用 class="center"的元素居中
注：
- 类选择器使用"."（英文点号）进行标识，后面紧跟类名（自定义）
- 长名称或者词组可以使用中横线来为选择器命名
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示（需要有意义）
③多类名
使用方式：<div class="color size">一头猪</div>
注 ：在标签class属性中写多个类名，多个类名中间必须用空格隔开
1.3 id选择器（一般用于页面唯一性的元素上，经常和JavaScript搭配使用）
id选择器可以为标有特定id的HTML元素指定特定样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
①语法：#id名 {
属性：属性值；
}
②id属性只能在每个HTML文档中出现一次
1.4通配符选择器
在CSS中，通配符选择器使用“”*“”定义，他表示选取页面中所有元素（标签）
①语法：* {
属性：属性值；
}
2、复合选择器
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，其中包括：后代选择器、子选择器、并集选择器、伪类选择器
2.1 后代选择器
又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代
<style>
ol li {
color:red;
}
</style>
<body>
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
</ol>
<ul>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
</ul>
</body>- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
2.2 子选择器
①子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单来说就是选亲儿子元素
②语法：元素1 >元素2{样式声明}，表示选择元素1里面的所有直接后代（子元素）元素2
注：
- 元素1和元素2中间用大于号隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，其孙子、重孙之类都不归他管
2.3 并集选择器
①可以选择多组标签，同时为他们定义相同样式。通常用于并集说明
②并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分
③语法: 元素1，元素2 {样式声明}
2.4伪类选择器
用于向某些选择器添加特殊的效果，其书写最大的特点是用冒号表示
2.4.1链接伪类选择器
- a:link(选择所有未被访问的链接)
- a:visited(选择所有已被访问的链接)
- a:hover(选择鼠标指针位于其上的链接)
- a:active(选择活动链接，也就是鼠标按下未松开的链接)
注意事项：为了确保生效，请按照LVHA的顺序进行声明。
但在实际中很少用到，一般只会先对a标签修改颜色后使用：hover就行
2.4.2:focus伪类选择器
主要用于选取获得焦点的表单元素（焦点就是光标，一般情况<input>类表单元素才能获取）
input:focus {
background-color:yellow:
}
二、引入方式
分类：行类样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）
1、内部样式表
是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中
①语法：<head>
<style>
hr { color:sienna;}
p {margin-left:20px;}
</style>
</head>
2、行内样式表
是在元素标签内部的style属性中设定CSS样式，适合修改简单样式
如：<p style="color:sienna;margin-left:20px">这是一个段落。</p>
3、外部样式表
样式单独写到CSS文件中，之后吧CSS文件引入到HTML页面中使用
使用步骤:
- 新建一个后缀名为.css的样式文件，吧所有CSS代码都放到此文件中
- 在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
三、背景
1、颜色：background-color 属性定义了元素的背景颜色.
CSS中，颜色值通常以以下方式定义:（通常背景颜色默认值为transparent透明）
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
2、图片：background-image 属性描述了元素的背景图像.
background-image：none | URL
3、背景平铺：如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性
background-repeat：repeat | no-repeat | repeat-x | repeat-y
4、图片位置：利用background-position属性可以改变图片在背景中的位置
background-position: x y;
参数代表的意思：x坐标和y坐标。可以使用方位名词或者精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数 | 有浮点数和单位标识符组成的长度值 |
| position | top | center | bottom | left | right 方位名词 |
注：如果指定的两个值都是方位名词，则两个值前后顺序无关
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
5、背景图像固定（背景附着）
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。background-attachment后期可以制作视差滚动的效果
background-attachment:scroll | fixed.....
| 参数 | 作用 |
| scroll | 背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed | 背景图片不会随着页面的滚动而滚动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
| initial | 设置该属性的默认值 |
| inherit | 指定 background-attachment 的设置应该从父元素继承 |
6、复合写法
一般顺序为：background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
7、背景色半透明
background：rgba(0, 0, 0, 0.3);
- 最后一个参数是alpha透明度，取值范围在0-1之间
- 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
8、多个图片组合作为背景
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
<head>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
9、background-origin 属性
background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box（属性值）区域内可以放置背景图像。如：content-box效果类似于图片在文字下方
扫一扫
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
