2.前端CSS—css选择器
一、CSS简介
在HTML中如果设置标签的样式需要为每个HTML元素单独设置，当HTML元素很多时，会定义了一些重复的样式属性，并且要逐个修改是十分麻烦的。
CSS功能：将HTML页面的内容与样式分离，清晰、高效。
CSS：层叠样式表，把HTML元素的样式收集然后写到一起。
优势：
- 网页的样式统一，容易修改
- 减少了代码量，增加了浏览器的速度
- 内容和表现分离
二、CSS语法
CSS语法可以分为两个部分：1、选择器；2、声明。
声明由属性和值组成，多个声明之间用分号隔开。
CSS的注释格式是 /**/
p{ /*属性 ：值*/
font-size: 12px;
color: #000;
background-color: aqua;
}
三、CSS的三种引入方式
3.1 内嵌方式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签中。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: #000;
font-size: 20px;
}
</style>
</head>
3.2 行内样式
行内样式是在标签的style属性中设定CSS样式。可以设置多个样式，用分号隔开。
<p style="font-size: 20px;color:#000">
</p>
3.3 外部样式
链接式
在html的<head>标签中设置引入。
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
导入式
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@import url('./index.css');
</style>
</head>
在CSS中使用@import url()也是可以导入别的CSS。
链接式和导入式的差别：
- 使用link链接的css文件先加载到网页中在进行编译
- 使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页中
四、基本选择器
选择器定义：一个HTML页面中有很多的元素，不同的元素可能会有不同的样式，一些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以设置样式了，选择器为CSS样式指定一个作用范围。
4.1 标签选择器
通过标签名来选择元素。
特点：标签选择器可以选择所有的标签元素
<head>
<meta charset="UTF-8">
<title>css的标签选择器</title>
<!--内嵌样式-->
<style type="text/css">
/* 标签选择器 */
p{
color: #000;
font-size: 10px;
}
span{
color: #000;
}
</style>
</head>
4.2 id选择器
通过元素的ID值选择元素。通过“#”来选中id。
id选择器注意事项：
- 一个页面中不能出现两个相同的id
- id命名要规范，以字母开头，包括数字或下划线，严格区分大小写
<head>
<meta charset="UTF-8">
<title>css的id选择器</title>
<!--内嵌样式-->
<style type="text/css">
#s1{
color: #000;
}
#s2{
font-size: 30px;
}
</style>
</head>
4.3 类选择器
- 所谓类，就是class 。class与id非常相似，任何标签都可以加类。但是类是可以重复的，这是一种归类的思想。
- 同一个标签中可以携带多个类，多个类之间用空格隔开。
- 使用 .类名的方式获取类
<a class=""></a>
<head>
<meta charset="UTF-8">
<title>css的类选择器</title>
<style type="text/css">
body{
color:#000;
font-size: 10px;
}
/* 类选择器 */
.title_color{
color:green;
}
</style>
</head>
类选择器的注意事项：
- 不要在一个类中使用较多的样式，这样可以减小类，更多的标签可以使用类
- 每个标签要要携带多个类，不要设置单一的类
4.4 通用选择器
/*通用选择器，一般不用, 星号表示选择所有的标签*/
*{
color:#000；
}
4.5 id选择器和class选择器的比较
尽量使用class选择器，少用id选择器，id一般使用在js上，js是通过id获取标签的。
五、高级选择器
5.1 后代选择器
因为HTML的元素可以嵌套，所以可以从某个元素的后代查找特定的元素，并设置样式，在html中元素嵌套是常见的，所以后代选择器也是比较常用的一种选择器。
div div a{
font-size:10px;
}
5.2 子元素选择器
用>连接，仅用于子元素。明确指定就是container当前的div下的p标签。
.container> p{
font-size: 10px
}
5.3 交集选择器
由两个选择器连接构成，选择的是他们的交集，两个选择器之间不能有空格
<style type="text/css">
/*交集选择器*/
h3{
width:300px;
color: red;
}
.active{
font-size: 30px;
}
h3.active{
background-color: yellow;
}
</style>
最终效果是h3内容，字体大小为30px，字体为红色，300px的宽度背景颜色为黄色。
5.4 并集选择器
也叫组合选择器
a,h1{
color: #000;
font-size: 10px;
text-decoration: none;
}
六、属性选择器
这里的属性不是html自带的属性，是自定义的属性。通常在表单控件中使用的比较频繁。
6.1 根据属性查找
拥有f属性的label标签会设置成红色，大小20px
label[f]{
color: red;
font-size: 20px;
}
6.2 根据属性和值查找
label[f="username"]{
color: yellow;
}
设置label标签中的f属性以k开头的元素变大
label[f^="username"]{
color: yellow;
}
以什么结尾只要将^替换成$，设置成包含字母k的元素，只要改成*即可
label[f*="username"]{
color: yellow;
}
6.3 表单常用
input[type="text"]{
background-color: #000;
}
七、伪类选择器
伪类用于向某些选择器添加特殊的效果。
没有访问的超链接a标签样式：
a:link {
color: blue;
}
访问过的超链接a标签样式：
a:visited {
color: red;
}
鼠标悬浮在元素上应用样式：
a:hover {
background-color: #000;
}
鼠标点击瞬间的样式：
a:active {
color: #000;
}
input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #000;
}
八、伪元素选择器
三种伪元素选择器：first-letter、before、after。其中after是运用最多的伪元素选择器。
8.1 first-letter
用于为文本的首字母设置特殊样式。
/* 设置第一个首字母的样式 */
p:first-letter{
color: red;
font-size: 30px;
}
8.2 before
用于在元素的内容前面插入新内容。使用此伪元素选择器一定要结合content属性。
/* 在...之前添加内容，很少用 */
p:before{
content: "an";
}
8.3 after
用于在元素的内容后面插入新内容。同样，使用此伪元素选择器一定要结合content属性。
/* 在...之后添加内容，使用非常频繁，通常与后面讲到的布局有很多关联(清除浮动) */
p:after{
content: "&";
color: red;
font-size: 40px;
}
九、CSS继承
有一些属性是可以继承下来的：color、font-、text-、line- 都属于文本元素；
除了上面这四种属性可以继承，其他属性是不能继承的，像一些盒子元素，定位的元素（浮动、绝对定位、固定定位）不能继承。比如backgroud-color是不能继承的，继承也是多层的，不仅可以继承父亲的也可以继承爷爷的。
十、CSS的层叠性和选择器的优先级
选择器的权重规则来决定的。谁的权重大，浏览器就会显示谁的属性
十一、CSS属性相关
高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
div{
width: 100px; 宽度
height: 100px; 高度
background-color: pink;
}
补充:a标签的字体颜色设置必须选中a标签才行
.c1 a{
color: red;
}
字体属性
字体
.c1{
font-family: '楷体','宋体','微软雅黑';
}
字体大小
.c1{
/*font-family: '楷体','宋体','微软雅黑';*/
font-size:14px; 默认字体大小为16px.
}
字体颜色
color:red;
子重,粗细
.c1{
font-weight: bold;
font-weight: 100;
}
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
颜色表示方式
p{
/*color: red;*/
/*color: #78FFC9;*/
/*color: rgb(123,199,255);*/
color: rgba(123,199,255,0.3); 多了一个透明度的数字:0-1的一个数字
}
文字属性
文字对齐
text-align
div{
width: 200px;
height: 200px;
background-color: yellow;
/*text-align: center;*/
text-align: right;
}
left 左边对齐 默认值
right 右对齐
center 居中对齐
文字装饰
text-decoration
div a{
/*text-decoration: none;*/ #给a标签去除下划线
/*text-decoration: line-through;*/
text-decoration: overline;
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
首行缩进
p {
text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}
背景属性
背景颜色
background-color: red;
div{
width: 600px;
height: 600px;
/*background-color: red;*/
/*background-image: url("yeye.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: 100px 50px;*/ 相对于div标签的,距离左边100px,距离上面50px
background:url("yeye.jpg") no-repeat left center;
/*background-position: right top;*/
}
简写方式,颜色 图片路径 是否平铺 图片位置
background:#ffffff url('1.png') no-repeat right top;
