目录
前端之CSS
引入
页面都是由HTML构成的，并且页面上有很多相同的HTML标签，但是相同的HTML标签在不同的位置可能有不同的样式 ，我们如何区分标签？引入标签的两大重要属性
标签两大重要属性>>:区分标签
1.class属性
两个元素或者两个以上元素定义相同的样式>>>:批量查找
2.id属性
id属性被赋予了标识页面元素的唯一身份>>>:点对点，精准查找
<div class="c1 c2 c3" ></div>
<p class=" c1 c5" ></p>
<span class=" c1 c8"></span>
<div di="d1 "></div>
<a href="" id="d2"></a>
注意：
1.一个html网页，id是不能重复的，
2.一个标签可以同时定义多个class。
学习CSS流程
1.先学习如何查找标签
2.再学习如何调整样式
CSS前言
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
简单理解：CSS如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。如何区分CSS版本，如CSS3就是css语言，数字3是该语言的版本号
CSS层叠样式表
主要用来调整html标签的各种样式
1.CSS组成
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
2.css语法结构
选择器{
样式名1：样式值1;
样式名2：样式值2;
}
3.注释语法
/*注释内容*/
4.引入CSS的多种方式
1.head内style标签内部编写（学习的时候使用）
2.head内link标签引入（标准的方式）
3.标签内部通过style属性直接编写（不推荐）
4.1 内部样式
嵌入式是将CSS样式集中写在网页的标签对的标签对中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color: orange;
}
</style>
4.2 外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可
<link rel="stylesheet" href="mycss.css">
4.3 行内样式（不推荐）
行内式是在标记的style属性中设定CSS样式
<h3 style="background: burlywood">style属性内直接编写CSS的第三种方法</h3>
css选择器
1.css基本选择器
1、标签选择器(直接按照标签名查找标签)
div {
color: orange;
font-size: 30px;
}
2、类选择器(按照标签的class值查找标签)
.c1 {
color: lightskyblue;
font-size: 30px;
}
3、id选择器(根据标签的id之精准查找标签)
#d2 {
color: darkolivegreen;
font-size: 35px;
}
4、通用选择器(直接选择页面所有的标签)
* {
color: cornflowerblue;
font-size: 35px;
}
2.CSS组成选择器
针对标签的上下层级以及嵌套有另一种说法：父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
<body>
<div>div
<p>div>>p
<span>div>>p>>span</span>
</p>
<p>div>>p</p>
<span>div>>span</span>
</div>
<span>与div同级span1</span>
<p>与div同级p</p>
<span>与div同级span2</span>
</body>
说明
2.1.后代选择器(空格)
div span {
color: orange;
font-size: 35px;
}
2.2 .儿子选择器(大于)
div>span {
color:burlywood;
font-size: 35px;
}
2.3.毗邻选择器(加号)
div+span {
color:burlywood;
font-size: 35px;
}
2.4.弟弟选择器(小波浪号)
div~span {
color:burlywood;
font-size: 35px;
}
3.分组与嵌套
1.多个选择器合并查找
div,p,span{
color: rebeccapurple;
font-size: 40px;
}
2.查找满足条件的选择器
#d1,.c1,span{
color: orange;
font-size: 40px;
}
3.查找class含有c1的div
div.c1 {
color: orange;
font-size: 40px;
}
4.查找id是d1的div
div#d1 {
color: orange;
font-size: 40px;
}
5.查找含有c1样式值里面的含有c2样式值的p标签
.c1 p.c2 {
color: orange;
font-size: 40px;
}
body内容：
<body>
<div id="d1" class="c1">I am div(d1)</div>
<div id="d2" class="c2">I am div(d2)</div>
<div id="d3" class="c1 c3">I am div(d3)</div>
<p class="c1">I am p</p>
<span>I am span</span>
<body>
如图：
4.属性选择器
1.按照属性名查找
[username] {
color:red;
font-size: 40px;
}
2.按照属性名等于属性值
[username="kimi"] {
color:red;
font-size: 40px;
}
3.按标签里面的属性名=属性值查找的
div[username='kimi'] {
color: #ff7d2a;
font-size: 40px;
}
5.伪类选择器
# a标签补充说明：未点击过的网址默认是蓝色，点击过的则为紫色
1.鼠标移动到链接上，显示orange
a:hover {
color: orange;
}
2.补充
2.1 未访问的链接，显示下列样式
a:link {
color: red;
}
2.2 选定的链接不动，采用下列样式
a:active {
color: lightskyblue;
}
2.3 已访问的链接，采用下面样式
a:visited {
color: darkgray;
}
2.4 input镖 点输入框时获取焦点时样式
input:focus {
background-color: #ff7d2a;
}
6.伪元素选择器
1.首字母大写且渲染成红色
p:first-letter {
font-size: 45px;
color: red;
}
2.css在开头添加文本无法正常选中
p:before {
content: '嘿嘿嘿';
color: orange;
}
3.css在末尾添加文本无法正常选中
p:after {
content: '我是删不掉的';
color: aquamarine;
}
选择器优先级
CCS继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
选择器的优先级
1.选择器相同 导入方式不同
就近原则
2.选择器不同 导入方式相同，其实是按照不同选择器的权重来决定的
内联样式 > id选择器 > 类选择器 > 标签选择器
CSS样式调节
1.字体相关
1.高度和宽度
只有块儿级标签可以设置 行内标签无法设置
<style>
p {
height: 1000px; /*高度*/
width: 50px; /*宽度*/
}
</style>
2.字体大小
font-size: 99px; # 字体大小一般有固定的大小参考(字体代码)
3.字体粗细
font-weight用来设置字体的字重（粗细）。
font-weight: bolder; /*字体粗*/
font-weight: lighter; /*字体细*/
| 值 | 描述 |
|---|---|
| normal | 默认值，标准值 |
| bold | 粗体 |
| bolder | 加粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
2.文本颜色
颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定，设置颜色方式如下
1.十六进制值 - 如: ＃FF0000（颜色编码）
2.一个RGB值 - 如: RGB(255,0,0)
3.颜色的名称 - 如: red
4.还有rgba(255,0,0,0.3)，第四个值为alpha（透明度）, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
3.文本属性
文本对齐
text-align 属性规定元素中的文本的水平对齐方式
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文本装饰
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认，定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line_through | 定义穿过文本下的一条先 |
| inherit | 继承父元素的text_decoration属性的值 |
去掉a标签默认的自划线
a {
text-decoration: none;
}
首行缩进
p {
text-indent: 32px;
}
4.背景属性
*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; # 不重复
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
当多个属性名有相同的前缀 那么可以简写一次性完成
div {
width: 800px; /*div标签设置宽高*/
height: 800px;
background-color: red;
background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");
/*可以索引到图片网页地址*/
/*background-image: url("666.png"); 也可以是本地地址*/
background-repeat: no-repeat; /*不重复*/
/*background-repeat: repeat-x; 只有横向重复*/
/*background-repeat: repeat-y; 只有纵向重复*/
background-position: center center; /*调整图片居中到div标签中*/
/*background: url("666.png") blue no-repeat center center; 所有属性都可以用这一句完成*/
}