html：
css:
1.什么是css？
- css指层叠样式表
- css定义如何显示html元素
- 样式通常存储在样式表中
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在css文件
- 多个样式定义可以层叠为一
2.css三种设置样式
- 行内样式法（用的很少）：在行内标签里面添加style属性
- 内部样式表法（写在head里面，添加style属性）
- 外部样式表法（需要一个link标签 ）
3.选择器（在列表中选择指定元素）
1.统一表达式： 选择器{ 样式:值; }
优先级（权重值）：id选择器（100）>class选择器（10）>类选择器（1）
- 标签选择器（直接找到对应标签名，统一设置一组标签样式）
- id选择器（#+id名称）
- class选择器 [又名类选择器]（.+class名称）
基础背景属性
- 背景颜色background-color
- 直接定义法（用英语单词）
- 16进制定义法:#****** 0-f
- 三原色定义法:rgb(*,*,*) 0-255
- 背景图background-image :url();url后面跟图片的相对路径
- 背景图重复方式（默认是平铺）background-repeat:no-repeat;(改为不重复)
- 背景图位置 (水平位置) (垂直位置)background-position:垂直 水;平或者写两个像素值 ;
边框属性
- 宽度
- 线性
- solid实线
- dashed虚线
- datted点划线
- 边框颜色
4.盒模型
盒模型：一个元素实际在网页中所占位置大小
宽度=width+border-width+padding+margin
高度=hight+border-hight+padding+maigin
基本表格属性
- 边框重合border-collaps(边框合并)
5.列表属性
- 列表符号类型list-style-type:circle squire:
- 将列表符号改成图片list-style-image:url(路径);
- 列表符号位置（了解即可，没什么用）
6.内填充和外边距
- 内填充
padding:多少px内填充。元素(盒子)和内容之间距离;
- 外边距
margin多少px外边距,元素和元素（盒子）之间距离;
元素水平居中:margin:0 auto
7.定位属性
- 相对定位position:relative;根据自己的初始定位定位,依然占据原位置。
- top 把元素向上推
- right 把元素向右推
- bottom 把元素向下推
- left 把元素向左推
- 绝对定位position:absolute; 需要找父级
- top 把元素向上推
- right 把元素向右推
- bottom 把元素向下推
- left 把元素向左推
- 固定定位position:fixed;
- top 相对界面上侧距离
- right 相对界面右侧距离
- bottom 相对界面下侧距离
- left 相对界面左侧距离
浮动属性
浮动作用：块元素并排显示，想让谁并排就给谁添加浮动
给两个div选择器中加两个float:left;就能实现并排
注意注意！添加浮动后，元素不占位置！！！
8.高级选择器
- 通用选择器
解释:“*”号选择器是通用选择器，功能是匹配所有 html 元素的选择器包括和标签
- 分组选择器
p,span {color: red;}解释:将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 D选择器、类选择器、属性选择器混合使用。
- 后代选择器
p span {color: red}解释:选择
元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。
- 子选择器
ul>ln{}解释:子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再继续向下选择。
- 相邻兄弟选择器
p +h1{color: red;}解释:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。
- 普通兄弟选择器
p-h1{color:red;}解释:普通兄弟选择器匹配和第一个元素后面的所有元素
9.文本基本属性
- color颜色
- front-size字号
- front-family字体
- font-weight加粗
- font-style倾斜
1.字号大小font-size50px
解释:设置文本的大小。
2字族(字体)font-family:”黑体”解释:使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几 个后备字体
3.字体加粗font-weight: bold;
解释:设置字体是否加粗。
4.字体倾斜 font-stvle:italic
解释:设置字体是否倾斜:
1.text-decoration解释:设置文本出现装饰线。underline下划线 overline上划线line-through 删除划线 none取消装饰线
2.text-transform解释:设置英文文本转换为大小写。uppercase 全部转化为大写lowercase 全部转化为小写 capitalize首字母大写3text-align
解释:指定文本的对齐方式。left向左对其 center居中对齐right 向右对齐 justify内容两段对齐，适用于多行文字
4.text-indent
解释:设置文本首行的缩进。多少px
5.letter-spacing
解释:设置字母之间的间距。 多少px
6.word-spacing解释o设置文本之间的间距。多少px
10.元素转化
1display: block 块元素
2.display:inline 行元素
3.display:none隐藏元素
4.display:inline-block 行级块元素
动画效果
transition-property：设置元素中参与过渡的属性；
transition-duration：设置元素过渡的持续时间；
transition-timing-function：设置元素过渡的动画类型；
transition-delay：设置过渡效果延迟的时间，默认为 0；
transition：简写属性，用于同时设置上面的四个过渡属性
动画中常见函数
1.rotate：
rotate(angle)定义2D旋转
rotateX(angle) x 轴 横向移动
rotateY(angle) y 轴 竖向移动
rotateZ(angle) 双向移动
rotate3d(angle)定义3d旋转
rotate3d(1, 0, 1, -180deg);顺时针旋转消失 --加上deg
2 .translate：
translate（）相当于水平平移，+ 表示向右/下，- 表示向左/上
translateX（x）水平方向平移
translateY（y）垂直方向平移
translateZ（z）相当于放大
translate（x,y）相当于水平平移+垂直平移
translate（x,y,z）相当于水平平移+垂直平移+放大 --加上px
3.scale效果图
scale(数值)定义倍数缩放，
scaleX()通过x轴定义，仅水平方向缩放
scaleY()通过y轴定义，仅垂直方向缩放
scaleZ()通过z轴定义，定义3d缩放
(transform)常用属性
transform-origin: 0 0;设置变形的原点 默认值(center)
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css知识点汇总 </title>
<style>
.box{
width: 30px;
height: 30px;
/* 背景颜色 */
background-color:rgb(255, 2, 2);;
}
.box1{
width: 30px;
height: 30px;
border-width: 2px;
border-style: solid;
border-color: rgb(179, 0, 255);
}
</style>
</head>
<body>
<h3>1.什么是css？</h3>
<ol>
<li>css指层叠样式表</li>
<li>css定义如何显示html元素</li>
<li>样式通常存储在样式表中</li>
<li>外部样式表可以极大提高工作效率</li>
<li>外部样式表通常存储在css文件</li>
<li>多个样式定义可以层叠为一</li>
</ol>
<h3>2.css三种设置样式</h3>
<ol>
<li>行内样式法（用的很少）：在行内标签里面添加style属性</li>
<li>内部样式表法（写在head里面，添加style属性）</li>
<li>外部样式表法（需要一个link标签 ）</li>
</ol>
<h3>3.选择器（在列表中选择指定元素）</h3>
<h4>1.统一表达式：
选择器{
样式:值;
}
</h4>
<ol>
<li>标签选择器（直接找到对应标签名，统一设置一组标签样式）</li>
<li>id选择器（#+id名称）</li>
<li>class选择器 [又名类选择器]（.+class名称）</li>
<p>优先级（权重值）：<u>id选择器（100）>class选择器（10）>类选择器（1）</u></p>
</ol>
<h4>基础背景属性</h4>
<ol>
<li>背景颜色<b>background-color</b><ol>
<li>直接定义法（用英语单词）</li>
<li>16进制定义法:#****** 0-f</li>
<li>三原色定义法:rgb(*,*,*) 0-255</li>
</ol></li>
<li>背景图<b>background-image :url();</b>url后面跟图片的相对路径</li>
<li>背景图重复方式（默认是平铺）<b>background-repeat:no-repeat;(改为不重复)</b></li>
<li>背景图位置 (水平位置) (垂直位置)<b>background-position:垂直 水;平或者写两个像素值 ;</b></li>
<div class="box"></div>
</ol>
<h4>边框属性</h4>
<ol>
<li>宽度</li>
<li>线性
<ol>
<li>solid实线</li>
<li>dashed虚线</li>
<li>datted点划线</li>
</ol>
</li>
<li>边框颜色</li>
</ol>
<div class="box1"></div>
<h3>4.盒模型</h3>
<p>盒模型：一个元素实际在网页中所占位置大小</p>
<p>宽度=width+border-width+padding+margin</p>
<p>高度=hight+border-hight+padding+maigin</p>
<h3>基本表格属性</h3>
<ol>
<li>边框重合<b>border-collaps(边框合并)</b></li>
</ol>
<h3>5.列表属性</h3>
<ol>
<li>列表符号类型<b>list-style-type:circle squire:</b></li>
<li>将列表符号改成图片<b>list-style-image:url(路径);</b></li>
<li>列表符号位置（了解即可，没什么用）</li>
</ol>
<h3>6.内填充和外边距</h3>
<ol>
<li>内填充<p>padding:多少px内填充。元素(盒子)和内容之间距离;</p></li>
<li>外边距<p>margin多少px外边距,元素和元素（盒子）之间距离;</p><b>元素水平居中:margin:0 auto</b></li>
</ol>
<h3>7.定位属性</h3>
<ol>
<li>相对定位<b>position:relative;</b>根据自己的初始定位定位,依然占据原位置。
<ul>
<li>top <b>把元素向上推</b></li>
<li>right <b>把元素向右推</b></li>
<li>bottom <b>把元素向下推</b></li>
<li>left <b>把元素向左推</b></li>
</ul></li>
<li>绝对定位<b>position:absolute; 需要找父级</b>
<ul>
<li>top <b>把元素向上推</b></li>
<li>right <b>把元素向右推</b></li>
<li>bottom <b>把元素向下推</b></li>
<li>left <b>把元素向左推</b></li>
</ul></li>
<li>固定定位<b>position:fixed;</b></li>
<ul>
<li>top <b>相对界面上侧距离</b></li>
<li>right <b>相对界面右侧距离</b></li>
<li>bottom <b>相对界面下侧距离</b></li>
<li>left <b>相对界面左侧距离</b></li>
</ul></li>
</ol>
<h3>浮动属性</h3>
<p>浮动作用：块元素并排显示，想让谁并排就给谁添加浮动</p>
<p>给两个div选择器中加两个float:left;就能实现并排</p>
<p>注意注意！添加浮动后，元素不占位置！！！</p>
<h3>8.高级选择器</h3>
<ul>
<li>通用选择器
<p>解释:“*”号选择器是通用选择器，功能是匹配所有 html 元素的选择器包括<html>和<body>标签</p>
</li>
<li>分组选择器
<p><p>p,span {color: red;}解释:将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 D选择器、类选择器、属性选择器混合使用。</p>
</li>
<li>后代选择器
<p>p span {color: red}解释:选择<p>元素内部所有<span>元素。不在乎<b>的层次深度。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。</p>
</li>
<li>子选择器
<p>ul>ln{}解释:子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再继续向下选择。</p>
</li>
<li>相邻兄弟选择器
<p>p +h1{color: red;}解释:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。</p>
</li>
<li>普通兄弟选择器
<p>p-h1{color:red;}解释:普通兄弟选择器匹配和第一个元素后面的所有元素</p>
</li>
</ul>
<h3>9.文本基本属性</h3>
<ul>
<li>color<b>颜色</b></li>
<li>front-size<b>字号</b></li>
<li>front-family<b>字体</b></li>
<li>font-weight<b>加粗</b></li>
<li>font-style<b>倾斜</b></li>
</ul>
<p>1.字号大小font-size50px <br>
解释:设置文本的大小。<br>
2字族(字体)font-family:”黑体”解释:使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几
个后备字体<br>
3.字体加粗font-weight: bold;<br>
解释:设置字体是否加粗。<br>
4.字体倾斜 font-stvle:italic<br>
解释:设置字体是否倾斜:<br>
1.text-decoration解释:设置文本出现装饰线。underline下划线 overline上划线line-through 删除划线 none取消装饰线<br>
2.text-transform解释:设置英文文本转换为大小写。uppercase 全部转化为大写lowercase 全部转化为小写 capitalize首字母大写3text-align<br>
解释:指定文本的对齐方式。left向左对其 center居中对齐right 向右对齐 justify内容两段对齐，适用于多行文字<br>
4.text-indent<br>
解释:设置文本首行的缩进。多少px<br>
5.letter-spacing<br>
解释:设置字母之间的间距。 多少px<br>
6.word-spacing解释o设置文本之间的间距。多少px</p>
<h3>10.元素转化</h3>
<p> 1display: block 块元素<br>
2.display:inline 行元素<br>
3.display:none隐藏元素<br>
4.display:inline-block 行级块元素</p>
<h3>动画效果</h3>
<p>transition-property：设置元素中参与过渡的属性；<br>
transition-duration：设置元素过渡的持续时间；<br>
transition-timing-function：设置元素过渡的动画类型；<br>
transition-delay：设置过渡效果延迟的时间，默认为 0；<br>
transition：简写属性，用于同时设置上面的四个过渡属性</p>
<h3>动画中常见函数</h3>
<p>
1.rotate：<br>
rotate(angle)定义2D旋转<br>
rotateX(angle) x 轴 横向移动<br>
rotateY(angle) y 轴 竖向移动<br>
rotateZ(angle) 双向移动<br>
rotate3d(angle)定义3d旋转<br>
rotate3d(1, 0, 1, -180deg);顺时针旋转消失 --加上deg <br>
2 .translate：<br>
translate（）相当于水平平移，+ 表示向右/下，- 表示向左/上<br>
translateX（x）水平方向平移<br>
translateY（y）垂直方向平移<br>
translateZ（z）相当于放大<br>
translate（x,y）相当于水平平移+垂直平移<br>
translate（x,y,z）相当于水平平移+垂直平移+放大 --加上px <br>
3.scale效果图<br>
scale(数值)定义倍数缩放，<br>
scaleX()通过x轴定义，仅水平方向缩放<br>
scaleY()通过y轴定义，仅垂直方向缩放<br>
scaleZ()通过z轴定义，定义3d缩放<br>
(transform)常用属性<br>
transform-origin: 0 0;设置变形的原点 默认值(center) <br>
</p>
</body>
</html>
882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
