html
一、文档类型声明标签
<!DOCTYPE>
文档类型声明,声明页面为HTML页面<!DOCTYPE html>
这句代码的意思时:当前页面采取的时HTML5版本来显示网页
注意:
1.<!DOCTYPE> 声明位于文档中的最前面的位置,处于<html>
标签之前
2.<!DOCTYPE>不是一个HTML标签,它就是文档声明标签
二、lang语言种类
用来定义当前文档显示的语言。
1.en定义语言为英语
2.zh-CN定义语言为中文
就是en为英文网页,zh-CN就是中文网页
三、HTML常用标签
1、1 div 和span
**
div:独占一行
span:跨距 跨度
1.2 img图像
<img src="../img/14.jpg" alt="加载失败" title="图片" width="300px" border="1px"/>
image的缩写
width:设置宽度 像素
height:设置高度 像素
border:设置边框 像素
1.3 a 超链接
<a href="../d" target="_blank"></a>
href:链接目标的url地址
target:-self 当前页面打开 _blank 新窗口打开
1 锚点定位
<a href="#live">
<h1 id="live"></h1>
1.4 表格标签
<table> </table>定义表格的标签
<tr></tr> 定义行
<td></td>定义列
1.5 自定义列表
<dl>
<dt>主题</dt>
<dd>解释</dd>
<dd>解释</dd>
</dl>
1.6 label标签
label标签为input元素定义标注
label标签用于绑定一个表单元素,当点击《label》标签内的文本时
css
一.css选择器
放在style样式里边
1.1 标签选择器
以标签名为选择器
p{
color:red;
font-size:20px;
}
1.2 类选择器
以class的名字为选择器 以点开头
.persion{
color:red;
font-size:20px;
}
<div class="persion"></div>
多类名
.cat{
color:red;
font-size:20px;
}
.dog{
border:10px solid red;
}
< div class="cat dog pink">
</div>
1.3 id选择器
以id名字为选择器 以#号开头
#name{
color:red;
font-size:20px;
}
<div id="name">
</div>
1.4 通配符选择器
*{
所有的标签都生效
}
二、CSS字体属性
定义字体
1.1 font-family
h1{
font-family:"微软雅黑";
}
多个字体以逗号隔开
h1{
font-family:"微软雅黑",Arial,helvetica;
}
1.2 font-size
定义字体大小px(像素)
谷歌浏览器默认的文字大小为16px
h1{
font-size:16px;
}
1.3 font-weight
定义字体粗细
bold:加粗 font-weight:700 等同于bold加粗 不需要单位 推荐数字
normal:不加粗 font-weight:400 等同于normal不加粗 推荐数字
.bold{
font-weight:bold;
}
1.4 文字样式 font-style
em{
font-style:normal; normal 默认值,浏览器会显示标准的字体样式
}
p{
font-style:italic; 浏览器会显示斜体的字体样式
}
1.5 font 字体复合属性
顺序不能颠倒 各个属性以空格隔开
其它属性可以省略 font-size font-family不能省略 否则不起效果
body{
font: font-style font-weight font-size/line-height font-family;
}
1.6 color颜色RGB
rgb(255,0,0)或rgb(100%,0%,0%)
开发中常用16进制
rgba() 最后一位值设置透明度 最大为1 以小数为值
rgba(34,56,39,0.4);
1.7 对齐文本
text-align 属性用于设置元素文本内容的水平对齐方式。
div{
text-align:center;
}
left 左对齐 (默认值)
right 右对齐
center 居中对齐
1.8 装饰文本
text-decoration 属性规定添加到文本的装饰,可以给文本添加下划线、删除线、上划线等。
none 默认,没有装饰线 (最常用)
underline 下划线,链接 a 自带下划线(常用)
overline 上划线
line-through 删除线
a{
text-decoration:none;
取消a链接的下划线
}
1.9 文本缩进
text-indent :文本第一行进行缩进 值可以是负数
1em=16px :表示一个文字大小
p{
text-indent:16px;
}
p{
text-indext:2em;表示两个文字大小的距离
}
2.0 行间距
line-height属性用于设置行间的距离(行高) 控制文字行与行之间的距离
行间距:上间距 文本高度 下间距 设置的是上间距跟下间距
p{
line-height:26px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GeuCgyCP-1612182733321)(image/image-20210102103106782.png)]
三、css引入样式
1.1行内样式表(行内式)
写到HTML页面内部,单独放到一个
可以放在HTML文档的任何地方,但一般放在文档的标签中
<style>
div{
color:red;
font-size:12px;
}
</style>
1.2内部样式表(嵌入式)
直接写在标签内部
<div style="color:red;font-size:12px;">
</div>
1.3外部样式表(链接式)
单独写在css文件中 ,之后把css文件引入到HTML页面中使用。
使用标签引入
<link rel="stylesheet" href="style.css">
1.4 快速生成HTML结构语法
1.生成多个相同标签 div*3 快速生成3个div 输入完按tab键
div*3
2.父子级关系的标签 ul>li 输入完按tab键
ul>li
3.兄弟关系的标签 div+p 输入完按tab键
div+p
4.生成带类名或者id名字的标签 p.demo 或者p#demo 输入完按tab键
p.demo
-
直接.demo或者#demo 默认生成带类名或者id名的div 输入完按tab键
-
div自增长的类名 .demo$*5 表示类名从demo1生成到demo5 $ 代表自增 输入完按tab键
-
直接.demo*5 代表生成五个类名是demo的div
-
生成标签的同时 生成内容 div{生成五个}*5 输入完按tab键
div{生成五个}*5
四、复合选择器
常用复合器:后代选择器、子选择器、并集选择器、伪类选择器
1.1 后代选择器
元素2是元素1的子代 中间以空格隔开 元素2可以是孙子 重孙子 只要是后代就行
元素1 元素2{
}
1.2 子选择器
子元素选择器 只能选择第一级子元素,就是亲儿子 用大于号隔开
元素1>元素2{
}
1.3 并集选择器
多组标签定义相同的样式时 用逗号隔开
元素1,元素2,元素3{
}
1.4 链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起的链接)
a 标签要单独指定样式
a:link{
color:#ffffff;
text-decoration:none;
}
:focus伪类选择器用于选取获得焦点
焦点就是光标,一般情况类表单元素才能获取
input:focus{
background-color:yellow;
}
五、元素的显示模式
1.1 块元素:
独占一行
块级元素的特点:
-
高度,宽带,外边距以及内边距都可以控制
-
宽度默认是父级容器的100%
-
是一个容器及盒子,里面可以放行内或者块级元素。
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>,<div>等标签都是块级元素
1.2 行内元素:
一行可以放多个元素 也称内联元素
- 无法设置宽 高 是无效的
- 默认宽度就是它本身内容的宽带
- 行内元素只能容纳文本或其它行内元素
<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等行内元素
注意:
-
文字类元素内不能使用块级元素
-
标签主要用于存放文字,不能放块级元素,特别不能放
-
<h1>~<h6>等都是文字类块级标签,里面也不能放其它块级元素
1.3 行内块元素
行内块元素有几个特殊的标签 它们具有块元素和行内元素的特点。
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
- 默认宽带就是它本身内容的宽度(行内元素的特点)
- 高度,行高,外边距以及内边距都可以控制(块级元素特点)。
1.4 元素显示模式转换
a 标签通过转换后可以放块级元素
- 转换为块元素:display:block;
- 转换为行内元素:display:inline;
- 行内块元素:display:inline-block;
1.5 小米侧边栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>练习</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#app{
width:200px;
height: 204px;
}
a{
text-decoration: none;
display: block;
font-size: 14px;
background-color: #55585a;
color: #fff;
line-height: 34px;
padding-left: 30px;
}
a:hover{
background-color: #FF6700;
}
</style>
<body>
<div id="app" class="stu">
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">电脑 笔记本</a>
<a href="#">智能 路由器</a>
<a href="#">耳机 音响</a>
<a href="#">儿童 手表</a>
</div>
<!-- 引入vue文件 -->
<script src="../vue/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app", //可以使用id选择器
data: {
message: "空手道",
list: ["中国功夫"],
list1:["中国功夫"]
},
methods: {
add: function() {
if (this.message != ""&&this.message.length<7){
this.list.push(this.message);
}else{
this.list.push(this.message.substring(0,7)+"...");
}
this.list1.push(this.message);
this.message = "";
},
dele: function(index) {
this.list.splice(index, 1);
this.list1.splice(index, 1);
},
cler: function() {
this.list = [];
this.list1 = [];
}
}
});
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfMcBR0l-1612182733325)(image/image-20210103104444429.png)]
1.6 单行文字垂直居中的原理
- 让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中
六、CSS背景
1.1 背景颜色
一般情况下元素背景颜色默认值是transparent(透明)
background-color:#6652fa;
1.2 背景图片
background-image:元素的背景图像,实际开发中常见于logo或者一些装饰性的小图片或者超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
background-image:url(imgag/1.jpg);
1.3 背景平铺
background-repeat:repeat | no-repeat | repeat-x | repeat-y
1.4 背景图片位置
1 方位
background-position:x y;
background-position:center top; 顺序没有关系
background-position:right center; 顺序没有关系
如果只写一个值 第二个值默认居中对齐
2 精确定位
background-position:50px 20px; 距离左侧50px 距离顶部20px
如果只指定一个值,那该数值一定是x坐标,另一个默认垂直居中
3 混合单位
background-position:20px center;
1.5 背景固定
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment:scroll | fixed
scroll:背景图像随着对象内容滚动
fixed:背景图像固定
1.6 背景复合写法
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background:black url(image/bg.jpg) no-repeat fixed center top;
1.7 背景颜色半透明
background:rgba(22,33,234,0.3)
最后一个数值0~1之间 盒子内的内容不受影响
七、css三大特性
1.1 层叠性
样式覆盖就近原则
1.2 继承性
子标签会继承父标签的某些样式 文本颜色和字号
1.3 权重
元素选择器:1
类选择器,伪类选择器:10
id选择器:100
行内样式:1000
!important:无穷大
.test{
color:red;
}
div{
color:green!mportant; 后面加这个标签代表权重最高
}
八、盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qACsDtea-1612182733328)(image/image-20210103204241663.png)]
1.1 边框border
边框的组成三部分:边框宽度(粗细),样式,颜色;
border-width:5px;
border-style:solid-实线 dashed- 虚线 dotted -点线
border-color:red;
border:1px solid red;
边框会影响盒子的实际大小
盒子=30px 边框=2px 那么盒子实际大小等于34px
1.2 padding
padding-left:20px; 左
padding-top:20px 上
padding-right:20px 右
padding-bottom:20px; 下
复合写法:
padding:5px; 上下左右
padding: 5px 10px; 上下是5px 左右是 10px;
padding:5px 10px 20px; 上是5px 左右时10px 下是20px
padding :5px 19px 20px 13px; 上5 右19 下20 左13
如果不指定宽度就不会撑大盒子
1.3 高度塌陷问题
给子元素添加margin 父元素会跟着一起下来
- 可以给父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
盒子有浮动 固定 绝对定位 不会有塌陷问题
1.4 盒子边框
border-radius:length
length数值越大弧度越大
如果想把高度、宽度为200px的矩形设置为圆形 只要把:
length设置为它的一半 100px就可以了
设置为50% 等价于高度跟宽度一半
1.5 盒子阴影
box-shadow
水平值
上下值
模糊距离
影子尺寸
颜色
box-shadow:3px 4px 4px 2px blak;
内阴影 inset
前两个值必须写 后面可以省略
1.6 文字阴影
text-shadow
九、 浮动
float
1.1 浮动特性
- 脱离标准普通流的控制 移动到指定位置
- 浮动的盒子不再保留原先的位置
1.2 为什么需要清除浮动
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0,就会影响下面的标准流盒子
清除浮动后父级高度随子元素高度变化
1.3 清除浮动方法
- 1.父级添加overflow属性
- 2.父级添加after元素
- 3.父级添加双伪元素
- 4.额外标签法也称隔墙法,是W3C推荐的做法
1.4 额外标签法
在浮动元素末尾添加一个空的标签,列如
<style>
.cler{
clear:both;
}
</style>
<div class='cler'>
</div>
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
这个新增的盒子要求必须是块级元素不能是行内元素
1.5 父级添加overflow
.box{
overflow:hidden;
}
清除浮动
优点:代码简洁
缺点:无法显示溢出的部分
1.6 清除浮动——:after伪元素
在父盒子添加一个类名.clearfix
.clearfix:after{
conten:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{ IE6、7专有
*zoom:1;
}
优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器;
原理:在后面生成一个隐藏盒子
1.7 双伪元素清除浮动
也是给父元素添加
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
优点:代码更简洁
缺点:照顾低版本浏览器
代表网站:小米,腾讯等
1.8 清除浮动总结
- 为什么清除浮动
父级没高度
子盒子浮动了
影响下面布局了,我们就应该清除浮动
r元素
- 3.父级添加双伪元素
- 4.额外标签法也称隔墙法,是W3C推荐的做法
1.4 额外标签法
在浮动元素末尾添加一个空的标签,列如
<style>
.cler{
clear:both;
}
</style>
<div class='cler'>
</div>
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
这个新增的盒子要求必须是块级元素不能是行内元素
1.5 父级添加overflow
.box{
overflow:hidden;
}
清除浮动
优点:代码简洁
缺点:无法显示溢出的部分
1.6 清除浮动——:after伪元素
在父盒子添加一个类名.clearfix
.clearfix:after{
conten:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{ IE6、7专有
*zoom:1;
}
优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器;
原理:在后面生成一个隐藏盒子
1.7 双伪元素清除浮动
也是给父元素添加
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
优点:代码更简洁
缺点:照顾低版本浏览器
代表网站:小米,腾讯等
1.8 清除浮动总结
- 为什么清除浮动
父级没高度
子盒子浮动了
影响下面布局了,我们就应该清除浮动