一、
层叠样式表
1) 在html中应用
css嵌入到html的头部的style标签内
css嵌入到元素style属性内
css规则与html结构分离(解耦)
css规则可以复用
css单独写入到.css文件,通过link引入到html
2) 语法
注释: /* 注释内容 */
语法:
选择器 {
样式规则
}
.box {
background-color:lightcoral;
color: #fff;
width: 300px;
margin-bottom: 1em;
}
3) 选择器
1. 核心选择器
id选择器 利用了html元素的id属性,唯一
#one {} 选中id为one的元素
class选择器 利用html元素的class属性,非唯一
.box {} 选中class为box的元素
标签选择器 利用标签名进行选择
div {} 选中所有的div元素
并且选择器
div.box {} 选中div元素,并且这个div的class为box
和选择器
div,.box{} 选中div元素和class为box的元素
普遍选择器
* {} 选中所有元素
2. 层次选择器( 两个选择器配合使用)
子选择器 通过父元素选择子元素
>
.menu > li {}
后代选择器
空格
.menu li {}
<ul class="menu">
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
兄弟选择器
~ 当前元素之后的所有兄弟
ul.rank > li:nth-child(2) ~ *{}
第二个li之后的所有li
+ 当前元素之后的下一个兄弟
ul.rank > li:nth-child(2) ~ *{}
第三个li
3. 属性选择器(属性过滤器),一般应用在表单元素
input[name]
具有name属性input元素
input[name='username']
具有name属性,并且name属性值为username的input元素
input[name^='u']
具有name属性,并且name属性值以'u'作为开始
input[name*='u']
具有name属性,并且name属性值包含'u'
input[name$='u']
具有name属性,并且name属性值以'u'作为结尾
4. 伪类选择器(伪类过滤器)
:first-child
:last-child
:nth-child(n) 第n个孩子阶段
:visited 访问过的
:hover 光标悬浮上去
:active a标签
:focus 聚焦
5. 伪元素选择器
::after
ul.menu::after {
}
在class为menu的ul元素中追加一个子元素
<ul class="menu">
<li>one</li>
<li>two</li>
::after
</ul>
ul.menu::before {
}
在class为menu的ul元素中插入一个子元素
<ul class="menu">
::before
<li>one</li>
<li>two</li>
</ul>
4) 计算选择器优先级
当多个选择器中的相同规则作用于同一个元素的时候,我们纠结到底这个元素上使用哪个规则的时候。
公务员 -> 考研211+ -> 进入BAT(30%) -> 进入中小型私企(0)
1. 权重(积分)
1000 style
100 id
10 class、伪类
1 元素选择器、伪元素
1+10 + 1 + 10 + 1+ 10 + 1
ul.menu > li.menu_item > ul.sub_menu > li {
color: lightcyan; /* 34*/
}
#introduce {
color:lightcoral /*100*/
}
.si {
color: gray !important;
}
2. 顺序(排名)
当权重值相同的情况下,后者覆盖前者
3. 特权(!important)
脱离了权重和顺序规则
5) 样式规则
1. 字体规则
可被继承
font-family 字体
字体栈 "Microsoft YaHei","宋体"
在浏览器所在pc从字体栈顶到底寻找字体,找不到使用默认字体
font-size 字体大小
12px
font-weight 字体粗细程度
100~900
bold
bolder
font-style 是否是斜体
italic
normal
color 字体颜色
line-height 行高
长度的相对单位
1px
em 相对于当前元素上的字号
rem 相对于根元素上的字号
font 速写形式
font: font-style font-weight font-size/line-height font-family
font: normal normal 14px/1.2 '宋体','微软雅黑';
font: 14px/1.2 '宋体','微软雅黑';
网络字体(iconfont)
应用
分析实现过程
@font-face {
font-family:"iconfont"
src:
}
.iconfont {
font-family:"iconfont"
}
.icon-Backward-Button:before {
content: "\e82e";
}
2. 文本规则
text-align 文本在容器中显示方式
center
text-decoration-line:underline;
text-decoration-style: double;
text-decoration-color: lightsalmon;
text-decoration: none;
text-indent 缩进
text-transform 控制大小写
white-space:容器内的文本是否会主动换行
nowrap 不换行
overflow: 容器内的内容超出部分如何处理?
hidden
text-overflow: 文本超出部分如何显示提示?
ellipsis '...'
3. 列表规则
用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
list-style:none;
4. 其他规则
cursor:pointer;
visibility:hidden
opacity:0.2
display:none; 【三十年河东三十年河西】
改变元素的显示方式
none
block 将行内元素转换为块元素
inline 将块元素转换为行内元素
inline-block 行内块元素
与其他行内元素共享一行空间
可以指定宽高
面试题:
如何将一个文本在块元素进行水平居中?
text-align:center
如何将一个文本在块元素进行垂直居中?
如何将一个块元素进行水平居中?【3种】
overflow:
overflow-x,overflow-y速写
overflow:hidden;
overflow:scroll;
overflow:auto;
容器,容器的内容的大小超过容器本身
outline
外圈线框
outline-color: pink;
outline-width: 2px;
outline-style: solid;
outline-offset: 1px;
outline:
5. 盒子规则
盒子 - 块元素
margin 外边距(盒子外边框距离其他元素的距离)
margin: 10px; 上右下左
margin: 10px 20px; 上下,左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 下 右 下 左
速写形式,外边距,上下外边距会进行重叠
margin-top
margin-right
margin-bottom
margin-left
border 边框
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border 速写
border: 2px solid #ccc;
padding 内边距(内容距离盒子内边框的距离)
padding: 10px; 上右下左
padding: 10px 20px; 上下,左右
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px 30px 40px; 下 右 下 左
速写形式,外边距,上下外边距会进行重叠
padding-top
padding-right
padding-bottom
padding-left
width/height
宽高
box-sizing(盒子模式)
内容盒子(普通盒子 , 默认盒子)
content-box;
盒子实际占据的宽度 2borderWidth + 2padding + width
盒子实际占据的高度 2borderWidth + 2padding + height
边框盒子(怪异盒子 ie低版本)
border-box;
盒子实际占据的宽度 :width
width = 2borderWidth + 2padding + 内容宽
盒子实际占据的高度 :height
border-radius:2px
外圆 300px
内圆 200px
期望 内圆由200 变化到250,并且,中心点不变
background
background-color
background-image
background-repeat
background-size
background-position
background-clip
background-orign
background-attachment
background 速写形式
6. 默认文档流 (y轴)
块元素, 独占一行空间,高度由内容决定。块元素默认从上往下排列
6) 布局
1. 浮动布局(x轴)
float:left
浮动元素:
1) 脱离文档流
2) 块元素的宽度不再是100%,由内容决定
3) 块元素不再支撑其父元素
4) 同一层次(兄弟关系)浮动元素会在一行排列,当浮动元素宽度总和大于父元素的时候会发生换行。
clear
清理浮动
left 不与左浮动元素在同一水平线上
right 不与右浮动元素在同一水平线上
2. 伸缩盒布局(x轴)
div.container > div
ul.container > li
1) 概念
伸缩盒容器 div.container 、ul.container
伸缩盒元素 div、li
主轴 默认主轴x轴,伸缩盒中,伸缩盒子元素沿着主轴来进行排列
交叉轴 与主轴垂直的轴
2) 规则
伸缩盒容器
display:flex;
强制让它的子元素沿着主轴方向中显示,并且子元素不会脱离文档流,交叉轴上元素的高度如果没有指定,应该和父元素保持一致。
flex-direction:row;
定义主轴方向,row 表示主轴是x轴,column表示主轴为y轴
flex-wrap:nowrap
当子元素的长度加起来超过主轴上的父元素的宽度,默认不换行,
align-items: stretch;
定义伸缩盒容器中的子元素在交叉轴上的排列方式
justify-content:space-around;
定义伸缩盒容器中的子元素在主轴上的排列方式
伸缩盒元素
flex-basic: 主轴上的基础长度(基本工资)
flex-grow: 主轴上剩余空间分配的份数(分红)
flex-shrink: 主轴上亏损空间的分摊份数(亏损)
3. 定位布局(z轴)
position:
static 静态(默认、非定位元素)
relative 相对(定位元素)
absolute 绝对(定位元素)
fixed 固定(定位元素)
sticky 粘滞(定位元素)
定位元素的特点: 可以使用定位规则。top right bottom left
1) 相对定位
1. 不脱离文档流
2. 相对于它原来所在位置移动
2) 绝对定位
1. 脱离文档流
2. 相对于距离它最近的父定位元素位置移动!如果所有的父元素都不是定位元素,相对于浏览器视口位置移动
一般情况下,绝对定位元素应该嵌套在相对定位元素内容来使用
3) 固定定位
1. 脱离文档流
2. 相对于浏览器视口进行定位
4) 粘滞定位
1. 在没有达到阈值的时候是不脱离文档流(相对),达到阈值脱离文档流(固定)
2. 通过left、top、right、bottom来设定阈值
定位布局的应用:
1. 二级栏目
2. 模态框
3. 特殊布局
7) 动画特效
1. 动画
设计师;美工;前端(实现)
动态网站(具有动画 错误!)是数据是动态的。
1) 实现步骤
1. 定义动画帧
@keyframes 动画名{
from {
// 开始帧
}
to {
// 结束帧
}
}
@keyframes 动画名{
0% {
// 开始帧
}
20% {
}
...
100% {
// 结束帧
}
}
2. 设定动画(贺卡)
animation-name: move;
动画名
animation-duration: 2s;
持续时间
animation-timing-function: linear;
时间曲线函数(自由落体,贝塞尔曲线)
animation-fill-mode:forwards;
填充模式,动画结束后保留哪一帧规则
animation-iteration-count: 2;
动画迭代次数 infinite
animation-direction: alternate-reverse;
动画执行的方向 from->to , to->from
animation-play-state: paused;
动画状态
animation-delay: 1s;
延迟时间
animation: move 2s 1s 2 linear;
动画的速写形式
2) 案例(呼吸灯)
3) 案例(梦幻西游)
2. 动画库 animate.css
动画帧、动画设定规则都有第三方完成,我们直接使用class即可
1) 引入动画库
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css">
2) 使用
1. 直接调用动画设定类
<div class="box animate__animated animate__infinite animate__bounce"></div>
2. 引用关键帧
<style>
.bounce {
animation: flash 10s linear infinite;
}
</style>
<div class="box bounce"></div>
3. 过渡
过渡是轻量级的动画,过渡中无需定义关键帧,它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上(状态发生变化的时候)
transition-property: width;
过渡属性,取值可以为多个,多个值通过逗号分割;关键字:all 所有属性
transition-duration: 2s;
过渡持续时间
transition-delay: 0;
过渡延迟时间
transition-timing-function: linear;
时间曲线函数
transition:transform,background-color 2s,2s 0s linear;
速写形式
4. 变形
transform:变形函数
1. 缩放
scale(2)
2. 平移
translate(100px,50px)
3. 旋转
rotate(360deg)
4. 拉伸
skew(45deg)
8) 媒体查询(响应式布局)
pc、 pad 、phone (中小型网页)
一套网页(pc、pad、phone)
网易严选(非响应式)
pc 定宽
mobile 响应式
腾讯视频 (半响应式)复杂,to-c
pc (响应 :4k 2k 1080p 普通) https://v.qq.com/
1. 定宽? 1190px (淘宝)
2. 非定宽(响应 4k 2k 1080p 普通)
mobile (响应) https://m.v.qq.com/
newbalance (全响应)中国、汇智网
pc、mobile - 简单,小众
https://www.newbalance.com.cn/
https://www.newbalance.com.cn/
黑话:
to-C client 个人(抖音、淘宝、京东)互联网
to-B business 企业级
to-G 政府 学校/政府 - 监控终端、大屏、二手房交易网、健康码
1. 如何实现
1) 非响应式
2套
- pc
1190px 宽度写死 400px 700px
- mobile(响应式)
2) 半响应式
- pc(4k 2k 1080p 普通)
- mobile(响应式) 宽度尽可能使用百分比
3) 全响应式
-pc、mobile (4k 2k 1080 普通 pad phone)
2. 技术
@media 判断媒体类型(屏幕类型)
@media screen and (min-width:900px) and (max-width:1200px) {
/* 当屏幕满足上述条件,执行该代码块内部的css*/
.container {
background-color: pink;
}
}
3. bootstrap中响应式
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
9) 补充样式
verticle-align 行内元素在垂直方向上的排列规则。这个规则只能应用于行内元素
1. 前提
盒子中存在多个行内元素
2. 基线
行内元素默认在基线上下排列面
如何理解语义化?
利用标签表达出来的含义(而不利用标签表达的样式)来表达页面结构
换句话说,就是在合适的页面位置上使用合适的标签
hello world
什么是盒子模型?
内容盒子(默认盒子) width = 内容宽
边框盒子(怪异盒子 ie低版本)width = 内容宽 + padding + border
居中?
文本在盒子中水平居中?
text-align:center
文本在盒子中垂直居中?
1) line-height = height
2) vertical-align 行内元素?
盒子应该位于容器内部,容器通常情况下要比盒子大
盒子在容器中水平居中?
1) margin: 0 auto;
2) 定位 margin-left:50%; left:-50px; position:relative;
3)
盒子在容器中垂直居中?
2) 父元素padding, box-sizing:border-box
2) 父元素padding + 子元素margin, box-sizing:border-box