You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 KiB
52 KiB
HTML5+CSS3
前序：我的发现
1 蒙版文字
/* 让文字显示背景的颜色*/
*{
background-image: -webkit-gradient(linear,0 0,0 bottom, from(#e9f8ea), to(#88d78d));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
章节一 webstorm安装与设置
优点：自动补全
章节二 HTML基础元素
1 标题标签<h1></h1>
作用：设置标题
<h1 align="center">一号标题</h1>
<h2 align="right">二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
2 段落标记<p></p>
<p align="center">这是一个段落</p>
<p align="right">这是一个段落</p>
<p>这是一个段落</p>
3 强制换行<br></br>
<br/>
<!--没有任何属性-->
<!--HTML只能识别一个连续的空格-->
4 分割线<hr/>
<!--
1）作用
用来分割上下文档
2）语法
<hr/>
3）属性
color：设置水平线的颜色，取值为关键词 例如red yellow
width：设置水平线的水平方向
size：设置水平线的垂直方向
align：设置水平线的水平对齐方式，默认center，取值left、right
HTML默认单位为像素(px),当你的单位为像素时，可以省略不写
4）举个栗子
<hr color="red" width="500" size="30" align="left"/>
-->
<p>这是第一个段落</p>
<hr color="red" width="500" size="30" align="left"/>
<hr color="red" width="500" size="30" align="left"/>
<p>这是第二个段落</p>
5 图片<img/>
<!--
1）作用:引入图片
2）语法:<img/>
3）属性
src 路径 必须属性
alt 图片不能正常显示给予提示
title 鼠标选题给予提示
width 设置图片的宽度
height 设置图片的高度
****图片宽高设置其中一个属性，另外一个属性会跟着等比例缩放
图片常见格式：
jpg 不支持背景透明
jpeg 不支持背景透明
png 支持背景透明
gif 支持动图
psd ps的格式
webp
路径
1）绝对路径
①网址
②盘符
2）相对路径
①平级 直接写
②下一级 /
③上一级 ../ 上两级 ../../
HTML文件去查找目标文件
webstorm有内置的服务器
-->
<!--网址-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598957713150&di=d0a3a91236792b48d21de408fbba119e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180301%2Ffd414d28407e41d0a799cf62bde718d4.gif" alt=""/>
<!--盘符-->
<img src="C:\Users\Administrator\Desktop\img1.gif" alt="">
<!--平级-->
<img src="img2.gif" alt="">
<!--下一级-->
<img src="images/img3.gif" alt="">
<img src="images/img4.gif" alt="">
<!--上一级-->
<img src="../img5.gif" alt="">
<img src="images/img3.gif" alt="蜡笔小新" title="蜡笔小新哈哈哈哈" width="300" height="250"/>
6 超链接<a></a>
<!--
1）作用:跳转到文档或者文档中某个部分
2）语法:<a></a>
默认样式：
鼠标停在超链接上光标变为小手
默认字体颜色为蓝色
鼠标按下字体颜色为红色
点击之后字体颜色为紫色
3)属性
href 路径 必须属性
target 目标，设置打开的窗口 默认_self 原窗口打开，_blank 新窗口打开
name 锚点(跳转到具体的位置)
4）锚点
①点击a跳转到a
<a href="#名字">点击</a>
<a name="名字">挑战到</a>
注意：name属性只能写在a上
②点击a跳转到块级元素
<a href="#名字">点击</a>
<开始标记 id="名字"></结束标记>
名字命名规则：
①包含数字、字母、下划线
②不要以数字开头
③起有意义的名字
5）空链接
<a href="#"></a>
效果：返回页面顶部
-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="06图片小练习.html" target="_blank">跳转到06</a>
<a href="images/img1.gif">跳转到图片</a>
<a href="images/img3.gif">
<img src="images/img1.gif" alt="">
</a>
<br>
<!--锚点-->
<a href="#me">点击我</a>
<a href="" name="me">跳转到我</a>
<a href="06图片小练习.html#me1">跳转到06的某个位置</a>
<a href="#h1">点击我</a>
<!--空链接-->
<a href="#">返回页面顶部</a>
7 文本格式化标签
<!--
8、文本格式化标签
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<del>删除线</del>
<em>强调，倾斜显示</em>
<strong>强调，加粗显示</strong>
<sup>上标</sup>
<sub>下标</sub>
<small>小号字体</small>
<big>大号字体</big>
浏览器默认字体大小为16px，高度为21px
最小字体为12px
-->
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<del>删除线</del>
<em>强调，倾斜显示</em>
<strong>强调，加粗显示</strong>
<sup>上标</sup>
<sub>下标</sub>
2<sup>3</sup>
O<sub>2</sub>
<small>小号字体</small>
<big>大号字体</big>
8 无序列表<ul></ul>
<!--
9、无序列表
1）语法
<ul> unorder list
<li>...</li> list items
<li>...</li>
<li>...</li>
</ul>
2）ul和li的属性
type：设置项目符号的类型
disc 默认值 黑色实心圆
circle 空心圆
square 实心矩形
none 不显示
3)无序列表相互嵌套
<ul>
<li>
...
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>...</li>
<li>...</li>
</ul>
嵌套三级之后都是同样的点点
-->
9 有序列表<ol></ol>
<!--
10、有序列表
1）语法
<ol>
<li>....</li>
<li>....</li>
<li>....</li>
</ol>
2）ol和li的属性
①type：设置项目符号
1 默认
A
a
i
I
②start：设置从第几个开始数，取值number
③reversed：设置倒序
reversed="reversed" 当属性等于属性值时，简写为属性
3）相互嵌套
<ol>
<li>
...
<ol>
<li>
...
<ul>
<li>..</li>
<li>..</li>
</ul>
</li>
<li>...</li>
<li>...</li>
</ol>
</li>
<li>...</li>
<li>...</li>
</ol>
-->
10 自定义列表<dl></dl>
- 项目
- 项目的注释
- 项目的注释
- 项目的注释
- 帮助中心
- 账户管理
- 账户管理
- 账户管理
- 服务支持
- 账户管理
- 账户管理
- 账户管理
- 账户管理
- 服务支持
- 账户管理
- 账户管理
- 账户管理
- 账户管理
<dl>
<dt>项目</dt>
<dd>项目的注释</dd>
<dd>项目的注释</dd>
<dd>项目的注释</dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">账户管理</a></dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">账户管理</a></dd>
</dl>
<ul type="none">
<li>服务支持</li>
<li><a href="#">账户管理</a></li>
<li><a href="#">账户管理</a></li>
<li><a href="#">账户管理</a></li>
<li><a href="#">账户管理</a></li>
</ul>
11 表格
表格创建
<!--
1）作用
展示数据
2）特点
同行等高
同列等宽
3）标签
<table></table> 表格
<tr></tr> 行 table row
<td></td> 列、单元格 table data cell
<th></th> 特殊的单元格，内容默认水平居中且加粗
<thead></thead> 表格的头部
<tbody></tbody> 表格的身体，浏览器默认
<tfoot></tfoot> 表格的脚部
表格不设置大小，默认由内容撑开
-->
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>三行两列的表格</th>
<th>三行两列的表格</th>
</tr>
</thead>
<tbody>
<tr>
<td>三行两列的表格三行两列的表格</td>
<td>三行两列的表格三行两列的表格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>三行两列的表格</td>
<td>三行两列的表格</td>
</tr>
</tfoot>
</table>
| 三行两列的表格 | 三行两列的表格 |
|---|---|
| 三行两列的表格三行两列的表格 | 三行两列的表格三行两列的表格 |
| 三行两列的表格 | 三行两列的表格 |
table属性
<!--
table的属性
border 设置表格的边框，默认为0
width 设置表格的宽度
height 设置表格的高度
align 设置表格的水平对齐方式，默认left
cellpadding 设置内容距边框的距离
cellspacing 设置单元格之间的距离，当取值为0，边框变为一条线
bgcolor 设置背景颜色
bordercolor 设置边框颜色
background 设置背景图片，默认水平垂直平铺
-->
tr属性
<!--
height 设置一行的高度
bgcolor 设置一行的背景颜色
background 设置一行的背景图片
align 设置行里面内容的水平对齐方式，默认left，取值center、right
valign 设置行里面内容的垂直对齐方式，默认middle，取值top、bottom
-->
td属性
<!--
width 设置单元格的宽度，同列等宽
height 设置单元格的高度，同行等高
align 设置单元格内容的水平对齐方式
valign 设置单元格内容的垂直对齐方式
bgcolor 设置单元格的背景颜色
background 设置单元格的背景图片
colspan 跨列，水平合并，从左往右，写在开始的td中，取值为数值，水平合并删除同一行的td
删除的个数 = 合并的个数 - 1
rowspan 跨行，垂直合并，从上往下，写在开始的td中，取值为数值，垂直合并删除下面行的td
删除的个数 = 合并的个数 - 1
-->
章节三 表单
1 form
<!--
1、表单
1）作用
收集用户信息，提交到服务器，服务器经过一些列的处理，反馈回来，使页面具有交互性
2）标签
<form action="" name="" method="">
提交的数据
</form>
action:提交的地址
name：表单的名称
method：提交的方式，默认get，取值post
get和post的区别：
①get提交数据不安全，会在地址栏中显示；post安全
②get提交数据的大小有限制，不能大于2KB；post理论上没有限制
一个页面可以有多个表单，表单之间不可以相互嵌套
二进制：0 1
八进制：0-7
十进制：0-9
十六进制：0-9 a——f A——F
计算机底层是二进制，包含0和1，一个0或者一个1就是1位(bit)
位是计算机最小单位
1B(byte 字节) = 1b(bit 位)
1KB = 1024B
1MB = 1024KB
1GB = 1024MB
PB TB等
英文字母和数字占一个字节
汉字占两个字节
完整的表单三部分组成：
①form
②表单域 例如用户名、密码等
③表单按钮 例如登录、注册等
表单域和表单按钮可以统称为表单元素
-->
<form action="" name="form1" method="post">
</form>
2 表单元素
<!--
2、表单元素
普通文本框 <input type="text" name="表单元素的名称" value="当前值"/>
密码框 <input type="password" name="" value=""/>
单选按钮|单选框 <input type="radio" name="" value=""/> 一组单选按钮name一致
多选按钮|复选框 <input type="checkbox" name="" value=""/>
提交按钮 <input type="submit" value=""/>
重置按钮 <input type="reset" value=""/>
没有功能的按钮 <input type="button"/>
提交按钮 <button></button> 默认type="submit" 双标记之间可以写内容
重置按钮 <button type="reset"></button>
没有功能的按钮 <button type="button"></button>
-->
<form action="ok.html" name="form1">
用户名：<input type="text" name="userName" value="用户名"/>
<br>
密码：<input type="password" name="password"/>
<br>
性别：
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女
<input type="radio" name="sex" value="hemophrodite"/>人妖
<br>
爱好：
<input type="checkbox" name="hobby" value="sing">唱
<input type="checkbox" name="hobby" value="dance">跳
<input type="checkbox" name="hobby" value="rap">rap
<br>
<input type="submit" value="登录">
<input type="reset" value="取消">
<input type="button" value="没有功能的按钮">
<button>提交</button>
<button type="reset">重置</button>
<button type="button">没有功能的按钮</button>
</form>
<!--
下拉列表：
<select>
<option>...</option>
<option>...</option>
<option>...</option>
</select>
<select>
<optgroup label="组名">
<option>...</option>
<option>...</option>
<option>...</option>
</optgroup>
</select>
多行文本框：
<textarea></textarea>
提升用户体验度：<label for=""></label> for属性和id属性一致
文件：<input type="file"/> 修改表单的编码格式为二进制 enctype="multipart/form-data"
图片提交按钮：<input type="image" src=""/>
隐藏域：<input type="hidden"/> 用户不可见，携带的信息可以正常的提交到服务器
-->
<form action="ok.html" enctype="multipart/form-data">
<p>
性别：
<input type="radio" name="sex" id="man">
<label for="man">男</label>
<input type="radio" name="sex" id="woman">
<label for="woman">女</label>
</p>
<p>
爱好：
<input type="checkbox" name="hobby" value="eat" id="eat">
<label for="eat">吃</label>
<input type="checkbox" name="hobby" value="eat" id="drink">
<label for="drink">喝</label>
<input type="checkbox" name="hobby" value="eat" id="play">
<label for="play">玩</label>
<input type="checkbox" name="hobby" value="eat" id="happy">
<label for="happy">乐</label>
</p>
<p>
下拉列表：
<select name="city" id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
<option value="hb">河北</option>
<option value="sd">山东</option>
<option value="sx">山西</option>
</select>
<select name="city1" id="city1">
<optgroup label="北京">
<option value="bj">朝阳</option>
<option value="tj">大兴</option>
<option value="sh">东城</option>
</optgroup>
<optgroup label="河北">
<option value="hb">石家庄</option>
<option value="sd">唐山</option>
<option value="sx">廊坊</option>
</optgroup>
</select>
</p>
<p>
多行文本框：
<textarea name="texts" id="texts" cols="60" rows="20">你好，
</textarea>
</p>
<p>
文件：
<input type="file">
</p>
<p>
图片提价按钮：
<input type="image" src="images/img1.gif">
</p>
<p>
隐藏域：
<input type="hidden">
</p>
</form>
3 表单元素常用属性
<!--
3、表单元素常用属性
掌握：
type 表单元素的类型
name 表单元素的名称
value 当前值
checked 默认被选中,配合单选按钮和多选按钮使用
selected 默认显示,配合option使用
了解：
disabled 禁用
readonly 只读
-->
<form action="ok.html" name="form1">
<p>
姓名：<input type="text" disabled value="用户名">
</p>
<p>
密码：<input type="password" readonly>
</p>
<p>
性别：
<input type="radio" id="man" name="sex" checked value="man">
<label for="man">男</label>
<input type="radio" id="woman" name="sex" value="woman">
<label for="woman">女</label>
</p>
<p>
爱好：
<input type="checkbox" id="sing">
<label for="sing">唱</label>
<input type="checkbox" id="dance">
<label for="dance">跳</label>
<input type="checkbox" id="RAP" checked>
<label for="RAP">RAP</label>
</p>
<p>
城市：
<select name="city" id="city">
<option value="0">北京</option>
<option value="1">天津</option>
<option value="2" selected>河北</option>
</select>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
4 H5新增type类型
<!--
4、H5新增type类型
邮箱：<input type="email"> 必须包含@,@后面必须有内容
网址：<input type="url"> 必须包含一个协议,协议后面必须有内容,常见的协议http和https
搜索：<input type="search">
电话：<input type="tel"> 适用于移动端
数字：<input type="number" min="最小值" max="最大值" value="当前值" step="步长"/>
范围：<input type="range" min="最小值" max="最大值" value="当前值" step="步长">
颜色：<input type="color">
日期：<input type="date">
月：<input type="month">
周：<input type="week">
-->
<form action="ok.html" name="form1">
<p>邮箱：<input type="email"></p>
<p>网址：<input type="url"></p>
<p>搜索：<input type="search"></p>
<p>电话：<input type="tel"></p>
<p>颜色：<input type="color"></p>
<p>数字：<input type="number" min="0" max="100" value="60" step="5"></p>
<p>范围：<input type="range" min="0" max="100" value="20" step="10"></p>
<p>日期：<input type="date"></p>
<p>月：<input type="month"></p>
<p>周：<input type="week"></p>
<p><input type="submit"></p>
</form>
5 H5新增表单元素属性
<!--
5、H5新增表单元素的属性
placeholder="" 默认提示
autofocus 当页面一加载,input会自动获取焦点,适用所有的input,推荐写在第一个input上
了解：
required 必填项
multiple 可以输入多个,用英文的逗号隔开,适用邮箱和网址
minlength 最小长度,英文字母、数字、汉字等都算一个长度
maxlength 最大长度,英文字母、数字、汉字等都算一个长度
-->
<form action="ok.html">
<p>
姓名：<input type="text" placeholder="手机/邮箱/用户名" autofocus required minlength="2" maxlength="8">
</p>
<p>
密码：<input type="password" placeholder="密码">
</p>
<p>
邮箱：<input type="email" multiple>
</p>
<p>
<input type="submit">
</p>
</form>
6 行内元素与块级元素
<!--
7、块级元素和行内元素的区别
1）块级元素独占一行,行内元素在同一行显示
2）块级元素默认宽度为100%,行内元素默认宽度由内容撑开
3）块级元素
h1~h6、p、ol、ul、li、dl、dt、dd、form等
4）行内元素
img、a、b、i、u、s、del、em、strong、sup、sub、input、button、textarea等
%：相对于父元素
-->
<h1>一号标题</h1>
<p>这是一个段落</p>
<b>加粗</b>
<a href="#">超链接</a>
章节四 H5新增元素与CSS初识
1 div和span
<!--
1、div+span
div 块级元素 盒子、容器 无语义的标签
span 行内元素 盒子、容器 无语义的标签
-->
2 H5新增语义化布局标签
<!--
2、H5新增语义化布局标签
使页面结构更加清晰
H5新增元素IE8及其以下不支持
<header>头部</header>
<nav>导航</nav>
<footer>页脚</footer>
<aside>侧边栏</aside>
<article>文章、帖子等</article>
<section>章节、独立的一块</section>
-->
3 视频和音频
<!--
3、视频和音频
1）视频
支持的格式mp4 ogg webM
标签：
<video>用户提示</video>
属性：
src 必须属性 路径
width 宽度
height 高度
autoplay 自动播放
controls 显示控制面板
loop 循环播放
muted 静音
2）音频
标签：
<audio>您的浏览器不支持音频,请升级</audio>
属性：
src 必须属性 路径
autoplay 自动播放
controls 显示控制面板
loop 循环播放
muted 静音
-->
4 CSS与引入方式
<!--
1、css
层叠样式表 级联样式表 简称样式表
2、作用
1）实现了内容与表现的分离
2）提高了代码的可重用性和可维护性
3、文件后缀
.css
html文件后缀 .html 或者 .htm
4、css的特点
1）继承性
子元素可以继承父元素的样式
有继承性的属性：color,font-*,text-*,line-height
2）层叠性
一个元素可以同时设置多个样式
3）优先级
当你样式冲突时,优先级高的样式生效,优先级相同时,后写的样式生效
(html、css、JavaScript由浏览器解析执行,由上往下,由左往右的顺序解析)
5、css的语法
1）属性:属性值;属性:属性值;
2）选择器{属性:属性值;属性:属性值;}
6、css的注释(程序员的自我修养)
快捷键：
单行注释 ctrl+/
多行注释 ctrl+shift+/
语法：
/* 注释的内容 */
注意：
注释之间不能相互嵌套
-->
<style type="text/css"></style>
<link rel="icon" href="images/img1.gif">
<link rel="stylesheet" href="css/05style.css"/>
<style>
@import "css/06style.css";
</style>
<!--
2、引入方式
1）内联方式 行内样式 ——只对当前元素生效,重用性低
利用HTML的style属性
语法：
<开始标记 style="css属性:属性值;"></结束标记>
2）内部方式 ——只对当前页面生效
利用HTML的style标签
语法：
<head>
<style>
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
}
</style>
</head>
3）外部方式 ——实现了内容与表现的完全分离,提高了代码的重用性可维护性
利用HTML的link标签
语法：
<head>
<link rel="stylesheet" href="css文件的路径"/>
</head>
一个.css文件可以被多个HTML文件引入
一个HTML文件可以引入多个css文件
4）导入式
语法：
<head>
<style>
@import "css文件";
</style>
</head>
@import和link的区别：
①加载顺序不同，@import先加载HTML文件，再加载css文件；link是同时加载HTML和css文件
②引入内容不容，@import只能引入css文件；link还可以引入其他内容
③兼容性不同，@import有兼容性问题，IE5以上支持；link没有兼容性问题
④@import会增加页面的http请求,影响页面加载速度
⑤JavaScript操作DOM时,只能操作link引入的css
5）引入方式的优先级
内联方式>内部方式(外部方式)
内部方式和外部方式优先级相同,写在后面的样式生效
-->
章节五 CSS常用属性
1 字体的属性
<style type="text/css">
/*
1、字体的属性——继承性(自己有样式,不会继承父元素的样式)
1）字体颜色 color:;
2）字体大小 font-size:16px;
浏览器默认字体大小为16px
浏览器支持的最小字体为12px
3）字体是否加粗 font-weight:;
normal 默认值 不加粗
bold 加粗
100-900 400 = normal 700 = bold
4）字体的样式 font-style:;
normal 默认值 不倾斜
italic 倾斜
5）字体 font-family:字体1,字体2,...;
注意：当字体由多个单词组成,必须加引号
颜色的取值：
1）关键词 red blue等
2）十六进制
黑色 #000000 简写 #000
白色 #ffffff 简写 #fff
3）rgb(,,)
取值0-255
rgb(0,0,0) 黑色
rgb(255,255,255) 白色
4）rgba(,,,)
a：透明度 取值0-1 0：完全透明 1：不透明 0.18简写.18
rgba(0,0,0,.5)
*/
/*选择器{
属性:属性值;
}*/
</style>
</head>
2 背景属性
<style type="text/css">
/*
2、背景的属性
1）背景颜色 background-color:transparent(透明的);
2）背景图片 background-image:url("");
3）背景图片是否平铺 background-repeat:;
repeat 默认值 平铺
no-repeat 不平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
4）背景图片大小 background-size:x y;
取值px % cover contain
当只取一个值,等比例缩放
cover 覆盖 背景图片会覆盖整个背景区域,但背景图片可能显示不完全
contain 背景图片拉伸至最大,背景区域可能覆盖不完全
5）背景图片定位 background-position:x y;
默认值为0 0 (元素的左上角)
取值px % left right top bottom center
当只取一个值,第二个值默认为center
当取正值,背景图片往右下走
当取负值,背景图片往左上走
左上角为0% 0% 右下角为100% 100%
6）背景图片是否固定 background-attachment:;
scroll 默认值 滚动
fixed 固定
7）简写
background:color image repeat size position attachment;
后面的多个属性空格隔开,不区分前后顺序
简写属性没有取得属性值为默认值
当背景图片大小和背景图片定位取值为px或%时,一般不简写
当简写属性和单个属性同时存在,单个属性要写在简写属性后面
*/
body{
height: 3000px;
/* background-image: url("images/img2.jpg");
background-attachment: fixed;*/
background: url("images/img2.jpg") fixed;
}
.box{
width: 600px;
height: 500px;
/*background-color: red;*/
/*background-image: url("images/img1.jpg");*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-size: 600px 500px;*/
/*background-size: 100% 100%;*/
/*background-size: cover;*/
/*background-size: contain;*/
/*background-position: -50px -50px;*/
/*background-position: 100% 100%;*/
/*background-position: 50%;*/
/*background-position: right top;*/
/*background-position: center;*/
background: red url("images/img1.jpg") no-repeat center;
}
</style>
3 文本属性
<style type="text/css">
/*
3、文本属性——继承性
1）元素内容的水平对齐方式
text-align:;
left 默认值 居左
center 居中
right 居右
2）文本装饰
text-decoration:;
none 默认值 不显示
underline 下划线
overline 上划线
line-through 删除线
3）英文字母大小写转换
text-transform:;
uppercase 全部转换为大写
lowercase 全部转换为小写
capitalize 每个单词首字母大写
4）首行缩进
text-indent:;
取值px em
px 像素 绝对单位
em 相对单位,相对于当前字体大写 默认1em = 16px
可取负值,往左缩进
</style>
4 列表属性
<style>
/*
4、列表的属性
1）设置项目符号的类型
list-style-type:;
none 不显示
2）设置项目符号为图片
list-style-image:url("");
3）设置项目符号的位置
list-style-position:;
outside 默认值
inside
4）简写
list-style::
*/
a{
text-decoration: none;
}
li{
/*list-style-type: none;*/
/*list-style-image: url("images/img1.jpg");*/
/*list-style-position: inside;*/
list-style: none;
}
</style>
5 表格属性
<style type="text/css">
/*
5、表格的属性
1）表格的宽高,行的高度,单元格的宽高等
width:;
height:;
2）背景属性
background:;
3）表格内容的水平对齐方式
text-align:left|center|right;
4）设置单元格内容的垂直对齐方式(写在tr或者td上)
vertical-align:middle|top|bottom;
5）边框
border:;
6）内容距边框的距离
padding:;
7）边框折叠(相当于cellspacing="0")
border-collapse: collapse;
8）边框之间的距离
border-spacing:;
*/
table{
width: 1200px;
height: 400px;
background-image: url("images/img1.jpg");
text-align: center;
/*border-collapse: collapse;*/
border-spacing: 10px;
}
tr{
vertical-align: top;
}
.odd{
background-color: red;
}
.even{
background-color: green;
}
</style>
6 overflow:hidden
<style type="text/css">
/*
6、overflow
设置内容溢出元素框怎么处理
visible 默认值
hidden 溢出部分隐藏
scroll 显示滚动条
auto 自动,当有内容溢出,显示滚动条;没有内容溢出,不显示滚动条
7、一行文字溢出省略号显示
//文字在同一行显示
white-space:nowrap;
//内容溢出隐藏掉
overflow:hidden;
//文字溢出省略号显示
text-overflow:ellipsis;
*/
.box{
width: 300px;
height: 300px;
background-color: deepskyblue;
/*overflow: hidden;*/
/*overflow: scroll;*/
overflow: auto;
}
.box1{
width: 300px;
height: 100px;
background-color: palevioletred;
/*三个缺一不可*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
7 行高间距
<style type="text/css">
/*
7、字符之间的距离
letter-spacing:;
可取正负
8、行高
设置一行文字的高度
line-height:;
可以取值px number(行高等于当前字体大小乘以数字)
当行高等于高,一行文字垂直居中
9、元素的透明度
opacity:;
取值0-1
0：完全透明
1：不透明
*/
.box1{
/*letter-spacing: 10px;*/
letter-spacing: -5px;
}
.box2{
width: 300px;
height: 100px;
background-color: skyblue;
/*line-height: 50px;*/
font-size: 20px;
line-height: 5;
}
.box3{
width: 300px;
height: 300px;
background-color: pink;
opacity: 0;
}
</style>
AAAAAAAAA8 选择器
<style>
/*
二、关系选择器
利用HTML元素之间的关系
1、子代选择器 >
范围：选中所有直接子代(儿子)
2、后代选择器 空格
范围：选中所有的后代(包含子代)
3、相邻兄弟选择器 +
范围：挨着后面的一个兄弟
4、通用兄弟选择器 ~
范围：后面符合条件的所有兄弟
三、伪类选择器
冒号连接,表示一种状态
:link 点击之前(只适用于a)
:visited 点击之后(只适用于a)
:hover 鼠标悬停(适用于所有元素)
:active 鼠标按下(适用于所有元素)
注意：当四个选择器同时存在于一个元素,必须按着先爱后恨的原则(L_V_H_A)
C3新增选择器
:first-child 第一个子元素是...
:last-child 最后一个子元素是....
:nth-child(number|odd|even|倍数) 第几个子元素是...
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type(number|odd|even|倍数) 第几个子元素
#getVacBox>div:nth-of-type(2)
#getVacBox下的第二个子元素
:empty 空的子元素(子元素不能包含任何内容)
:not(选择器) 否定
表单：
:focus 获取焦点时的样式
:checked 被选中时的样式(配合单选按钮和多选按钮使用)
*/
.box>p:not(.two){
color: red;
}
input:focus{
width: 200px;
height: 50px;
}
input:checked{
width: 50px;
height: 50px;
}
/*
四、伪对象选择器 伪元素选择器
在元素前面或者元素后面插入一个不存在的元素(伪元素)
在元素内部的最前面插入
:before|::before{
content:"";
}
在元素内部的最后插入
:after|::after{
content:"";
}
五、属性选择器
利用HTML的属性
[属性] 选中有此属性的所有元素
[属性=属性值]
元素[属性=属性值]
元素[属性^=值] 以当前值开头
元素[属性$=值] 以当前值结尾
元素[属性*=值] 包含当前值
*/
/*[class]{
color: red;
}
[type]{
width: 200px;
height: 50px;
}
[class=box]{
color: green;
}
div[class=box]{
color: orange;
}*/
p[class*=o]{
color: orange;
}
</style>
章节六 盒模型
box-sizing: content-box|border-box|inherit;
/*
content-box标准盒模型，宽高定义内容大小
border-box怪异盒模型ie，宽高定义边框以内
inherit继承父元素
*/
<style>
/*
三、弹性盒模型 伸缩盒模型 flexbox
主要用于移动端布局
目的是设置子元素排列、对齐和分配剩余空白空间
名词：
父元素——弹性容器
子元素——弹性项目
主轴——默认为x轴
侧轴——默认为y轴
注意：float在弹性盒模型中不生效
1、父元素上的属性
1）开启弹性盒模型
display:flex;
子元素默认水平排列
2）设置子元素的排列方式(设置弹性盒的方向)
flex-direction:;
row 默认值 子元素从左往右排列
row-reverse 子元素从右往左排列
column 子元素从上往下排列
column-reverse 子元素从下往上排列
3）设置子元素在主轴的对齐方式
默认主轴为x轴,侧轴为y轴;当子元素垂直排列时,y轴为主轴,侧轴为x轴
justify-content:;
flex-start 默认值 弹性盒的开始
flex-end 弹性盒的结束
center 居中
space-between 在子元素之间平均分配父元素剩余的空间
space-around 在子元素四周分配父元素剩余的空间,两端是中间的一半
4）设置子元素在侧轴的对齐方式
align-items:;
flex-start 默认值 弹性盒的开始
flex-end 弹性盒的结束
center 居中
2、写在子元素上的属性
flex-grow:number;
子元素占父元素剩余空间的比例
*/
</style>
厂商前缀
<style>
/*
2、浏览器内核
渲染引擎
作用：解析HTML、css、JavaScript
3、厂商前缀
浏览器对C3新特性的支持
浏览器 厂商前缀 内核
谷歌 -webkit- blink
苹果 -webkit- webkit
火狐 -moz- gecko
欧朋 -o- blink
IE -ms- trident
*/
body{
-webkit-width:200px;
-moz-width:200px;
-o-width:200px;
-ms-width:200px;
width: 200px;
}
</style>
章节七 浮动和定位
1 浮动和清除
<style type="text/css">
/*
1、浮动
1）作用
①写图片环绕技术
②布局(块级元素水平显示)(HTML所有元素都可以浮动)
2）语法
float:;
none 默认值
left 左浮动
right 右浮动
3）原理
元素浮动后排除到普通文档流之外
元素浮动后在页面不占据位置(原位置不保留)
浮动是碰到父元素的边框或者浮动元素的边框就会停止
浮动不会重叠
元素只有左右浮动
元素浮动后都转换为块级元素
4）清除浮动的影响
如果父元素不设置高度,默认高度由内容撑开,当子元素浮动后,在页面中不占据位置,这时候父元素的高度会坍塌,对后面的元素会产生影响
清除浮动的影响：
①浮动元素的父元素设置高度(高度已知)
②浮动元素的父元素加overflow:hidden|auto;(自动找高,加了overflow属性后元素开启了BFC格式:块级格式上下文,就是变为独立的一块,子元素不会再布局上影响父元素)
③受影响的元素加clear:left|right|both;(父元素的高度没有找到)
④空div法(页面新增很多空div元素)
浮动元素后加一个空div
空div{clear:both;}
⑤伪对象法
浮动元素的父元素::after{
content:"";
display:block;
clear:both;
}
*/
</style>
2 display
<style type="text/css">
/*
2、display
规定了元素应该是什么框类型
属性值：
1）inline 行内元素
2）block 块级元素
3）inline-block 行内块 即在同一行显示,又可以设置宽高
常见行内块：img、input、button等
行内块会识别代码之间的空白
4）none 隐藏 隐藏后不占据位置
5）flex 弹性盒模型
6）table-cell 单元格
*/
</style>
3 position
<style type="text/css">
/*
3、position 元素定位
属性值：
1）static 默认值 静态定位
2）relative 相对定位
相对于自己原位置定位
定位后原位置保留
配合left、right、top、bottom移动
当top、bottom、left、right同时存在,left和top的优先级大于right和bottom
当取正值,元素往右下移动;当取负值,元素往左上移动
应用场景：
①自己小范围移动
②配合绝对定位使用
3）absolute 绝对定位
相对于已经定位(static除外)的父元素定位,如果父元素没有定位,逐级往上找,最后相对于body定位
定位后原位置不保留
配合left、right、top、bottom移动
元素绝对定位后转换为块级元素
应用场景：
①形成独立的一层
4）fixed 固定定位
相对于浏览器窗口定位
定位后原位置不保留
配合left、right、top、bottom移动
元素固定定位后转换为块级元素
应用场景：
①固定在页面某个位置
4、z-index:number; 堆叠顺序
取值越大,层级越往上
可以去负值
默认值auto
必须配合定位使用(static除外)
*/
</style>
章节八 C3新特性
1 圆角border-radius
<style type="text/css">
/*
1、圆角
border-radius:;
value:表示四个角
value value:左上角和右下角 右上角和左下角
value value value:左上角 右上角和左下角 右下角
value value value value:左上角 右上角 右下角 左下角
取值：px %
画圆：border-radius:50%;正方形
*/
</style>
2 阴影box-shadow
<style type="text/css">
/*
2、盒阴影
box-shadow:水平偏移位置 垂直偏移位置 模糊度 阴影尺寸 颜色 位置;
必须 必须 可选 可选 可选 可选
正负 正负 正值 正负 outset|inset
3、字阴影
text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色;
*/
.box:hover{
/*box-shadow: -10px -10px 30px -10px green inset;*/
/*box-shadow: 0 10px 30px gold;*/
box-shadow: 0 0 30px inset;
}
</style>
3 背景渐变background-image:-o-linear-gradient(,,)
AAAAAAAAAAAAAA 上面的元素需要加position 不然会被覆盖
<style>
/*
3、背景渐变
1）属性
background-image:;
简写：background:;
2）属性值
①线性渐变
background-image:linear-gradient(方向,颜色1,颜色2,..);
注意：
方向可以省略,默认从上往下渐变
取值：
a、关键词 to right,to top,to right bottom等
b、角度 deg(弧度)顺时针180为正
②径向渐变
background-image:radial-gradient(渐变的中心点,渐变的形状,颜色1,颜色2,...);
注意：
a、渐变的中心点默认为宽高的一半
可以设置top tight left bottom
注意兼容性问题
b、渐变的形状默认为椭圆
可以设置为circle
*/
.box{
/*background-image: linear-gradient(-120deg,red,orange,yellow,green,blue,purple);*/
background-image: -webkit-radial-gradient(top,circle,red,orange,yellow,green);
background-image: -moz-radial-gradient(top,circle,red,orange,yellow,green);
background-image: -o-radial-gradient(top,circle,red,orange,yellow,green);
background-image: -ms-radial-gradient(top,circle,red,orange,yellow,green);
background-image: radial-gradient(top,circle,red,orange,yellow,green);
}
.box1{
width: 60px;
height: 60px;
background-image: linear-gradient(120deg,#ff3149,#ff64a6);
border-radius: 50%;
}
</style>
4 位移与旋转transform
<style type="text/css">
/*
4、转换 变型
1）作用
使元素在位置或者形状上发生一定的改变
2）属性
transform:translate() rotate() scale() skew();
3）属性值
①位移 单位px %
transform:translate(x,y);
当只取一个值,表示水平方向移动的距离
当取两个值,表示水平方向和垂直方向移动的距离
取正值,往右下移动;取负值,往左上移动
transform:translateX();
transform:translateY();
3D位移：
transform:translate3D(x,y,z);
②旋转 单位deg(弧度)
transform:rotate(30deg);
取正值,顺时针旋转
取负值,逆时针旋转
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
默认元素的中心点为元素的正中心,宽高的一半
可以通过transform-origin:; 修改元素的中心点
transform-origin: right bottom;
③缩放 取值number 取值0-1：缩小 >1:放大 默认1
transform:scale(x,y);
当只取一个值,等比例缩放
当只取两个值,表示水平方向和垂直方向
transform:scaleX();
transform:scaleY();
④倾斜 单位deg
transform:skew(x,y);
当只取一个值,表示水平方向倾斜的弧度
当取两个值,表示水平方向和垂直方向倾斜的弧度
transform:skewX();
transform:skewY();
*/
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
/*transform-origin: right bottom;*/
}
.box:hover{
/*transform: translate(-20px,-30px);*/
/*transform: translateX(50px);*/
/*transform: translateY(50px);*/
/*transform: translate3d(50px,50px,0);*/
/*transform: translate(50px,50px) rotate(-60deg);*/
/*transform: scale(1.5,.8);*/
/*transform: scaleX(1.5);*/
/*transform: scaleY(1.5);*/
transform: skew(30deg,40deg);
}
</style>
5 过渡transition
<style type="text/css">
/*
5、过渡
transition:过渡的属性 持续时间 速度变化类型 延迟时间;
transition: all 2s ease-in-out -1s;
1）作用
使元素从一个样式逐渐改变为另外一个样式
2）注意
过渡必须有触发事件
例如鼠标点击、鼠标悬停等
3）过渡的属性
①过渡的属性——必须
transition-property:属性1,属性2,...;
简写all
可以过渡的属性：
a、取值为颜色
b、取值为数值
c、阴影
d、转换
②过渡的时间——必须
transition-duration:;
默认为0s|0ms
取值s|ms
1s=1000ms
③过渡的速度变化类型——可选
transition-timing-function: ;
取值：
ease 默认值 先加速后减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
linear 匀速
④过渡的延迟时间——可选
transition-delay:;
默认0s|0ms
取值正负
当取负值,表示把这段时间的效果跳过
当取正值,表示多久以后出发这个过渡
4）简写
transition:过渡的属性 过渡的持续时间 过渡的速度变化类型 过渡的延迟时间;
*/
.box{
width: 200px;
height: 200px;
background-color: red;
/*transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: -1s;*/
transition: all 2s ease-in-out -1s;
}
.box:hover{
width: 1200px;
background-color: green;
border-radius: 100px;
}
</style>
6 动画animation
<style type="text/css">
/*
6、animation动画
1）作用
使元素从一个样式逐渐变为另外一个样式
可以控制过程
过渡只需要控制开始和结束的状态
2）定义动画的过程
@keyframes name {
0%|from{
css样式
}
任意百分比{
css样式
}
100%|to{
css样式
}
}
3）调用动画
animation:name 持续时间 速度变化类型 延迟时间 播放次数(number|infinite) 播放方向(alternate) 动画停在最后一帧(forwards);
必须 必须 可选 可选 可选 可选
4）动画的单个属性
animation-name: ; 动画名称——必须
animation-duration: ; 动画的持续时间——必须 默认0s|0ms
animation-timing-function: ; 动画的速度变化类型——可选 默认ease 取值ease-in ease-out ease-in-out linear
animation-delay: ; 动画的延迟时间——可选 默认0s|0ms 取正负
animation-iteration-count: ; 动画的播放次数——可选 取值number|infinite
animation-direction: ; 动画的播放方向——可选 取值alternate:偶数次倒序播放
animation-fill-mode: ; 动画停在最后一帧——可选 取值forwards
animation-play-state:; 动画的播放状态 默认running 取值paused 一般配合hover使用
*/
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box:hover{
animation:change 3s ;
}
@keyframes change {
0%{
border-radius: 50%;
}
25%{
background-color: green;
}
50%{
transform: rotate(360deg);
}
75%{
width: 1200px;
background-color: pink;
}
100%{
background-color: #000;
}
}
@keyframes dong{
from{
top:0px;
}
to{
top:200px;
}
}
</style>
章节九 响应式布局
1 媒体查询
768px-992px
<style type="text/css">
/*
1、媒体查询
1）作用
实现响应式布局
2）语法
①内部引入
//移动端
@media screen and (max-width:768px){}
//iPad端
@media screen and (max-width:992px) and (min-width:768px){}
//pc端
@media screen and (min-width:992px){}
②外部引入
//移动端
<link rel="stylesheet" href="" media="screen and (max-width:768px)"/>
//ipad端
<link rel="stylesheet" href="" media="screen and (min-width:768px) and (max-width:992px)"/>
//pc端
<link rel="stylesheet" href="" media="screen and (min-width:992px)"/>
*/
/*
移动端 背景颜色 红色
iPad端 背景颜色 绿色
pc端 背景颜色 蓝色
*/
/*移动端*/
@media screen and (max-width: 768px){
body{
background-color: red;
}
}
/*ipad端*/
@media screen and (min-width: 768px) and (max-width: 992px){
body{
background-color: green;
}
}
/*pc端*/
@media screen and (min-width: 992px){
body{
background-color: blue;
}
}
</style>
2 响应式
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.items{
height: 450px;
background-color: red;
float: left;
padding: 10px;
box-sizing: border-box;
}
.items>div{
width: 100%;
height: 100%;
background-color: green;
}
/*移动端*/
@media screen and (max-width: 768px) {
.items{
width: 50%;
}
}
/*iPad端*/
@media screen and (min-width: 768px) and (max-width: 992px) {
.items{
width: 33%;
}
}
/*pc端*/
@media screen and (min-width: 992px) {
.items{
width: 25%;
}
}
</style>
3 多列（报纸效果）
<style type="text/css">
/*
2、多列
设置元素中的内容分为多少列
1）属性
①设置列的数量
column-count:number;
②设置列之间的间隙
column-gap:;
③设置列之间的边框
column-rule:style width color;
*/
.box{
width: 600px;
height: 500px;
border: 3px solid red;
column-count: 3;
column-gap: 30px;
column-rule: 3px solid red;
}
</style>
章节十 雪碧图
雪碧图
<style type="text/css">
/*
1、雪碧图 css精灵 css sprite
1）定义
雪碧图是一项图片整合技术
把许多小图放到一张大图上面
2）优点
①减少页面http请求
②减少图片字节
③减少命名困扰
3）原理
background-image:;
background-position:;
*/
.box1{
width: 200px;
height: 50px;
background-image: url("images/spirite.png");
}
.box2{
width: 65px;
height: 65px;
background-image: url("images/spirite.png");
background-position: -378px 0;
}
.box3{
width: 118px;
height: 37px;
background-image: url("images/spirite.png");
background-position: -393px -451px;
}
</style>