前端—css
1、介绍
层叠样式表
定义网页的显示效果，，将网页内容和显示样式进行分离
2、引入方式
0、语法结构
选择器 {属性1：值;属性2：值;属性3：值} /*键值对，分号分隔*/
1、行内样式
直接在需要用样式标签内通过属性style书写css代码
<div>
<p style="color:red">
我是一个段落
</p>
</div>
2、内接样式
直接在html页面上的head标签内通过style标签直接书写css代码
<style type="test/css">
span{color:yellow}
</style>
3、外接样式-链接式
通过link标签引入外部的css文件
<link rel="stylesheet" href="css文件路径">
4、外接样式-导入式
<style type="text/css">
@import url("./index.css");
</style>
3、css选择器
3.1 基本选择器
1、元素选择器
元素就是标签，即标签选择器
按照标签名选择标签
语法：
<style>
标签名{
属性：值;
}
</style>
2、id选择器
id选择器，就是通过id选择标签
语法：
<style>
#id名 {
属性:值;
}
</style>
注意：
- 同一个页面中的id不能重复
- 任何标签都可以设置id
- id命名规范：字母、下滑线、和-，大小写严格区分
3、类选择器
类选择器，只得就是通过标签的class属性选择，不同的标签可以有相同的类
语法：
<style>
.类名 {
属性：值;
}
</style>
4、通用选择器
语法：
<style>
* {
属性：值;
}
</style>
3.2 组合选择器
1、后代选择器
使用空格表示后代选择器，即包含在标签内的标签
实例：
/*选中的是所有div标签内的所有span标签，甚至div里被其他标签包含的span标签*/
<style>
div span {
color:red
}
</style>
2、子代选择器
使用大于号表示子代选择器，与后代选择器相似，但是选中范围更小
实例：
/*选中的是div标签内的span标签，不包括被其他标签包裹的span标签*/
<style>
div>span {
color:yellow
}
</style>
3、并集选择器
即多种标签都用相同的样式
语法：
/*选中的是所有的h1、span标签*/
<style>
h1,span {
color:green
}
</style>
4、交集选择器
使用.表示交集选择器
第一个标签必须是标签选择器，第二个必须是类选择器
语法：
/*选中的是标签选择器h1和类选择器c1俩者选中之后的标签共有的特性*/
<style>
h1 {
width:100px;
font-size:14px;
}
.c1 {
color:red;
text-decoration:underline;
}
h1.c1 {
background:#00BFFF;
}
</style>
5、弟弟选择器
使用~表示弟弟选择器，选择同级别下所有的标签
实例：
/*选中的是与标签div同级别，并处于文档中div标签下面的所有span标签*/
<style>
div~span {
color:orange;
}
</style>
6、毗邻选择器
使用+表示毗邻选择器，即选择第一个目标弟弟标签
实例：
/*选中的是div标签之后的第一个是span的span标签*/
<style>
div+span {
color:black;
}
</style>
3.3 属性选择器
根据标签内的属性选取标签
注意：
1、任何标签都有自己的默认属性 id和class
2、标签还支持你自定义任何多的属性
3.4 伪类选择器
伪类选择器一般都用在超链接a标签中
a标签的四种状态
1、没有被访问过
2、鼠标悬浮在上面
3、点击之后不松手
4、点击之后再回去
选择器语法：
<style>
/*没有访问过*/
a:link {
color:red;
}
/*悬浮*/
a:hover { /*悬浮选择器，也可以用在别的标签上*/
color:black;
}
/*访问过了的*/
a:visited {
color:pink;
}
/*点击时*/
a:active {
color:yellow;
}
</style>
input标签的两种状态
1、input获取焦点：focus，点进输入框之后的状态
2、input失去焦点：
选择器语法:
<style>
input:focus {
background-color:orange;
}
</style>
3.5 伪元素选择器
实例：
<style>
/*设置p标签第一个字符的样式*/
p:first-letter {
color:red;
font-size:48px;
}
/*在所有p标签之前添加内容*/
p:before {
content:"alex";
}
/*在所有p标签之后添加内容*/
p:after {
content:"&";
color:red;
font-size:48px
}
</style>
3.6 选择器优先级
1、选择器相同的情况下，引入方式不同
遵循就近原则，因为文档查找是从上到下的，选择器相同的情况下，引用最后的样式
2、选择器不同的情况下
行级选择器
id选择器
类选择器
元素选择器
4、文本、字体属性
文本属性
| 属性 | 描述 | 属性值 | 说明 |
|---|---|---|---|
| color | 文本颜色 | rgb grba |
|
| text-align | 文本对齐方式 | ||
| text-indent | 首行缩进 | ||
| text-decoration | 规定文本修饰的样式 | ||
| text-shadow | 阴影 | ||
| text-overflow | 文字溢出 | visible/hidden scroll/auto/inherit |
|
| line-height | 行高 | ||
| white-space | 处理元素内的空白 |
字体属性
| 属性 | 描述 | 属性值 | 说明 |
|---|---|---|---|
| font-size | 字体大小 | ||
| font-weight | 字体粗细 | ||
| font-family | 字体系列 |
5、背景
background-color背景颜色
background-color: red
background-image背景图片
background-image: url()
/*
url的三种填写方式
1、网页地址，全拼
2、本地图片路径*/
设置背景图片的相关配置
background-repeat/*平铺方式*/
/*参数*/
repeat /*默认、水平、垂直、重复*/
repeat-x /*水平、重复*/
repeat-y /*垂直、重复*/
no-repeat /*不重复，仅显示一次*/
inherit /*继承父标签repeat属性*/
background-position/*背景图像的起始位置*/
/*参数*/
left top
/*
1、2个参数.左边距，上边距
2、第二个不写，默认居中
3、直接写关键字，left靠左，center居中
4、两个参数都不写，默认为0
*/
background-attachment/*设置固定的背景图像*/
/*参数*/
scroll /*默认、滚动*/
fixed /*固定*/
inherit /*继承父标签的attachment*/
/*简写方式*/
background red url("") no-repeat right top
6、盒子模型
4.1 盒子模型的属性
width:内容的宽度
height:内容的高度
padding：内边距，边框到内容的距离
border:边框，即盒子的宽度
margin:外边距，盒子边框到最近盒子的距离
4.2 属性设置
1、padding
padding由四个方向，分别描述4个方向的padding可以分开写，也可以一起写
/*分开写*/
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:30px;
/*一起写*/
/*上 右 下 左*/
padding:20px 30px 40px 50px;
/*上 左右 下*/
padding:20px 30px 50px;
/*上下 左右*/
padding 20px 40px;
/*上下左右*/
padding 100px;
注意点：一般标签都有自己的默认padding，如<ul>,<ol>等
2、border
border就是边框的意思
三要素：粗细，线性样式和颜色
设置方式：
/*按照三要素*/
border-width: 3px;
border-style: solid;
border-color: red;
/*按照按照方向划分设置小属性*/
/*以顶部为例*/
border-top-width:10px;
border-top-color:red;
border-top-color:dotted;
/*简写方式*/
border-top:10px dotted red;
/*设置为无样式*/
border:none;
border:0;
/*设置为圆角*/
border-radius
/*
1、radius值可以是具体的像素值，也可以是百分比
2、可以单独设置某个方向，也可简写设置所有方向
3、当为百分比时，表示的是占父标签的长或者宽的比例
*/
3、margin
外边距，边框到最近盒子的距离
/*统一设置四个方向的外边距*/
margin:20px;
/*分方向设置*/
/*以顶部为例*/
margin-top: 30px;
/*水平居中*/
margin: 0px auto
4、注意点：
margin属性描述的是兄弟盒子的关系
padding属性描述的是父子盒子的关系
7、块级元素、行内元素
行内元素：
与其他行内元素并排
不能设置宽、高。默认的宽度就是文字的宽度
块级元素：
占一行，不能与其他任何元素并列
能设置宽高，如果不设置，默认为父标签的100%
display：块级元素与行内元素的相互转换
display:inline
/*
1、给一个块级元素设置为inline，即变为行内元素
2、不能再设置宽高
3、可以和别的标签并排显示在一行
*/
display:block
/*
1、给一个行内元素设置为block，即变为块级元素
2、可以设置宽高
3、占一行，不能再与其他标签显示在一行
4、若不设置宽高，将会撑满它的父标签，因为父标签也只是一个块级标签，占了一行
*/
8、浮动
1、三个属性值
float:none /*默认，不浮动*/
float:left /*左浮动*/
float:right /*右浮动*/
2、四大特性
1、浮动元素脱离标准文档流
原来的位置会让出来
2、浮动元素互相贴靠
3、浮动元素有“子围”效果
浏览器会优先展示文本内容，即文本内容不会被浮动元素遮盖
4、收缩
浮动元素若没有设置宽高，那么就会自动设置为文字的宽高
3、浮动问题、清除浮动
浮动问题：
父标签的塌陷
即设置浮动元素后，由于脱离文档流，它的父标签不再包含该元素
清除浮动：
1、给父标签设置空文本，并设置宽高
难以维护
2、使用clear:both消除清除浮动
/*clear：清除*/
clear:left /*当前元素左边不允许有浮动元素*/
clear:right /*右边不允许有浮动元素*/
clear:both /*左右两边不允许有浮动元素*/
使用方式1：给父元素添加clearfix类，在类中设置清除浮动
.clearfix{
/*必须写的三个属性*/
content:'';
clear:both;
dispaly:block;
}
9、定位
所有的标签默认是静态的，无法改变位置
position：static
必须将静态改成定位后才能改变位置属性
1、相对定位
position:relative
/*相对于标签原来的位置*/
/*
1、设置了relative后，才能使用left/right/top/bottom
2、值有两种形式，百分比或像素值
*/
left:50%;
right:50px;
2、绝对定位
position:absolute
/*相对于已经定位过（非static）的父标签，再做定位*/
3、固定定位
pisition:fixed
/*相对于浏览器窗口，固定在某个位置不动*/
10、脱离文档流的操作
1、浮动的元素
2、绝对定位
3、固定定位
11、opacity
能改变字体、颜色的透明度
.c1 {
/*只能调整颜色透明度*/
background-color:rgba(128,128,128,0.4)
}
.c2 {
/*字体、颜色都能调整*/
opacity:0.2;
background-color:red
}
12、z-index
指的是各个盒子堆叠在一起谁上谁下的问题
1、z-index值越大，层级越高
2、只有定位了的元素，才能有z-index
3、z-index没有单位，就是一个正整数，默认为0
4、当z-index值相等时，谁在文档中额位置靠后，谁就在上面
5、从父现象，父亲怂了，儿子再牛逼也没用
