CSS
技术点总览
1 了解CSS
1.1 什么是CSS
CSS缩写：Cascading Style Sheet 层叠级联样式表
首先html+css+JavaScript这三者组成了前端的整个结构
- html规定整个网页的结构
- CSS负责网页的表现方式
- JavaScript负责交互
也就是说：CSS是用来美化网页的
使用F12打开网页的开发者用具，在元素选项卡中可以看到html和css的各种元素
1.2 发展史
css 1.0 —>css 2.0 —> css 2.1 —> css 3.0
2 快速入门
2.1 CSS的优势和作用
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 可以和
html分离式开发与存放(也建议使用分离式) - 分离式的写法代码清晰，利于SEO，容易被搜索引擎收录
2.2 CSS的3种导入方式
行内样式
<!--行内样式，style内使用分号来结尾-->
<h1 style="color: #f80c0c;">
样式的导入方式
</h1>
内部样式
<html lang="en">
<head>
<style>
h1 {
color: greenyellow;
}
</style>
<!--导入式写法，看到能知道即可，属于历史遗留写法，基本弃用了-->
<style>
@import "style2.css";
</style>
</head>
<body>
<h1>样式的导入方式</h1>
</body>
</html>
外部样式
<html lang="en">
<head>
</head>
<!--链接式写法-->
<link rel="stylesheet" href="./style2.css">
<body>
<h1>样式的导入方式</h1>
</body>
</html>
3种导入方式的优先级：
标签调用样式采用
就近原则，谁离这个元素最近就用谁。首先距离这个元素最近的一定是行内样式，其次外部样式<link>标签与内部样式<tyle>标签那个标签更靠下—也就是距离需要使用样式的标签越近就用谁
所以得出结论：
行内样式优先级最高
剩下的内部样式与外部样式谁写在最下面用谁
3 选择器 *
选择器：选择页面上的某一个或某一类元素
3.1 基本选择器
3.1.1 标签选择器
- 标签选择器语法：
标签名 { } - 选择一类标签，类选择器指定的标签都使用此样式
<html lang="en">
<head>
</head>
<style>
h1 {
color: greenyellow;
}
</style>
<body>
<h1>样式的导入方式</h1>
</body>
</html>
3.1.2 类 选择器
-
类选择器的格式：
.class的名称{ } -
优点：可以把多个标签归类，多个标签使用同一个class名，方便复用
-
类选择器会选择所有class属性一致的标签
-
class选择器是可以跨标签使用的(不同种标签可以使用相同的class选择器)
<head>
<meta charset="UTF-8">
<title>Title</title>
/*类选择器格式如下*/
<style>
.one{
color: #f80c0c;
}
.two{
color: greenyellow;
background: antiquewhite;
}
</style>
</head>
<body>
<h1 class="one">标题1</h1>
<h1 class="two">标题2</h1>
<h1 class="one">标题3</h1>
<p class="two">段落1</p>
</body>
</html>
3.1.3 ID选择器
-
id选择器的格式：
#id名称{ } -
标签的id要保证全局唯一
```html <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器*/ #one{ color: #f80c0c; } #two{ color: greenyellow; } /*类选择器*/ .three{ color: blue; } /*标签选择器*/ h1{ color: yellow; } </style> </head> <body> <h1 id="one">标题1</h1> <h1 class="three">标题2</h1> <h1 id="two">标题3</h1> <h1>标题4</h1> <h1>标题5</h1> <p class="three">段落1</p> </body> </html>
~~~
#### 3.1.4 基本选择器的优先级
> 基本选择器不遵循就近原则，他们的优先级是固定的
>
> > id选择器 > 类钻择期 > 标签钻择期
### 3.2 层次选择器
- 语法
```css
body 要选择的哪种标签{
样式;
}
3.2.1 后代选择器：
-
作用域：选中某个标签内所有的元素
/*后代选择器，选择body里面的p标签以及p标签所包含的所有标签*/ body p{ background: red; }
3.2.2 子选择器：
-
作用域：在某个元素的下一层
/*子选择器，只选择body后面的第一层p标签，任何第一层标签内包含的标签都不会被选中*/ body>p{ background: greenyellow; }
3.2.3 相邻、兄弟选择器：
-
作用域：距离这个选择器下方最近的一个标签会被选中，也就是相邻选择器的下方第一个
-
该选择器只会作用于唯一一个标签，不管后面调用几次，只有选择器下方最近的一个标签会被选中，后面不管写多少次相同的选择器，都只有第一个会生效
/*相邻、兄弟选择器*/ .active + p{ background: blue; } /*=========== html ============*/ <p class="active">p1</p> <p>p2</p> <p class="active">p3</p> <p>p4</p>
3.2.4 通用选择器
-
作用域：选择器（不包含选择器自己）下方所有的同级标签（元素）
/*通用选择器*/ .active ~ p{ background: greenyellow; }
3.3 结构伪类选择器
-
伪类选择器会在定位元素前先有一个动作，一般用于鼠标悬浮、点击(不常用)等事件
-
语法：有
：出现的时候，这个选择器就是伪类-
标签名:选择方式{ }
<style> /* hover：鼠标悬浮的状态*/ a:hover{ color: deeppink; font-size: 20px; } /* active：鼠标点击但未释放时候的状态*/ a:active{ color: green; } /*选中body内所有ul标签的第一个子元素*/ ul li:first-child{ background: red; } /*选中body内所有ul标签的最后一个子元素*/ ul li:last-child{ background: greenyellow; } /*选中body内第一个元素，如果第一个元素不是p标签则这个选择器定位不到p元素，选择器的样式将不生效*/ body p:first-child{ background: blue; } /*选中第一个p标签：按顺序选*/ /* nth：选择p标签的父级标签（body），然后选中父级标签内的第一个标签，如果第一个标签不是p标签， 则这个选择器定位不到p元素，选择器的样式将不生效*/ p:nth-child(1){ background: green; } /*按类型选*/ /*先选中父元素，然后定位第2个p元素*/ p:nth-of-type(1){ background: cadetblue; } </style> -
3.4 属性选择器（常用）
- 语法：
标签名[``属性名逻辑运算符值]{}- 例：
a[href^=https]{ } - 逻辑运算符遵循
正则表达式：- 值 绝对等于：
= - 值 包含：
*= - 值 已什么开头：
^= - 值 已什么结尾：
$=
- 值 绝对等于：
- 例：
- 作用域：
[ ]内的运算所涵盖的范围
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a {
float: left;/*定义元素在哪个方向浮动*/
display: block;/*规定元素应该生成的框的类型:此元素将显示为块级元素，此元素前后会带有换行符*/
height: 50px;
width: 50px;
border-radius: 10px;/*圆角*/
background: black;
text-align: center;/*文字水平居中*/
color: gainsboro;
text-decoration: none; /*去文字下划线*/
margin-right: 5px;/*标签之间的间距*/
font: bold 20px/50px Arial;/*字体加粗 字体大小 字体垂直居中*/
}
/*存在id属性的元素 属性选择器语法：要选择的标签名称[属性名]{ } */
a[id] {
background: deeppink;
}
a[id=first] {
background: deeppink;
}
/*选择class中含有‘links’的元素 *是通配符，代表含有的意思*/
a[class*="links"] {
background: deeppink;
}
/*选中href中以http开头的元素*/
a[href$=doc]{
background: deeppink;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com/" class="links item first" id="first">1</a>
<a href="" class="links item first" target="_blank" title="test">2</a>
<a href="image/123.html" class="links item">3</a>
<a href="image/123.png" class="links item">4</a>
<a href="image/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="abc.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="asdf.doc" class="links item">10</a>
</p>
</body>
</html>
4 美化网页元素
4.1 美化网页的作用
- 吸引用户
- 提高用户体验
- 凸显页面主题
- 有效的传递页面信息
4.2 美化方式
4.2.1 span标签：突出展示关键字
<head>
<style>
#title1 {
font-size: 50px;
color: deeppink;
}
</style>
</head>
<body>
Java是世界上最<span id="title1"> 牛 B </span>的语言
</body>
4.2.2 字体样式
<style>
body {
/*中英文字体*/
font-family: Cambria, 楷体;
/*字体颜色*/
color: deeppink;
}
h1 {
/*字体大小*/
font-size: 50px;
}
.p1 {
/*字体粗细*/
font-weight: bold;
}
.p2 {
/*上面的一些字体样式可以共同使用font属性来规定：
字体风格：斜体？ 字体样式：粗细 字体大小/字体行高 字体*/
font: bold 40px/5px "楷体";
}
</style>
4.2.3 文本样式
<style>
h1 {
/*颜色*/
/*color: deeppink;*/
/*rgb()函数：使用三元素来指定颜色*/
/*color: rgb(10,10,10);*/
/*rgba()函数：使用三元素来指定颜色以及透明度，透明度从0~1*/
color: rgba(10,10,10,0.2);
/*排版：文本对齐方式*/
text-align: center;
}
.p1 {
/*段落首行缩进*/
text-indent: 2em;
}
.p2 {
/*区域的背景颜色*/
background: gainsboro;
/*字体行高*/
line-height: 100px;
}
.t1 {
/*下划线*/
text-decoration: underline;
/*中划线*/
text-decoration: line-through;
/*上划线*/
text-decoration: overline;
}
/*对齐是需要有参照物的，a和b对齐*/
img, apan {
/*图片和文本水平对齐*/
vertical-align: middle;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
/* hover：鼠标悬浮的状态*/
a:hover{
color: deeppink;
font-size: 20px;
}
/* active：鼠标点击但未释放时候的状态*/
a:active{
color: green;
}
</style>
4.2.4 阴影
#price{
/*文本阴影：水平偏移 垂直偏移 阴影半径 阴影颜色*/
text-shadow: deepskyblue 10px 10px 2px;
}
4.2.5 超链接伪类
/* hover：鼠标悬浮的状态*/
a:hover{
color: deeppink;
font-size: 20px;
}
/* active：鼠标点击但未释放时候的状态*/
a:active{
color: green;
}
4.2.6 列表
ul li {
height: 30px;
/*设置为没有样式*/
list-style: none;
text-indent: 1em;
}
4.2.7 背景
<style>
div {
width: 1000px;
height: 800px;
/*border：边框粗细 边框样式：实线 颜色：红*/
border: 1px solid red;
background-image: url("../../resources/images/1.jpg");
/*默认是全部平铺的*/
}
.div1 {
/*水平平铺*/
background-repeat: repeat-x;
}
.div2{
/*垂直平铺*/
background-repeat: repeat-y;
}
.div3{
/*不平铺*/
background-repeat: no-repeat;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>body>
4.2.8 渐变
- 渐变一般不用，即便用，也用别人写好的（推荐网站）
- 渐变分：径向渐变和圆形渐变
/*115deg：角度，使用那些颜色进行渐变*/
background-image: linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%)
5 盒子模型
- margin：外边距
- border：边框
- padding：内边距
5.1 边框
-
粗细
-
样式
-
颜色
<style> #box { width: 230px; /*border: 粗细 样式 颜色;*/ border: 1px solid black; } div:nth-of-type(1) input { border: 1px solid black; } </style>
5.2 内、外边距
-
盒子的计算方式：就是计算这个元素的实际大小
-
应为：
margin+border+padding+实际内容的宽度<style> /*标签都有默认的内外边距，所以需要单独指定，实现标签属性的初始化*/ body，h1 form，ul，li，a { margin: 0px; padding: 0px; text-decoration: none; } h2 { color: red; font-size: 16px; background: greenyellow; line-height: 30px; margin: 0px; } #box { width: 230px; /*border: 粗细 样式 颜色;*/ border: 1px solid black; margin: 0 auto; } </style>
5.3 圆角边框
/*里面参数可以写1个：四个角的度数 2个参数：左上、右下 右上左下的圆角度数 4个参数，四个角各自的参数*/
/*可以根据调整4个角的度数让它变成各种形状*/
border-radius: 30px 10px;
5.4 盒子阴影
/*盒子阴影：阴影的X轴偏移 Y轴偏移 模糊半径 颜色*/
box-shadow: 10px 10px 100px greenyellow;
6 浮动
6.1 标准排列
-
块级元素：独占一行
h1~h6 div p ul li .... -
行内元素：不独占一行
span a img strong.....
6.2 display
- 规定元素应该生成的框的类型
inline行内元素block块级元素
inline-block既是块级元素也是行内元素，元素之间可以内联none此元素不会被显示
- 这是一种实现行内元素排列的方式，但是大多数情况会使用
float：浮动来实现
<head>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div id="box">
块级元素
</div>
<span>行内元素</span>
</body>
6.2 float
具有浮动属性的元素，它是漂浮在其父元素之上的，漂浮的效果会因为调整页面大小而破坏布局
-
左右浮动
div { margin: 10px; padding: 5px; } #father { border: 1px black solid; } .float1 { border: 1px red dashed; display: inline-block; float: right; } .float2 { border: 1px greenyellow dashed; display: inline-block; float: right; } .float3 { border: 1px yellow dashed; display: inline-block; float: right; }
6.3 父级边框塌陷的问题
6.3.1 浮动限制：clear属性
right右侧不允许浮动left左侧不允许both两侧不允许none允许浮动
.clear {
clear: both;
margin: 0;
padding: 0;
}
6.3.2 父级边框塌陷的解决方法
-
增加父级元素的高度，高到可以包裹浮动起来的元素（基本不用，固定高度会限制后面设计，尤其是父级元素）
#father { border: 1px red solid; height: 1000px; } -
增加一个空的div标签，清除浮动（方法简单，但尽量避免使用此方法，要保证代码简洁）
<div class="clear"></div> .clear { clear: both; margin: 0; padding: 0; } -
在父级元素中增加
overflow属性（很少使用，允许使用下拉的场景很少）-
overflow规定当内容溢出元素框时要怎么处理scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容hidden内容会被修剪，并且其余内容是不可见的auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
#father { width: 200px; height: 150px; overflow: scroll; }
-
-
父级添加一个伪类：
after（主要使用此方法）/*使用结构伪类选择器 :after 选择器在被选元素的内容后面插入内容*/ #father:after{ /*添加一个空内容，相当于一个空的div块*/ content: ''; /*指定添加的是一个块级元素*/ display: block; /*清除浮动*/ clear: both; }
7 定位
7.1 相对定位
- 相对于自己原来的位置进行指定偏移
- 偏移后的元素不会导致原有格局塌陷
prosition
#first {
background: red;
border: 1px dashed red;
position: relative;
top: -20px;
left: 20px;
}
#second {
background: deeppink;
border: 1px dashed deeppink;
position: relative;
bottom: -10px;
right: 20px;
}
7.2 绝对定位
- 相对于父级元素或浏览器的位置(不指定父级元素的时候)进行指定偏移；
子集元素只会在父级元素的范围内移动
绝对定位不会保留元素偏移前的位置
绝对定位有两种情况：
情况一：
- 没有父级元素定位的前提下，绝对定位会相对于浏览器而定位
#position {
position: absolute;
reight: 20px;
}
情况二：
- 父级元素存在定位属性，那么子属性会相对于父级元素进行偏移（绝对定位）
#father {
/*父级元素有这个定位属性即可，具体怎么偏移非必要*/
position: relative;
}
#position {
position: absolute;
reight: 20px;
}
7.3 固定定位fixed
body {
height: 2000px;
}
div:nth-of-type(1) {
background: deepskyblue;
height: 200px;
width: 200px;
/*绝对定位：相对于浏览器的定位（浏览器当前页的位置，页面向下滚动后，固定定位的div会随着已经滚走的那部 分滚走）*/
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2) {
background: deeppink;
height: 100px;
width: 100px;
/*固定定位：位置是定死的（可以理解为浏览器是罩在页面上的一个框，fixed相对于这个框定位，无论页面怎么 滚，它都在这个位置）*/
position: fixed;
right: 0;
bottom: 0;
}
7.4 z-index图层
- 当页面存在很多定位时，可能会因为实际需求产生重叠的定位元素，这就有了图层的概念
- 图层从第0层开始，上不封顶
.testText{
z-index: 0;
}
.testBg{
/*透明度，一般用作背景*/
opacity: 0.5;
}
8 动画
动画一般使用JavaScript来制作，js更炫酷更灵活。
CSS很少直接来写动画，即便有百度拿过来直接用
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
