html-css
html
语义化标签
- header 网页头
- main 网页主题（只能有一个）
- footer 网页底部
- nav 网页导航
- aside 和主题相关的内容（侧边栏）
- article 独立的文章
- section 独立的区块（以上都不合适时）
- div 主要的布局元素
- span 行内元素（一般在网页中选择文字）
- target属性，用来指定超链接打开的位置
- _self 默认值 在当前页面打开超链接
- _blank 在一个新的窗口打开超链接
图片
- alt 图片描述，默认情况不显示，图片无法显示时浏览器会根据alt中的内容来识别图片
- width 宽度（单位像素）
- height 宽度和高度中只修改一个，另一个会等比例缩放
- 一般在pc端不建议修改图片大小
- 移动端经常需要对图片进行缩放
- jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
- gif
- 支持的颜色较少，支持简单透明，能支持动图
- 颜色单一，动图
- png
- 支持颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
- webp
- 谷歌新推出的图片格式，具备其他图片的所有优点，而且文件较小
- 缺点是兼容性不好
- base64
- 将图片使用base64编码，可以将图片转换为字符，通过字符形式来引用图片
- 一般都是一些需要和网页一起加载的图片才会使用
- 原则：效果一样，用小的；效果不一样，用效果好的
音频 视频
- audio (video)用来向网页中i纳入一个外部音频文件，默认不允许用户自己控制播放和停止
- 属性
- controls 是否允许控制播放
- autoplay 是否自动播放
- loop 是否循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>
<--也可通过source来指定文件-->
<audio controls>
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<source src="./source/audio.mp3" type ="audio/mp3">
</audio>
链接
- 可以实现指定为是的跳转（href=#id）
- id属性：
- 每个标签都可以添加一个id属性
- id属性是元素的唯一标识，同一个页面不能出现重复的id属性
- （#）可以作为超链接的占位符
<a href="javascript:;">超链接</a>
此时点击超链接什么变化都没有
css
选择器
-
子元素选择器
- 作用：选中指定父元素的指定子元素
- 语法：父元素 > 子元素
-
后代选择器
- 作用：选中指定元素内的指定元素内的后代元素
- 语法：祖先 后代
-
下一个兄弟
- 语法：前一个 + 下一个
-
选择下边所有的兄弟
- 语法：兄 ~ 弟
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性的属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值含有某值的元素
伪类
伪类用来描述一个元素的特殊状态
比如：第一个子元素、元素被点击、鼠标移入。。。
伪类一般清空都是使用：开头
- :first-child 第一个子元素
- :last-child
- :nth-child()
- 特殊值：
- n 第n个
- 2n 或 even 偶数
- 2n+1 或 odd 奇数
- 在所有子元素中进行排序
- 特殊值：
- :first-of-type
- :last-of-type
- :nth-of-type()
- 在同类元素类型中进行排序
- :not() 否定伪类
- 将符合条件的元素从选择器中去除
- :link 没访问过的链接（整成链接）
- :visited 访问过的链接（只能修改链接的颜色）
- :hover 鼠标移入的状态
- :active 用来表示鼠标点击
伪元素：表示一些特殊的并不真实存在的元素（特殊的位置）
- 伪元素以（::)开头
- ::first-letter 第一个字母
- ::first-line 第一行
- ::selection 选中的内容
- ::before 元素的开始
- ::after 元素的最后
- before 和after必须结合content属性来使用
样式
- 当通过不同的选择器，选中相同的元素，并且设置了不同的样式时，就发生了样式冲突
- 冲突时，由选择器的权重决定：
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
机场的样式 没有优先级
- 比较优先级时，将所有的选择器权重累加，比大小来决定显示
- 可以在某个样式后添加 !important，此时改样式会获取到最高的优先级，甚至超过内联样式
- 注意：在开发中要谨慎使用！
继承
- 样式 的继承：
- 元素的样式同时也会应用到他的后代元素上
- 继承是发生在祖先和后代之间的
- 继承的设计方便更好的开发
- 利用继承可以将一些通用的员工是统一设置到共同的祖先元素上
- 注意：并不是所有的样式都会被继承（背景、布局则不会）
长度单位
- 像素
- 屏幕实际由像素点构成
- 像素越小的显示效果越清晰
- 因此同样的200px在不同的设备下显示效果不同
- 百分比
- 可以将属性设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
- em
- em是相对于元素的字体大小而计算的
- 1 em = 1 font-size
- em会根据字体大小的改变而改变
- rem
- rem是相对于根元素的字体大小来计算的
颜色单位
- RGB值
- 通过三原色的不同浓度来调配出不同的颜色
- 每种颜色的范围在0-255（0%-100%）
- RGB（r,g,b)
- RGBA
- 增加了不透明度
- 1表示完全不透明 0表示完全透明
- 十六进制的RGB
- 语法：#红色绿色蓝色
- 颜色浓度— 00-ff
- 简写：#aabbcc---> #abc
- HSL值
- H色相（0-360）
- S饱和度，颜色的浓度0%-100%
- L 亮度，0%-100%
文档流
-
网页是多层的结构，一层叠着一层
-
通过css分别为每一层来设置样式
-
用户只能看到最上面的一层
-
这些层中最底层的为文档流，它是网页的基础，所有创建的元素默认都是在文档流中进行排列
-
元素状态
- 在文档流中
- 不在文档流中
-
元素在文档流中的特点
- 块元素
- 在页面中但独占一行（自上而下垂直排列）
- 默认宽度是父元素的全部（把父元素撑满）
- 默认高度被内容撑开
- 行内元素
- 不会单独占一行，只占自身大小
- 在页面中从左向右排列（和书写习惯一直）
- 默认宽度和高度都是被内容撑开
- 块元素
-
子元素是在父元素的内容中排列的
- 若子元素的大小超过父元素，则子元素会从父元素中溢出
- 使用overflow属性来设置父元素如何处理溢出的子元素
- 可选值
- visible，默认值，溢出的部分在父元素外部显示
- hidden 溢出的部分被裁减，不显示
- scroll 生成滚动条，通过滚动条来查看完整内容
- auto 根据需要生成滚动条
-
元素在父元素中水平布局必须满足该等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区域的宽度
- 调整过程
- 若七个值中没有auto，浏览器自动调整margin-right使得等式成立
- 有auto则自动调整auto使得等式成立
- 若将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
- 若将三个之都设置为auto，则外边距都是0，宽度最大
- 若将两个外边距设置为auto，宽度固定，则会将外边距设置为相同的值，利用其让子元素在父元素中居中
width:100px margin:0 auto
- 调整过程
-
垂直边距的重叠
- 相邻的垂直方向边距会发生重叠现象
- 兄弟元素
- 兄弟元素间的相邻垂直外边距会取两者之间较大的值（都是正值）
- 特殊情况
- 相邻外边距一正一负，取两者之和
- 相邻外边距都是负值，取绝对值较大的
- 兄弟元素之间的外边距重叠，对于开发有利，不需要处理
- 父子元素
- 父子元素间相邻外边距，子元素会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须进行处理
display 设置元素的显示类型
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 行内块，可设置宽高，不独占一行
- table 设置为表格
- none 元素不在页面中显示
visibility 设置元素的显示状态
- visible 默认值，元素在页面中正常显示
- hidden 元素在页面中隐藏，但占据页面位置
行内元素的盒子模型
- 行内元素不支持设置宽度和高度
- 行内元素可设置padding，但垂直方向padding不影响页面布局
- 行内元素可设置border，垂直方向border不会影响页面布局
- 可设置margin，不影响页面布局
- 重置样式表，专门用来 对浏览器的央视进行重置
- reset.css 直接除去浏览器的默认样式
- normalize.css 对默认样式进行统一
- 文字在父元素中垂直居中
- height和line-height设置为同一值
box-sizing
- 用来设置盒子尺寸的计算方式（设置宽高的作用）
- 可选值
- content-box 默认值，宽高用来设置内容区域的大小
- border-box 宽高用来设置整个盒子的可见框的大小，（内容，padding，border），是可见区，margin不在范围内
box-shadow
- 设置元素的阴影效果
- 第一个值，水平偏移量
- 第二个值，垂直偏移量
- 第三个值，阴影的模糊半径
- 第四个值，阴影的颜色
浮动
- float
- none 默认不浮动
- left 元素向左浮动
- right 元素向有浮动
- 浮动后，水平布局等式不必强制成立，脱离文档流
- 浮动特点：
- 设置浮动后，元素会向父元素的左侧或右侧移动
- 默认不会从父元素中移出
- 浮动不会超过他前面的其他浮动元素，最多等高
- 若浮动元素的上面是一个没有浮动的块元素，则浮动元素无法上移
- 脱离文档流特：
- 款元素
- 款元素不再单独占页面的一行
- 块元素的宽和高默认会被内容撑开
- 行内元素
- 行内元素会变成块元素
- 款元素
- 高度塌陷问题
- 父元素的高度默认是子元素撑开，当子元素浮动后，无法撑开父元素高度，导致父元素高度丢失
- BFC（block formatting context）块格式化环境
- 开启bfc 元素会变成一个独立的布局区域
- 开启特点
- 元素不会被浮动元素覆盖
- 元素子元素和父元素外边距不会重叠
- 元素可以包含浮动子元素
- 开启方法：
- 设置浮动（不推荐）
- 设置行内块（不推荐）
- 将元素的overflow设置为一个非visible的值 （overflow：hidden）
- clear
- 作用：清除浮动元素对当前元素产生的影响
- 可选值
- left 清除左侧浮动的影响
- right 清除右侧浮动的影响
- both 清除两侧中最大影响的那一侧
- 原理：
- 设置清除后，浏览器自动为元素添加一个外边距时期位置不受其他元素的影响
.box3{
clear:both;
}
.box1::after{
content:'';
display:block;
clear:both;
}
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
定位
-
position:可选值
- static 默认值，没有开启定位
- relative 相对定位
- absolute 绝对定位
- fixed 开启元素的固定定位
- sticky 开启元素的粘滞定位
-
相对定位特点：
- 若不设置偏移量，元素不会发生任何变化
- top bottom left right (定位元素和定位位置）
-
绝对定位
- 不设置偏移量，元素位置不会发生变化
- 会改变元素性质，行内变成块，快的宽高别内容撑开
- 使元素提升一个层级
- 绝对定位元素是相对于其包含块进行定位的
- 包含块（containing block)
- 正常情况下
- 指里当前元素最近的祖先块元素
- 绝对定位的包含块
- 里他最顶的开启定位的祖先元素（没有则是根元素）
- html（根元素，初始包含块）
- 正常情况下
-
固定定位
- 固定定位永远参照浏览器的视口进行定位
-
粘滞定位
- 可以在元素达到某个位置时将其固定
-
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=元素宽度
-
开启定位元素，可通过z-index提升元素的层级（大），若层级相同，优先显示靠下的元素，祖先元素的层级再高也不会盖住后代元素
-
将背景颜色设置到内容区，边框和内边距不在有背景颜色 background-clip:content-box;
文字
@font-face { /* 缺点：加载速度慢，版权问题 */ /* 指定字体的名字 */ font-family: 'myfont'; /* 服务器中字体的路径 */ src: url('./font/ZCOOLKuaiLe-Regular.ttf'); }
- 图标字体（iconfont）
- 通过图片引入图标，但图片大，不灵活
- 使用图标时，将图标直接设置为字体，通过font-face的形式对字体进行引入
- fontawesome 使用步骤
- 下载：https://fontawsome.com/
- 解压
- 将css和webfonts移动到项目中
- 将all.css引入到网页中
- 使用图标字体
- 直接通过类名来使用图标字体
- class="fas fa-bell"
- class="fab fa-accessible-icon"
- 通过实体来使用图标字体，&#x图标的编码
<span class="fas">&#x...; </span>
-
通过伪元素来设置图标字体
- 找到设置图标的元素通过before或after选中
- 在content中设置字体编码
- 设置字体样式
- fab font-family:" ... "
- fas font-family:'....'
-
text-align 文本的水平对齐方式（justify 两端对齐 ...）
-
vertical-align 元素垂直对齐方式
-
white-space 设置网页如何处理空白（pre 保留空白）
-
background-origin 背景图的偏移量计算原点
- padding-box 默认值，从内边距开始计算
- content-box 背景图片的偏移量从内容区处计算
- border-box 从边框处开始计算
-
解决图片闪烁问题
- 将多个小图片保存大一个大图片那装，调整background-posiition来显示不同图片
- 称为雪碧图
- 确定要使用的图标
- 测量图片大小
- 根据测量结果创建元素
- 将雪碧图设置为元素的背景图片
- 设置偏移量正确显示图片
- 雪碧图特点
- 一次将托个图片加载进页面，降低请求次数，加快访问速度，提升用户体验
-
渐变是图片，通过background-image 来设置
-
线性渐变，颜色沿一条直线发生变化 linear-gradient()
-
linear-gradient(red,yellow）红色开头，黄色结尾，中间是过渡区域
- 线性渐变的来头，可以指定渐变的方向
- to left
- to right
- to bottom
- to top
- deg 度数
- turn 表示圈数
- 渐变可以同时指定多个颜色，多个颜色默认平均分布，也可以手动指定分布情况
- repeating-linear-gradient()可以平铺的线性渐变
- 线性渐变的来头，可以指定渐变的方向
span{
background-image:linear-gradient(red,yellow,orange);
background-image:linear-linear-gradient(red 50px ,yellow 50px ,green 30px);
background-image: repeating-linear-gradient(red,yellow 40px );
}
-
radial-gradient()径向渐变（放射型效果）
- 默认渐变的形状根据元素的形状来计算
- 正方形--圆形
- 长方形--椭圆形
- 可指定渐变的大小 circle ellipse
- 指定渐变的位置
- radial-gradient(大小 at 位置，颜色 位置，颜色 位置 ）
- 大小
- circle
- ellipse 椭圆
- closest-side 近边
- closest-corner
- farthest-side
- farthest-corner
- 位置
- top
- right
- left
- center
- bottom
-
表格
- rowspan 纵向的合并单元格
- colspan 行向合并单元格
- thead
- tbody
- tfoot
- th 头部单元格
- display:table-cell; 将元素设置为单元格
- border-spacing: 指定边框之间的距离
- border-collpase:collpase; 设置边框的合并
- 默认情况元素在td中是垂直居中的 vertical-align可调
-
表单
- 表单用于提交数据
- 网页中的表单用于将本地的数据提交到服务器
- form标签来创建一个表单
- form 属性 action 提交的服务器地址
- 文本框 数据提交到服务器必须要为元素指定一个name属性值
- autocomplete="off" 关闭自动补全
- readonly 将表单项设置为只读，数据会提交
- disabled 将表单设置为禁用，数据不会提交
- autofocus 设置表单项自动获取焦点
过渡
- 通过过渡指定一个属性发生变化时的切换方式
- 通过过渡创建好的效果，提升用户体验
- transition-property:指定要执行过渡的属性
- 多个属性用 ，隔开
- 所有属性都过渡，使用all
- 过渡必须是从一个有效数值向另一个有效数值进行过渡
- transition-duration: 指定过渡持续时间
- transition-timing-function : 过渡的是时序函数
- ease 默认，慢速开始，先加速在减速
- linear 匀速运动
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速
- cubic-bezier() 指定时序函数
- steps() 分布执行过渡效果
- end, 在时间结束时执行过渡（默认值）
- start，在时间开始时执行过渡
- transition-delay:过渡效果延迟，等待一段时间后在执行过渡
- transition 若要写延迟，则两个时间中第一个时持续时间
- transition: property duration timing-function delay;
- transform 用来设置元素变形效果 平移元素百分比相对自身计算
- translateX()
- translateY()
- translateZ(300px)
- rotateX()
- rotateY(19deg)
- rotateZ(.25turn)
- scaleX() 水平方向缩放
- scaleY() 垂直方向缩放
- scale() 双方向的缩放
- perspective： 300px 眼睛距离网页的距离
- z轴，调整元素和人眼的距离
- z轴平移属于立体效果（近大远小），默认不支持透视，若要看见效果必须设置网页视距
- 是否显示元素背面 backface-visibility: ;
动画
- animation-name:关键帧名字
- @kayframes name{from{ }to{ }}
- animation-duration 动画执行时间
- animation-delay 动画延时
- animation-iteration-count 动画执行的次数
- 次数值 infinite （无限循环）
- animation-direction 动画运动方向
- normal 默 从from向to运行，每次都这样
- reverse 从to向from运行，每次都这样
- alternate 从from向to运行，重复执行动画是反向执行
- alternate-reverse 从to向from运行 重复执行动画时反向执行
- animation-play-state 设置动画的执行状态
- running 默认值
- paused 动画暂停
- animation-fill-mode 动画的填充模式
- none 默 动画执行完元素回到原来位置
- forwards 动画执行完停止在动画结束的位置
- backwards 动画延时等待时，元素会处于开始位置
- both 结合了forwards 和backwards
less
- 变量：在变量中可以存储任意值，
- 语法：@变量名
- & 表示外层的父元素 &：hover
- :extend() 对当前选择器扩展指定选择器的样式
- 直接对指定的样式进行引用，这里相当于将p1的样式进行复制，mixin 混合
.box3{
width: 200px;
height: 200px;
}
.box1{
//mixin 混合
.box3();
}
.box2(){
//使用类选择器可以在选择器后边添加一个括号，可以创建一个mixins
width: 100px;
height: 100px;
}
.test(@w:10px,@h:30px,@bg-color:red){
//混合函数 在混合函数中可以直接设置变量
width: @w;
height: @h;
border:1px solid @bg-color;
}
div{
//调用混合函数，按顺序传递参数
.test(300px);
.test(@bg-color:red,@h:100px,@w:200px);
}
@import "syntaxt2.less"; 导入模块 可直接进行运算
@a:200px;
@b:blue;
@c:box1;
.box1{
//使用变量时，直接用@变量名 的形式使用
width: @a;
color:@b;
//变量重名时，优先使用比较近的变量
@a:300px;
}
//可以在变量声明前就使用变量
@e:200px;
//作为类名
.@{c}{
width: @a;
background-image:url("@{c}/1.png")
}
媒体查询
- 语法 ：@media 查询规则
- 内体类型
- all 所有设备
- print 打印设备
- screen 带屏幕的设备
- speech 屏幕阅读器
- 链接多个媒体类型，这样他们之间是或的关系
- 可以在媒体类型前加only ，表示只有
- only 的使用主要是为了兼容老版本浏览器
- 内体类型
@media print,screen {
body{
background-color:skyblue;
}
}
响应式布局
- 网页可以根据不同的设备或窗口大小呈现出不同的效果
- 响应式布局关键是媒体查询
- 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式
- 媒体特性：
- width 视口的宽度
- height 视口的高度
- min-width 视口的最小宽度（视口大于指定宽度时生效）
- max-width 视口的最大宽度（视口小于指定宽度时生效）
- 样式切换的分界点（断点），
- 小于768 超小屏 max-width=768px
- 大于768 小屏 min-width=768px
- 大于992 中屏 min-width=992px
- 大于1200 大屏 min-width=1200px
@media(max-width:300px){
body{
background-color:red;
}
}
@media only screen and(min-width:500px) and (max-width:700px){
body{
background-color:red;
}
}
( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧如有高见，欢迎赐教( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧( •̀ ω •́ )✧
浙公网安备 33010602011771号