web前端 HTML5 CSS3 HTML CSS
2024-09-19 17:47:49 0 举报AI智能生成
登录查看完整内容
web前端 HTML CSS HTML5+CSS3
作者其他创作
大纲/内容
子主题
HTML：骨架
CSS: 皮肤
JavaScript：神经
前导
记事本
sublime
Hbuilder/ Hbuilderx
vscode
开发工具
<!DOCTYPE html>
声明部分
在浏览器标签中显示的标题名字
title
<link rel='定义文档与链接文档之间的关系' type='被链接文档类型' href='被链接文档位置'>
定义文档与外部资源的关系
link
定义内部样式与网页的关系
style
定义js脚本或者引入外部的js文件
script
head部分
每个标签独占一行
含义
标题
h1-h6标签
p标签是一个文本级标签，里面只能放文字、图片、表单元素，也就是p 标签不能嵌套块级标签
段落标签： <p>
ul的儿子是lili只能在包裹在ul里面
ul li 无序列表标签
ol的儿子只能是li
ol li 有序列表标签
<div>
块级标签
外部链接 <a href=\"new.html\">点击进入新网页</a>
跳转顶部： <a href=\"#\">跳转顶部</a>
href: 目标URL
title: 鼠标悬停文本
name: 设置锚点名称
_self:在同一个网页打开(默认）
_blank:在新窗口打开
_parent:在父窗口打开
_top：在顶级窗口显示
target：设置浏览器用什么方式打开目标页面
a标签的属性
一般是p包含a
a标签是一个文本级标签
<a>
超链接
src属性
图片标签: <img>
span标签是一个文本级标签，里面只能放文字、图片、表单元素
<span>
行级标签
排版标签
粗体标签：<b>
下划线标签：<u>
斜体标签： i
斜体标签，强调：<em>
强调字体，加粗显示
strong
空格：
小于号：<
大于号：>
版权：©
特殊字符
字体标签
thead
tbody
tfoot
tr定义表行
th定义表头
td定义表单元格式数据
<table> 表格标签
表格标签
定义表单被提交时发生的动作提交给服务器处理程序的地址
action
作用：定义表单提交数据时的方式
默认值，明文提交，所提交的数据可以显示在地址上，安全性低
提交数据大小有限制，最大为2KB
get
隐式提交-所提交的内容不会显示到地址栏上，安全性高
无大小限制
post
取值
method
编码类型，即表单数据进行编码的方式允许表单将什么样的数据提交给服务器
取值：1.application/x-www-form-urlencoded 默认。 允许将 普通字符，特殊字符，都提交给服务器，不允许提交 文件
2.multipart/form-data，允许被将文件提交给服务器
3.text/plain 只允许提交普通字符。特殊字符，文件等都无法提交
enctype
注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data
普通按钮，与form表单没有任何关系
button
<input type=\"text\">
text 明文显示用户输入的数据
<input type=\"password\">
password 密文显示用户输入的数据
checked设置值后被选中
radio 单选按钮 checkbox复选按钮
多选框
checkbox
submit 负责将表中的表单控件提交给服务器
file 上传文件所用
type
value 控件的值
input 组元素
作用：允许用户录入多行数据到表单控件中
cols 指定文本区域列数，变相设置元素的宽度
rows 指定文本区域的行数，变相设置当前元素的高度
属性
textarea 文本区域
size 取值大于1的话 则为滚动列表否则就是下拉选项框
multiple 设置多选
select属性
value 选项的值
selected 预选中如果没有设置selected属性的话，那默认会是选项框中的第一项
option属性
select和option选项框
表达控件分类
form表单标签
表单标签
body部分
语义化标签
input类型
input属性
视频
音频
html5新增标签
HTML
1：使标签臃肿，可读性太差
2：不能重用
缺点
内嵌式 <div style=\"font-size:10px;color:yellow\">
内联式 <style type=\"text/css\".box {font-size:30px;color:yellow;}</style>
外链式 <link rel=\"stylesheet\" type=\"text/css\" hrel=\"./css/index.css\">
css引入方式
标签名{css样式}
选中所有的该标签名的标签
标签选择器
*{css样式}
选中所有的标签
通配符选择器
#id属性值{}
#div1{}选中id属性值位div1的标签
ID选择器
.class属性值{}
案例： .class1{}选中所有class属性值位class1的标签
类选择器
基础选择器
p标签，只能嵌套行级标签
块级标签可以嵌套块级标签和行级标签
行级标签中只能嵌套行级标签
嵌套规则
html标签可以进行嵌套
只能选中儿子，而不能选中孙子以后的
ul>li 父子选择器
可以选中所有后代，包括儿子孙子
ul a 后代（包含）选择器
选择到紧贴li标签后的一个a标签，注意！必须是紧挨着，中间隔了其他标签就不行
li+a 相邻选择器
选中li标签后的所有兄弟级别的a标签
li~a 兄弟选择器
高级选择器
具有attr属性的E元素
E[attr]
具有attr属性且属性等于val的元素
E[attr=\"val\"]
查询属性值以val开头的E标签
E[attr^=\"val\"]
查询属性值以val结尾的E标签
E[attr$=\"val\"]
查询属性值包含val的E标签
E[attr*=\"val\"]
属性选择器
a标签在未访问是的样式
E:link
a标签在访问过后的样式
E:visited
a标签在鼠标悬停的时候样式
E:hover
a标签在访问时的样式（鼠标点击与释放之间）
E:active
伪类选择器
设置在对象前发生的内容，必须定义content属性
E:before
设置在对象后发生的内容，必须定义content属性
E:after
伪元素选择器
行内样式1000>ID选择器100>类选择器10>标签选择器1
选择器的权重
组合选择器
选中ul的所有儿子，判断第一个儿子是否为li，如果是就选中，如果不是，就不选中
ul>li:first-child
1： 选中我所有的类型为li的子标签 2： 选中第一个标签
ul>li:first-of-type
伪类选择器进阶
选择器
设置标签的宽度
width
设置标签的高度
height
设置边框的线宽
border-width
solid: 实线
dashed: 虚线
dotted： 圆点虚线
double: 双横线
设置边框线的种类
border-style
设置边框颜色
border-color
border-radius:50%;
设置边框圆形
border-radius
border边框
内容区域(content)到边框(border)的距离
padding 内边框
注意margin塌陷问题
margin 外边距
对标签设置的宽度和高度只包括内容部分
content-box
对标签设置的宽度和高度包括边框
border-box
box-sizing
盒模型
设置对象背景颜色
background-color
设置背景图片background-image:url(img/tp1.jpg);
background-image
repeat-x： 背景图像在横向上平铺 repeat-y： 背景图像在纵向上平铺 repeat： 背景图像在横向和纵向平铺 no-repeat： 背景图像不平铺
background-repeat
center： 背景图像横向和纵向居中。left： 背景图像在横向上填充从左边开始。right： 背景图像在横向上填充从右边开始。top： 背景图像在纵向上填充从顶部开始。bottom： 背景图像在纵向上填充从底部开始。
background-position
fixed： 背景图像相对于窗体固定。
background-attachment
复合属性，设置对象的背景[ background-color ]： 指定对象的背景颜色。 [ background-image ]： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像” [ background-repeat ]： 指定对象的背景图像如何铺排填充。 [ background-attachment ]： 指定对象的背景图像是随对象内容滚动还是固定的。 [ background-position ]： 指定对象的背景图像位置。
background
背景：background
normail 正常字体
italic 斜体字体
指定文本样式
font-style
normal 正常字体 400
bold 粗体 700
bolder 更粗
指定文本字体的粗细
font-weight
指定字体的大小
单位像素
font-size
指定字体
font-family
复合属性如果使用这些属性的话必须按照font-style font-weight font-size font-family其中font-size和font-family不能省略
font复合属性
字体font
设置字体颜色
color: red
颜色 color
left 左对齐
center 居中
right 右对齐
justify 两端对齐
text-align
none 文字无装饰
underline 下划线
overline 上划线
line-through 删除线
text-decoration
设置行高=盒子的高度即垂直居中
line-height
文本的缩进
单位：像素/百分比
text-indent
文本 text
float:left
float:right
浮动效果
浮动产生的问题
脱离标准流，飘起来了。、
浮动的元素脱标
浮动的元素互相贴靠
浮动的元素字围效果
收缩的效果
浮动的特性
浮动
将内联标签设置为块级标签
display:block
将块级标签设置为内联标签
display:inline
设置成内联块级标签，在一行内显示又可以设置长宽
display:inline-block
隐藏标签
display:none
visibility:hidden
display
circle 空心圆
none 无样式
square 正方形
lower-lation 英文abc
列表样式
list-style
列表 ul ol
控制相邻单元格的边框
表示相邻边框合并在一起
border-collapse:collapse;
border-collapse
表格
告诉浏览器帮我们进行定位
static
相对定位：1：相对于自己原来的位置进行定位 2： 当标签移动之后原来的位置会保留，别的标签不能占用，会留白
relative
如果他的祖先中设置了定位，则相对于设置了定位的那个祖先标签进行定位，如果所有的祖先标签都没有设置定位，则相对于屏幕的最上角进行定位，完全脱离文档流，不会留白
绝对定位
absolute
fixed
position
left
top
right
bottom
z-index
定位
鼠标在该标签上显示为小手
cursor: pointer;
li { cursor: pointer; }
案例
鼠标样式：cursor
去掉输入框的默认的蓝色边框
outline: none;或者 outline: 0;
轮廓线：outline
设置文本域右下角不能拖拽
textarea{ resize: none; }
防止拖拽文本域：resize
经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
它只针对于行内元素或者行内块元素有效
该标签要添加到子标签中，最多的是用在图片上
使用场景
vertical-align : baseline | top | middle | bottom
图片
基线解释图片
基线对齐，默认，元素放置在父标签的基线上
baseline
把元素的顶端和行中最高元素的顶端对齐
把元素放置在父元素的中部
middle
把图片底部和四线三格的底部对齐
值解析
语法
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。
设置图片垂直居中
图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
原因
缺点：文字不能显示
1：父标签的字体大小设置为0 ，font-size:0px;
2：给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
3：.把图片转换为块级元素 display: block;
解决办法
解决图片底部默认空白缝隙问题
vertical-align
如何处理元素内的空白符，也就是当文字的长度超过标签的宽度，超过的内容以单词为单位进行处理（换行，隐藏，不换行....）
注意：英文的单词和数字是以空格进行区分，汉字不用空格进行区分，每个汉字就是一个单词
normal 连续的空白符会被合并，换行符会被当作空白符来处理，文本超过宽度自动换行
nowrap 连续的空白符会被合并，换行符会被当作空白符来处理，文本超过宽度不进行换行
值
如何处理元素内的空白符：white-space
visible\t默认值。内容不会被修剪，会呈现在元素框之外。hidden\t内容会被修剪，并且其余内容是不可见的。scroll\t内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto\t如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
超出部分处理方式：overflow
它规定了当文本溢出其包含元素时以何种方式显示
注意：这个属性只能在设置了white-space:nowrap; 和 overflow: hidden; 时才能起作用，因为文本换行或者父标签允许超出，文本就没有溢出的概念
clip：默认值，将溢出的文本裁减掉ellipsis：将溢出的文本用省略号(...)来表示
文本溢出时给用户什么样式的提示：text-overflow
其他属性
设置圆角
像素
百分比
单位
border-radius:5px;
设置圆角半径分别是宽度和高度的50%
border-radius:10px / 20px;
分别设置左上，右上，左下，右下角的x轴和y轴的圆角半径
border-radius: 10px 20px 30px 40px; / 5px 10px 20px 30px;
圆角：border-radius
为标签盒子添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
设置多层阴影
必须，设置阴影的水平位置，允许负值
h-shadow
必须，设置阴影的垂直位置，允许负值
v-shadow
可选，设置阴影的模糊距离，距离越大，越模糊
blur
设置阴影的大小
spread
可选，设置阴影的颜色
color
设置内阴影，如果想要设置外阴影，这个值省略就行。
inset
说明
案例样板
教学案例
盒子阴影：box-shadow
为标签盒子添加文本阴影
可以设置单词阴影
text-shadow: h-shadow v-shadow blur color;
可以设置多层阴影
文本阴影：text-shadow
从左到右
to right
从上到下
to bottom
从左上到右下
to bottom right
方向
角度
direction
从上到下线性渐变
从左上角到右下角
按角度设置从上到下
重复的线性渐变
线性渐变：linear-gradient
ellipse (默认): 指定椭圆形的径向渐变。circle ：指定圆形的径向渐变
shape
定义渐变的大小，可能值：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
size
定义渐变的位置。可能值：center（默认）：设置中间为径向渐变圆心的纵坐标值。top：设置顶部为径向渐变圆心的纵坐标值。bottom：设置底部为径向渐变圆心的纵坐标值。
径向渐变：radial-gradient()
过度的意思就是把一个标签的某个属性或者多个属性从一个值在一个设定的时间变化到另一个值，从而实现动画的效果
设置哪个css属性具有过度效果
none\t没有属性会获得过渡效果。all\t所有属性都将获得过渡效果。property\t定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-property
规定完成过渡效果需要多少秒或毫秒
规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。
transition-duration
规定速度效果的速度曲线
transition-timing-function
设置过度的延迟时间，也就是过渡效果何时开始，值以秒或毫秒计
transition-delay
复合属性
transition: property duration timing-function delay;
transition
过度：transition
绝对居中
位置变幻：translate
缩放变幻：scale
旋转变幻：rotate
倾斜变幻：skew
变幻：transform
@keyframe
@keyframes mymove{ from {top:0px;} to {top:200px;}}
@keyframes mymove{0% {top:0px;}25% {top:200px;}50% {top:100px;}75% {top:200px;}100% {top:0px;}}
定义动画
animation: name duration timing-function delay iteration-count direction;
animation-name\t指定要绑定到选择器的关键帧的名称animation-duration\t动画指定需要多少秒或毫秒完成animation-timing-function\t设置动画将如何完成一个周期animation-delay\t设置动画在启动前的延迟间隔。animation-iteration-count\t定义动画的播放次数。animation-direction\t指定是否应该轮流反向播放动画。
animation-timing-function
n 表示播放次数
infinite 规定动画应该无限次播放
animation-iteration-count
调用动画
动画
css3
兼容性好
布局繁琐
不能在移动端很好布局
传统布局
布局简单，移动端布局应用广泛
pc端浏览器兼容性不太好，IE11或更低版本不支持或仅部分支持
flex弹性布局
与传统布局比较
设置标签为伸缩盒子
display:flex
默认值，主轴方向为x轴
row
将主轴方向设置为y轴
column
主轴为x轴，翻转
row-reverse
主轴为y轴，翻转
column-reverse
在主轴上的默认长度为 0
在侧轴上的默认长度为100%
伸缩盒子的子标签的特点
flex-direction
设置子标签在主轴方向上的排列方式，就是左对齐，右对齐，居中，两端对齐之类的
左对齐
flex-start
flex-end
center
环绕对齐
space-around
两端对齐
space-between
justify-content
子标签是否换行，默认是不换行，也就是子标签宽度之和如果超过父标签的宽度，则子标签进行等比例收缩
默认值，不换行
nowrap
换行显示
wrap
换行，并且翻转，子标签在父标签底部显示，换行的子标签在上面
wrap-reverse
flex-wrap
设置侧轴子元素的排列方式
侧轴开始对齐
侧轴结尾对齐
侧轴居中对齐
侧轴拉伸，默认值
stretch
如果设置了这个属性，则侧轴的长度就不再是100%，而是0
align-tiems只能在子盒子是单行时有效，如果子盒子有多行则改属性无效
该属性不能和align-content一起使用
注意
align-items
设置侧轴上子元素的排列方式，并且只能用于子盒子出现换行时（多行），在单行时无效
可以设置子标签的上对齐，下对齐，居中，拉伸及平均分配剩余空间等属性值
从侧轴的头部头部开始排列
从侧轴尾部开始排列
侧轴环绕对齐，
space-arount
侧轴两端对齐
侧轴拉伸，子标签平分父标签的高度或者宽度
注意：这个属性只能在没有在在侧轴上没有设置固定的宽度或者高度时才会生效，
align-content
复合属性，是flex-direction和flex-wrap属性的复合属性，可以同时设置主轴的方向和是否换行
按行显示，换行
flex-flow: row wrap;
flex-flow
父标签属性设置
数字+单位
flex-basis:200px
flex-basis
用于设置伸缩盒子的扩展比率，该属性的值是数字，不要添加单位
数字，默认值是0，也就是不会进行扩展
子标签按比例进行扩展
flex-grow
设置伸缩盒子的收缩比例，该属性的值是数字，不要添加单位
数字，默认值是1，也就是如果子标签宽度之和超过父标签的宽度，标签会自动收缩
flex-shrink
复合属性，是flex-basis，flex-grow，flex-shrink的复合属性，不需要的可以不写
flex: flex-grow flex-shrink flex-basis
自动扩展和收缩，默认宽度是100px
1 1 100px
可以自动扩展和收缩，这种才是最常用的
1
注意：如果一个子标签设置了flex，就不要再给这个标签设置width这个属性了，不起作用，因为：flex: 1;相当于 flex : 1 1 0px;相当于flex-basis的值设为了0 ，就会覆盖width属性的值
flex
子标签属性设置
伸缩盒子Flex布局
颜色是由红绿蓝三种颜色组成，每种颜色由一个字节进行表示
颜色
相对单位，相对于父标签的font-size的单位，如果父标签的单位是16px，则1em表示的就是 16px
em
也是相对单位，相对于html标签的font-size的单位，跟父标签无关，这个用的比较多
rem
vw
vh
在css中设置的单位
开发像素
物理像素点知道是屏幕显示的最小颗粒，是物理真实存在的。这是厂商储藏室就设置好了，比如苹果6/7/8是750*1334
我们开发的时候设置的 1px 不是一定等于 1个物理像素的
pc端页面，1个px等于1个物理像素的，但是移动端就不尽相同
物理像素
1开发像素 = 2物理像素
2倍屏
图片是设置的开发像素的2倍
2倍图
用来规定显示器或者其他设备在屏幕尺寸发生变化时，执行的css样式也不一样
@media not | only mediatype and (media feature) {}
表示所有设备
all
表示打印机和打印预览
print
表示电脑屏幕，平板电脑，智能手机等
screen
mediatype: 媒体类型
表示在手机或电脑屏幕大于或者等于300px时，执行哪些css
@media screen and (min-width=300px) {}
逻辑与，用来连接设备类型和媒体特性，或者链接多个媒体特性相当于“且”的意思，表示某个设备类型在某个尺寸范围下执行的css语法
and
如 ： @media not print
表示排除某些特定的媒体类型
not
如： @media only screen 等同于 @media screen
用来指定某种特定的媒体类型，可以省略
only
关键字
说明: 媒体特性必须包含在 小括号中
宽度
最小宽度
min-width
最大宽度
max-width
媒体特性：(media feature)
说明：
语法规范
@media only screen and (min-width: 640px) { html { font-size: 32px; background: #8cbc8b; } body { width: 640px; margin: 0 auto; } }@media only screen and (min-width: 620px) and (max-width: 640px) { html { font-size: 32px; } }@media only screen and (min-width: 600px) and (max-width: 620px) { html { font-size: 31px; } }@media only screen and (min-width: 580px) and (max-width: 600px) { html { font-size: 30px; } }@media only screen and (min-width: 560px) and (max-width: 580px) { html { font-size: 29px; } }@media only screen and (min-width: 540px) and (max-width: 560px) { html { font-size: 28px; } }@media only screen and (min-width: 520px) and (max-width: 540px) { html { font-size: 27px; } }@media only screen and (min-width: 500px) and (max-width: 520px) { html { font-size: 26px; } }@media only screen and (min-width: 480px) and (max-width: 500px) { html { font-size: 25px; } }@media only screen and (min-width: 460px) and (max-width: 480px) { html { font-size: 24px; } }@media only screen and (min-width: 440px) and (max-width: 460px) { html { font-size: 23px; } }@media only screen and (min-width: 430px) and (max-width: 440px) { html { font-size: 22px; } }@media only screen and (min-width: 420px) and (max-width: 430px) { html { font-size: 21.5px; } }@media only screen and (min-width: 410px) and (max-width: 420px) { html { font-size: 21px; } }@media only screen and (min-width: 400px) and (max-width: 410px) { html { font-size: 20.5px; } }@media only screen and (min-width: 380px) and (max-width: 400px) { html { font-size: 20px; } }@media only screen and (min-width: 360px) and (max-width: 380px) { html { font-size: 19px; } }@media only screen and (min-width: 340px) and (max-width: 360px) { html { font-size: 18px; } }@media only screen and (min-width: 320px) and (max-width: 340px) { html { font-size: 17px; } }@media only screen and (min-width: 300px) and (max-width: 320px) { html { font-size: 16px; } }@media only screen and (max-width: 300px) { html { font-size: 15px; } }
1： 假设屏幕的最大尺寸是 750px
3: 将html 标签的font-size设置成 50px，按照这个尺寸作为1rem
媒体查询和rem在实际开发中的响应式布局原理
媒体查询
body { --foo: #7F583F; --bar: #F7EFD2;}
body选择器里面声明了两个变量：--foo和--bar
声明变量的时候，变量名前面要加两根连词线（--）
它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做\"CSS 自定义属性\"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。
为什么选择两根连词线（--）表示变量？原来css没有变量的概念，所以后来出现了一些css的框架帮我们解决这个问题，非常出名的两个就是Sass和less，因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。
不能包含特殊字符
不能以数字开头
变量大小写敏感，--header-color和--Header-Color是两个不同变量
变量的命名规范
变量的声明
a { color: var(--foo); text-decoration-color: var(--bar);}
通过var() 函数读取变量的值
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
:root { --primary-color: red; --logo-text: var(--primary-color);}
var()函数还可以用在变量的声明。
变量--side用作属性名，这是无效的。
.foo { --side: margin-top; /* 无效 */ var(--side): 20px;}
注意，变量值只能用作属性值，不能用作属性名。
变量的调用：var()函数
--bar: 'hello';--foo: var(--bar)' world';
body:after { content: '--screen-category : 'var(--screen-category);}
如果变量值是一个字符串，可以与其他字符串拼接
数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。
.foo { --gap: 20; /* 无效 */ margin-top: var(--gap)px;}
.foo { --gap: 20; margin-top: calc(var(--gap) * 1px);}
如果变量值是数值，不能与数值单位直接连用
/* 无效 */.foo { --foo: '20px'; font-size: var(--foo);}/* 有效 */.foo { --foo: 20px; font-size: var(--foo);}
如果变量值带有单位，就不能写成字符串
变量的类型
三个选择器都声明了--color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。
<style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); }</style><p>蓝色</p><div>绿色</div><div id=\"alert\">红色</div>
同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的\"层叠\"（cascade）规则是一致的。
变量--foo的作用域是body选择器的生效范围，--bar的作用域是.content选择器的生效范围
body { --foo: #7F583F;}.content { --bar: #F7EFD2;}
变量的作用域就是它所在的选择器的有效范围。
全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们
变量的作用域
CSS是动态的，页面的任何变化，都会导致采用的规则变化，利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值
body { --primary: #7F583F; --secondary: #F7EFD2;}a { color: var(--primary); text-decoration-color: var(--secondary);}@media screen and (min-width: 768px) { body { --primary: #F7EFD2; --secondary: #7F583F; }}
响应式布局
变量
过滤：filter
-webkit-tap-highlight-color: transparent;
去除超链接或者一些其他标签的点击高亮效果
-webkit-appearance: none;
给移动端浏览器设置自定义input输入框样式需要加入该属性
禁止长按页面时弹出菜单
移动端特殊样式解决方案（一般用不到）
overflow:hidden; 超出部分隐藏white-space:nowrap; 超过宽度不换行text-overflow:ellipsis; 文本超出后显示省略符 ...
当文字超出标签宽度显示 ...
扩展
css属性
CSS
number
string
boolean
undefined
Object
Function
数据类型
=
+=
-=
赋值运算
加法
+
减法
-
乘法
*
除法
/
取余
%
自增
++
自减
--
算数运算
等于
==
等同于（值和类型都相等）
===
不等于
!=
不等同于（值和类型有一个不相等，或者都不相等）
!==
>
<
>=
<=
比较运算
运算符
String()
toString()
将数字转换成字符串
Number()
解析成数字
parseInt()
parseFloat()
将字符串转换成数字
数据类型转换
if-else
&& 需要两个条件都符合
|| 只需要有一个符合即可
&& ||
switch
1、初始化循环变量
2、判断循环条件
3、更新循环变量
while
for
流程控制
把几个数组合并
concat()
将数组用指定字符串连接起来
join()
移除数组最后一个元素
pop()
移除数组第一个元素
shift()
数组开头添加一个元素
unshift()
类似于切片
向数组最后追求一个元素
push()
将数组反转
reverse()
对数组排序
sort
判断是否为数组
Array.isArray(数组对象)
是一个静态方法，通过类名.isArray() 的方式进行调用
isArray()
Arry 数组
返回指定索引位置的字符
chartAt(index)
字符串拼接
替换字符串a和b
返回字符串的索引，没有字符串就返回-1
indexof()
切片
split(\"a\
转小写
toLowerCase()
转大写
toUpperCase()
String 字符串
getDate()
Date()
Date
向上取整
Math.ceil()
向下取整
Math.floor
取最大值
取最小值
取随机数
Math.random()
Math
function
对象
数组
类型
JSON.parse()
JSON.stringify()
序列化、反序列化
json
常用内置对象
ECMAscript5基础语法
Document Object Model
文档对象模型
定义了访问和操作html文档的标准方法
什么是HTML DOM
整个文档
文档节点 document
每个html标签
元素节点 element
html属性
属性节点 attribute
html元素中的文本
文本节点 text
节点类型
document.getElementById('idname')
按ID查找
得到一个符合条件的数组
document.getElementsByClassName('classname')
按类名查找
document.getElementByTagName('tagname')
按标签查找
直接查找节点
父节点标签元素
parentElement
所有子标签
children
第一个子标签元素
firstElementChildren
最后一个子标签元素
lastElementChildren
下一个兄弟标签元素
nextElementSibling
上一个兄弟标签元素
previousElementSibling
导航查找(通过一个标签的位置去查找另一个标签)
节点查找
例子：var tag=document.createElement(“input\")
document.createElement(标签名)
创造节点
父节点.appendChild(子标签)
插入到目标标签前面
添加节点
父节点.removeChild
删除节点
替换节点
节点操作
innerText
innerHTML
input
select
textarea
value
文本节点值的操作
设置属性
查询属性
elementNode.getAttribute(属性名)
删除属性
elementNode.removeAttribute(“属性名”);
节点属性的操作
查询类名
elementNode.className
增加类名
elementNode.classList.add('增加的类名')
elementNode.classList.remove('增加的类名')
节点类名的操作
elementNode.style.color=\"blue\";
节点样式操作
鼠标点击
onclick
鼠标双击
ondblclick
鼠标聚焦
onfocus
鼠标失去聚焦
onblur
区域内容被改变(表单元素)
onchange
键盘被按下
onkeydown
键盘按下并松开
onkeypress
键盘松开
onkeyup
页面或图片加载完成
onload
鼠标悬停
onmouseover
鼠标离开
onmouseout
表单提交事件
onsubmit
节点事件
DOM节点
DOM
window.localtion
window.reload()
window.open()
BOM
概述
版本
使用JQuery
$符号
初识JQuery
id选择器
class选择器
练习题
包含选择器
父子选择器
层级选择器
过滤器（Filter）
表单相关选择器
查找子标签（find()）
查找父标签（parent()、parents()）
查找兄弟元素（next()、prev()）
过滤（filter()）
查找和过滤
html标签中能看到的属性，显示的属性
attr
标签的DOM对象中的属性，隐式的属性
prop
文本操作
显示和隐藏DOM
修改CSS
属性操作
添加DOM
操作DOM对象
事件
详情
common--css
省市县--JS
商品管理
购物车全选
碎块
菜单
后台框架
省市县级联
JQuery案例
cankaoshouce
jquery
JS库和框架
获取DOM节点
获取子节点
获取父节点
获取兄弟节点
获取和改变 HTML 文本
获取和修改属性
获取和修改CSS样式
创建节点
复制节点
Form表单
DOM节点导航
01-案例在末尾添加节点
02-Node的属性
操作dom树
全选练习
省市县联动
DOM案例
向元素添加事件监听
javascript
js参考
JavaScript检测浏览器是否支持 CSS 变量
JavaScript 操作 CSS 变量
JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量
--foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。这意味着，可以把样式设置写在 CSS 变量中，让 JavaScript 读取
--foo: if(x > 5) this.width = 10;
对 CSS 无用的信息，也可以放入 CSS 变量
js操作css变量
前端
职业：暂无
0 条评论
回复 删除
下一页
