# HTML
1、初始HTML
1.1、什么是HTML
- HTML:Hyper Text Markup Language(超文本标记语言)
- 超文本:文字、图片、视频、音频、动画等
1.2、W3C标准
1.2.1、W3C
1.2.2、W3C内容
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
2、网页的基本信息
- DOCTYPE:告诉浏览器我们要是用什么规范,html是html5的规范
- meta标签:描述性标签,一般来做SEO
- meta标签的属性:
- 1、charset:定义文档的字符编码
- 2、name:context信息属性的名称
- 3、context:name属性的信息内容
<!DOCTYPE html>
<html lang="en">
<!--代表网页头部-->
<head>
<!-- meta: 描述性标签,用来描述我们网站的一些信息,一般来做SEO-->
<meta charset="UTF-8">
<meta name="keyword" content="学习,工作,交友">
<meta name="description" content="一起学编程">
<!-- 网页标题-->
<title> 我的第一个HTML</title>
</head>
<!--网页主题-->
<body>
helloworld
</body>
</html>
3、网页的基本标签
3.1、标题标签
- h1-h6一共6个级别的标题标签
3.2 、段落标签
<p>p标签</p>
3.3 、换行标签
<br>
3.4、 水平线标签
<hr>
3.5 、字体样式标签
<strong>粗体</strong>
<em>斜体</em>
3.6 、注释和特殊符号
空格
>大于
<小于
©版权符
<!DOCTYPE html>
<html lang="en">
<!--代表网页头部-->
<head>
<meta charset="UTF-8">
<!-- 网页标题-->
<title> 我的第一个HTML</title>
</head>
<!--网页主题-->
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h5>六级标签</h5>
<!--水平标签-->
<hr/>
<!--段落标签-->
<p>两只老虎</p>
<p>两只老虎</p>
<p>两只老虎</p>
<p> 两只老虎</p>
<!--换行标签-->
两只老虎<br/>两只老虎<br/>两只老虎<br/>两只老虎<br/>
<!--换行标签比较紧凑,段落标签有明显段间距-->
<!--粗体 斜体-->
<h1>字体样式标签</h1>
<p>粗体:<strong>Hello,World</strong></p>
斜体:<em>Hello,World</em><br/>
<!--特殊符号-->
空格:你 好
<br/>
大于号:><br/>
小于号:<<br/>
版权符:©
<!--特殊符号记忆:&开头;结尾,只要在idea中&敲出后就有提示-->
</body>
</html>
4、 图像标签
4.1、img 标签
4.2、img 标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--src:资源地址
相对地址,绝对地址
../上级地址
alt:在图片加载失败的时候,就会用文字代替
title:鼠标悬停在图片上时,所显示的名字
width height 图片的高和宽-->
<img src="../resouse/image/9.jpg" alt="第一张图片" title="我的图片">
</body>
</html>
5、链接标签
5.1、 a 标签
5.2 、属性
- href 跳转
- target 表示窗口在哪里打开, target="_blank" 在新标签中打开, target="_self" 在本页中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a><br>
<!--href:跳转页面的地址
a标签内文字:即显示的文字
可以把图片放在a标签内,点击图片跳转网页
target:表示在哪打开新网页
_self:当前标签打开(默认)
_blank:新的页面中打开-->
<a href="HtmlDemo02.html" target="_self">点击跳转到HtmlDemo02</a><br>
<a href="https://www.baidu.com/">点击跳转到百度首页</a><br>
<a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<!--锚链接
1.需要一个标记锚
2.跳转到标记
#页面内跳转-->
<a href="#top">点击回到顶部</a>
</body>
</html>
5.3 、锚链接
5.3.1 、 跳转到本页的顶部
<a name="top">顶部</a>
...
...
...
<a href="#top">回到顶部</a>
5.3.1 、 跳转到其它页面的底部
<a herf="其它页面的路径#bottom">跳转到其它页面的底部</a>
- 其他页面
...
<a name="bottom">底部</a>
5.4 、功能性链接
5.4.1、 邮件标签
<a href="mailto:xxxxxxqq.com">点击联系我</a>
5.4.2、 qq链接
<a target="_blank" href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes">
<img border="0" src="../resouse/image/8.jpg" alt="点击这里加我领取小电影" title="点击这里加我领取小电影"/>
</a>
6 、块内元素和行元素
- 块内元素:无论内容多少,该元素独占一行 (p、h1-h6…)
- 行元素:内容撑开宽度,左右都是行内元素可以排成一行,及行内元素可以在同一行(a、strong、em…)
7 、列表标签
- 列表的概念
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷的获得相应信息
7.1、无序列表
<!--有序列表-->
<!-- 应用范围:试卷\问答...-->
<ol>
<li>Java</li>
<li>Python</li>
<li>C</li>
<li>C#</li>
</ol>
7.2、有序列表
<!--无需列表-->
<!-- 应用范围:导航、侧边栏...-->
<ul>
<li>Java</li>
<li>Python</li>
<li>C</li>
<li>C#</li>
</ul>
7.3、自定义列表
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围:公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C</dd>
<dd>C#</dd>
<dt>位置</dt>
<dd>上海</dd>
<dd>北京</dd>
<dd>西安</dd>
</dl>
7 、表格标签
- 特点:
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!--表格table
行:tr
列:td
-->
<table border="1px">
<tr>
<!-- colspan 跨列 -->
<td colspan="4" align="center">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
8 、媒体元素
- 视频元素:video
- 音频元素:audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls:控制条
autoplay :自动播放
-->
<video src="../resources/video/xxx.mp4" controls autoplay></video>
<audio src="../resources/audio/xxx.mp3" controls autoplay></audio>
</body>
</html>
9、 页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
10、iframe内联框架
<!--iframe内联框架
src:地址
w-h:宽度高度
-->
<!-- <iframe src="path" name="mainFrame"></iframe>-->
<!-- path:引用网页地址-->
<!-- mainFrame:框架标识名-->
<iframe src="https://www.baidu.com" frameborder="0" height="800px" width="1000px"></iframe>
<iframe src="" name="hello" frameborder="0"></iframe>
<a href="HtmlDemo01.html" target="hello">点击跳转</a>
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"
scrolling="no" border="0"
frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
11、表单语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<hr>
<!--表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
get方式提交:外面可以在url中看到外面提交的信息,不安全,高效
post方式提交,比较安全,可以传输大文件
-->
<form action="HtmlDemo01.html" method="post">
<!--文本输入框-->
<span>姓名:</span><input type="text" name="username"><br>
<!--密码框-->
<span>密码:</span><input type="password" name="pwd"><br>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
12、input
####12.1、 单选框
<!--单选框标签
type="radio":单选框的值
value:单选框的值
name:表示组(radio在一个组时只能选中一个,没有分组或不在同一组则可以多选 )
-->
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex" checked/>女
####12.2、 多选框
<!--多选框
type="checkbox"
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
12.3、按钮
在form中,type="image"具有和type="submit"一样的特性,点击提交
<!--按钮
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resources/img/1.jpg">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
13、列表框文本域和文件域
13.1、下拉框
<!--下拉框
selected:默认选中的值-->
<select name="下拉框名称" id="sele1">
<option value="选项一的值">选项一</option>
<option value="选项二的值" selected>选项二</option>
<option value="选项三的值">选项三</option>
</select>
13.2、文本域
<p>反馈:
<textarea name="tarea" cols="50" rows="10" >文本域内容</textarea>
</p>
13.3、文件域
<!--文件域
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
14、简单验证和滑块
14.1、 简单验证
- 如果验证的输入框为空则跳过验证
<!--邮件验证-->
<p>邮件:
<input type="email" name="email">
</p>
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>数字:
<input type="number" name="num" max="100" min="0" size="10">
</p>
14.2、滑块
<!--滑块-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
14.3、搜索
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
15、表单应用
- 隐藏域:hidden
- 只读:readonly
- 禁用:disabled
<!--增强鼠标可用性,点击label,光标自动到text上-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
16、表单初级验证
- 常用方式
- placeholder:提示信息
- required:非空判断
- pattern:正则表达式
<p>名称:<input type="text" name="username" placeholder="请输入用户名"></p>
<p>名称:<input type="text" name="username" required></p>
<!--常用的正则:https://www.jb51.net/tools/regexsc.htm-->
<p>自定义邮箱:
<input type="text"
name="diy"
pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>
CSS
1、学习线路
- CSS是什么
- CSS怎么用(快速入门)
- CSS选择器(重点+难点)
- 美化网页(文字,阴影,超链接,列表,渐变…)
- 盒子模型
- 浮动
- 定位
- 网页动画(特效效果)
2、CSS介绍
2.1、CSS概述
- Cascading Style Sheet层叠样式表
- CSS:表现(美化网页)
- 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动
2.2、发展
- CSS1.0
- CSS2.0:DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO
- CSS2.1:浮动,定位
- CSS3.0:圆角、阴影、动画…浏览器兼容性~
2.3、快速入门
- HTML内写css(不建议)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style>可以编写CSS的代码,每一个声明最好以“;”结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>CSS测试</h1>
</body>
</html>
- CSS和HTML分离(建议)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style>可以编写CSS的代码,每一个声明最好以“;”结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<!-- <style>-->
<!-- h1{-->
<!-- color: red;-->
<!-- }-->
<!-- </style>-->
<link href="./css/style.css" rel="stylesheet">
</head>
<body>
<h1>CSS测试</h1>
</body>
</html>
2.4、CSS优势
- 1、内容和表现分离;
- 2、网页结构表现统一,可以实现复用
- 3、样式十分的丰富
- 4、建议使用独立于html的css文件
- 5、利用SEO,容易被搜索引擎收录!
2.5、CSS导入方式
- 优先级:就近原则(行内最先生效,没有行内样式,内样式和外部样式谁里标签近谁生效)
2.5.1、方式一(行内样式:简单粗暴)
<body>
<h1 style="color: blue">CSS测试</h1>
</body>
2.5.2、方式二(内样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1 >CSS测试</h1>
</body>
</html>
2.5.3、方式三(外部样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./css/style.css" rel="stylesheet">
</head>
<body>
<h1>CSS测试</h1>
</body>
</html>
2.5.4、拓展(外部样式)
外部样式有两种写法:
- 链接式:
<link href="./css/style.css" rel="stylesheet">
- 导入式:(很少见到)@import是CSS2.1特有的!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*导入式*/ @import "./css/style.css"; </style> <!-- <link href="./css/style.css" rel="stylesheet">--> </head> <body> <h1>CSS测试</h1> </body> </html>
3、选择器
作用:选择页面上的某一个或者某一类元素
3.1、基本选择器
优先级:id > class > 标签
3.1.1、标签选择器
格式:选择一类标签 标签
{}
- html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <h1>学习</h1> <p>java</p> </body> </html>
- css
h1{ color: red; background: aquamarine; border-radius: 30px; } p{ font-size: 20px; color: red; }
3.1.2、类选择器
选择所有class一致的标签,跨标签,格式:.类名
{}
- html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <!-- 类选择器的格式 .class的名称{} 好处:可以多个标签归类,是同一个class,可以复用 --> <h1 class="h1">学习</h1> <h1 class="h2">学习</h1> <h1 class="h1">学习</h1> </body> </html>
- css
.h1{ color: red; background: aquamarine; border-radius: 30px; } .h2{ font-size: 20px; color: red; }
3.1.3、Id选择器
全局唯一,格式:#id名
{}
- html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <!-- id选择器:id必须保证全局唯一--> <!-- #id名称{}--> <!-- 不遵循就近原则,优先级是固定的--> <!-- id选择器 > 类选择器 > 标签选择器--> <h1 id="h1">学习1</h1> <h1 id="h2">学习2</h1> <p id="h3">学习3</p> </body> </html>
- css
#h1{ color: red; background: aquamarine; border-radius: 30px; } #h2{ font-size: 20px; color: red; } #h3{ color: azure; background: blue; }
3.2、层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/style2.css">
</head>
<body>
<p>p1</p>
<p class="p">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8/p>
</body>
</html>'
3.2.1、后代选择器
注:某个元素的后面
/*后代选择器*/
body p{
background: red;
}
3.2.2、 子选择器(一代)
/*子选择器*/
body>p{
background: blue;
}
3.2.3、 相邻的兄弟选择器( 同辈)
/相邻兄弟选择器:只有一个,相邻(向下)/
/*相邻兄弟选择器(p):只有一个,相邻(向下)*/
.p +p{
background: aquamarine;
}
3.2.4、 通用选择器
/*通用兄弟选择器,当前选中元素的向下的所有兄弟(p)元素*/
.p~p{
background: #ffdb7f;
}
3.3、结构伪类选择器
伪类:在css中 带:
- html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html>
- css
/*ul的第一个子元素*/ ul li:first-child{ color: blue; } /*ul的最后一个子元素*/ ul li:last-child{ color: red; } /*选中p1:定位到父元素,选择当前的第一个元素 选择当前p元素 的父级元素,选中父级元素的第一个,并且是当前元素才生效! */ p:nth-child(1){ background: orange; } /*选中父元素下的,第2个p元素*/ p:nth-of-type(2){ background: red; }
3.4、属性选择器(常用)
id + class结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
display: block;
height: 50px;
width: 50px;
float:left;
border-radius: 10px;
background: blue;
text-align: center;
color: beige;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名,属性名=属性值(正则)
=表示绝对等于
*=表示包含
^=表示以...开头
$=表示以...结尾
存在id属性的元素 a[]{}
*/
/* a[id]{
background: red;
}*/
/*id=first的元素*/
/* a[id=first]{
background: aqua;
}*/
/*class中有links元素*/
/* a[class = "links item2 first2"]{
background: orange;
}*/
/*a[class*="links"]{
background: black ;
}*/
/*选中href中以http开头的元素*/
a[href^="http"]{
background: orange;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="/adad/faf" class="links item2 first2" >2</a>
<a href="qwe123" class="links item3 first3" >3</a>
<a href="eweqe" class="links item4 first4" >4</a>
<a href="rrrrr" class="links item5 first5" >5</a>
<a href="ttt" class="links item6 first6" >6</a>
<a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>
4、美化网页元素
目的:提高用户体验
4.1、span标签
- 重点要突出的字,使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
/*
font-family:字体
font-size:字体大小
font-weight:字体粗细
*/
font-family: 隶书;
font-size: 30px;
color: aliceblue;
background-color: blue;
font-weight: bolder;
}
</style>
</head>
<body>
欢迎学习<span>Java</span>
</body>
</html>
- 字体样式
font-weight:bolder;/*也可以填px,但不能超过900,相当于bloder*/
/*常用写法:*/
font:oblique bloder 12px "楷体"
- 字体属性:
font
属性是以下属性的简写属性:font-style
(规定文本的字体样式)font-variant
(规定是否以小型大写字母的字体显示文本)font-weight
(规定字体的粗细)font-size/line-height
(字体大小/行高)font-family
(规定文本的字体系列(字体族))
注意:font-size
和font-family
的值是必需的。如果缺少其他值之一,则会使用其默认值
4.2、文本样式
- 颜色–>color
- 文本对齐方式
- text-align(水平居中):center
- 垂直居中:height==line-height
- 首行缩进–>text-indent:2em
- 行高–>line-height:300px;
- 划线–>text-decoration
- 下划线:text-decoration: underline
- 中划线:text-decoration: line-through
- 上划线:text-decoration: overline
h1{
text-align: center;/*文字水平居中*/
background-color: blue;/*背景颜色*/
color:white;/*字体颜色*/
/*通过height==line-height可设置文字垂直居中*/
height: 300px;
line-height: 300px;
}
.p1{
text-indent: 2em;/*首行缩进:1em=一个字*/
text-decoration: line-through;
}
.p3{
text-decoration: underline;/*下划线*/
}
.p4{
text-decoration: line-through;/*中划线*/
}
.p5{
text-decoration: overline;/*上划线*/
}
a{
text-decoration: none;/*超链接去除下划线*/
}
- 图片、文字水平对齐
img,span{vetical-align:middle}
4.3、阴影和超链接伪类
4.3.1、超链接伪类
a{
/*超链接有默认的颜色*/
text-decoration: none;
color: #000000;
}
a:hover{
/*鼠标悬浮的状态时字体颜色(需要记住)*/
color: orange;
}
a:active{
/*鼠标按住未释放的状态字体颜色*/
color: green;
}
a:visited{
/*点击之后的状态字体颜色*/
color: red;
}
4.3.2、阴影
.h{
/* 第一个参数:表示水平偏移
第二个参数:表示垂直偏移
第三个参数:表示模糊半径
第四个参数:表示颜色
*/
text-shadow: 5px 5px 5px red;
}
4.4、列表ul li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*list-style{
none:去掉原点
circle:空心圆
decimal:数字
square:正方形
}*/
ul li{
height:30px;
text-indent: 2em;
list-style: square;
}
</style>
</head>
<body>
<p>
<div id="nav">123</div>
<ul>
<li>Java</li>
<li>Python</li>
<li>C#</li>
</ul>
</p>
</body>
</html>
4.5、背景
4.5.1、背景颜色(background-color)
- 透明度(
opacity
):取值范围为 0.0 - 1.0。值越低,越透明
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightblue;
opacity: 0.3;
}
h1 {
background-color: green;
}
div {
background-color: blue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color 实例</h1>
<div>
这是 div 元素内的文本。
<p>本段有其自己的背景色。</p>
我们仍然在 div 元素中。
</div>
</body>
</html>
4.5.2、背景图片(background-image)
- 默认情况下,图像会重复(默认情况下,background-image 属性在水平和垂直方向上都重复图像),以覆盖整个元素
body { background-image: url("paper.gif"); }
4.5.3、背景图片平铺(background-repeat)
- background-image:url("");/默认是全部平铺的/
- background-repeat:repeat-x/水平平铺/
- background-repeat:repeat-y/垂直平铺/
- background-repeat:no-repeat/不平铺/
/*仅在水平方向重复*/ body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } /*背景图像仅显示一次*/ body { background-image: url("tree.png"); background-repeat: no-repeat; }
4.5.4、背景图片位置(background-position)
用于指定背景图像的位置
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
4.5.5、背景附着(background-attachment)
指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)
- 指定应该固定背景图像
body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }
- 指定背景图像应随页面的其余部分一起滚动
body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: scroll; }
4.5.6、背景简写
如需缩短代码,也可以在一个属性中指定所有背景属性。它被称为简写属性
在使用简写属性时,属性值的顺序为:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
注:属性值之一缺失并不要紧,只要按照此顺序设置其他值即可
body {
background: #ffffff url("tree.png") no-repeat right top;
}
4.6、渐变
5、盒子模型
5.1、什么是盒子模型
说明:
Margin(外边距
- 清除边框外的区域,外边距是透明的Border(边框)
- 围绕在内边距和内容外的边框。Padding(内边距)
- 清除内容周围的区域,内边距是透明的。Content(内容)
- 盒子的内容,显示文本和图像。
5.2、边框(Border)
5.2.1、CSS 边框样式(border-style)
border-style
属性指定要显示的边框类型
允许以下值:
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
5.2.2、CSS 边框宽度
border-width
属性指定四个边框的宽度
- 可以将宽度设置为特定大小(以 px、pt、cm、em 计),也可以使用以下三个预定义值之一:thin、medium 或 thick
p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style: dotted; border-width: thick; }
- 特定边的宽度
- border-width 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)
p.one { border-style: solid; border-width: 5px 20px; /* 上边框和下边框为 5px,其他边为 20px */ } p.two { border-style: solid; border-width: 20px 5px; /* 上边框和下边框为 20px,其他边为 5px */ } p.three { border-style: solid; border-width: 25px 10px 4px 35px; /* 上边框 25px,右边框 10px,下边框 4px,左边框 35px */ }
- border-width 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)
5.2.3、CSS 边框颜色
border-color
属性用于设置四个边框的颜
注释:如果未设置border-color
,则它将继承元素的颜色p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: dotted; border-color: blue; }
- ·border-color ·属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)
p.one { border-style: solid; border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */ }
5.2.4、各个边框
- 单独的边
p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }
- 不同的边框样式
/* 四个值:依次上 下 左 右 */ p { border-style: dotted solid double dashed; } /* 三个值:上 左右 下 */ p { border-style: dotted solid double; } /* 两个值 上下 左右 */ p { border-style: dotted solid; } /* 一个值 上下左右 */ p { border-style: dotted; }
5.2.5、各个边框简写边框属性
border
属性是以下各个边框属性的简写属性
border-width
border-style
(必需)- border-color`
p {
border: 5px solid red;
}
- 单个边框简写边框属性
p {
border-left: 6px solid red;
background-color: lightgrey;
}
5.2.6、CSS 圆角边框
border-radius
属性用于向元素添加圆角边框
p {
border: 2px solid red;
border-radius: 5px;
}
5.3、外边距(Margin)
CSS margin 属性用于在任何定义的边框之外,为元素周围创建空间
5.3.1、 Margin - 单独的边
- margin-top
- margin-right
- margin-bottom
- margin-left
5.3.2、 Margin - 边的值(允许负值)
- auto - 浏览器来计算外边距
- length - 以 px、pt、cm 等单位指定外边距
- % - 指定以包含元素宽度的百分比计的外边距
- inherit - 指定应从父元素继承外边距
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
5.3.3、 Margin - 简写属性
/*
上:25px
左右:75px
下:100px
*/
p {
margin: 25px 75px 100px;
}
5.3.4、Margin - auto 值
将 margin 属性设置为auto
,以使元素在其容器中水平居中
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
5.3.5、Margin - inherit 值
外边距继承自父元素
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
5.3.5、CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者,即二者取最大
- 一个元素出现在另一个元素上面时
- 一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开)
- 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
5.4、内边距(Padding)
CSS padding
属性用于在任何定义的边界内的元素内容周围生成空间。
5.4.1、 Padding - 单独的边
padding-top
padding-right
padding-bottom
padding-left
5.4.2、 Padding - 边的值(不允许负值)
- length - 以 px、pt、cm 等单位指定内边距
- % - 指定以包含元素宽度的百分比计的内边距
- inherit - 指定应从父元素继承内边距
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
5.4.3、Padding - 简写属性
/*
上内边距是 25px
右和左内边距是 50px
下内边距是 75px
*/
div {
padding: 25px 50px 75px;
}
5.4.4、内边距和元素宽度
CSS width
属性指定元素内容区域的宽度,内容区域是元素(盒模型)的内边距
、边框
和外边距
内的部分
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
解析:该 <div>
元素的宽度为 300px。但是,<div>
元素的实际宽度将是 350px(300px + 左内边距 25px + 右内边距 25px),如果要保证宽度保持为 300px,可以使用 box-sizing
属性。这将导致元素保持其宽度。如果增加内边距,则可用的内容空间会减少
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
此时,内边距无论变大变小,div的宽度为300px,内容空间会发生改变
6、浮动
6.1、display 属性(重要)
display
属性是用于控制布局的最重要的 CSS 属性- display 属性规定是否/如何显示元素
每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为block
或inline
6.1.1、块级元素(block element)
块级元素总是从新行开始,并占据可用的全部宽度(尽可能向左和向右伸展)
例子:
<div>
<h1>
-<h6>
<p>
<form>
<header>
<footer>
<section>
6.1.2、行内元素(inline element)
内联元素不从新行开始,仅占用所需的宽度
例子:
<span>
<a>
<img>
6.1.3、Display: none(同时该元素的位置也删除掉了)
通常与 JavaScript 一起使用,以隐藏和显示元素,而无需删除和重新创建它们。
h1 {
display: none;
}
- visibility:hidden:同样是隐藏元素,但该隐藏执行后元素的位置还保留
6.1.3、Display: inline
将块元素更改为行内元素
li {
display: inline;
}
6.1.3、Display: block
注意:设置元素的 display 属性仅会更改元素的显示方式,而不会更改元素的种类。因此,带有 display: block; 的行内元素不允许在其中包含其他块元素
6.1.4、 block、inline、inline-block
- display:block–>一般用于将行内元素转为块元素使得该行内元素具备块元素的特性(此元素将显示为块级元素,此元素前后会带有换行符,具备宽高等属性)
- display:inline–>将块元素转换为行内元素使其具备行内元素的特性(。此元素会被显示为内联元素,元素前后没有换行符,不具备宽高属性)
- ==display:inline-block=–>块元素具备块元素特性和行内元素特性(行内块元素:没有换行符,具备宽高属性)
6.2、position 属性
position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)
有五个不同的位置值:static
,relative
,fixed
,absolute
,sticky
- 元素其实是使用
top
、bottom
、left
和right
属性定位的。但是,除非首先设置了 position 属性,否则这些属性将不起作用。根据不同的 position 值,它们的工作方式也不同
6.2.1、 position: static
- HTML 元素默认情况下的定位方式为 static(静态)
- 静态定位的元素不受
top
、bottom
、left
和right
属性的影响
-position: static
; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位:
div.static {
position: static;
border: 3px solid #73AD21;
}
6.2.2、 position: relative(元素本身位置保留)
position: relative
; 的元素相对于其正常位置进行定位- 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任- 何空间
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
6.2.3、position: fixed(元素本身位置不保留)
position: fixed
; 的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。- 固定定位的元素不会在页面中通常应放置的位置上留出空隙。
- 最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏,不需使用margin、border、padding
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
6.2.4、position: absolute(元素本身位置不保留)
position: absolute;
的元素相对于最近的定位祖先元素进行定位(而不是相对于视口定位,如 fixed)。如果元素的父级没有设置定位属性,则依据body
元素左上角作为参考进行定位。
然而,如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。
解析:如果它的父元素设置了除static
之外的定位,比如position:relative或position:absolute及position:fixed
,那么它就会相对于它的父元素来定位,位置通过left , top ,right ,bottom
属性来规定,如果它的父元素没有设置定位,那么就得看它父元素的父元素是否有设置定位,如果还是没有就继续向更高层的祖先元素类推,总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素,如果所有的祖先元素都没有以上三种定位中的其中一种定位,那么它就会相对于文档body
来定位(并非相对于浏览器窗口,相对于窗口定位的是fixed)
注意:“被定位的”元素是其位置除 static 以外的任何元素。
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
left:100px;
top:100px
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
6.2.5、relative–absolute
-
1、文本流位置是否存在
- 定位为
relative
的元素脱离正常的文本流中,但其在文本流中的位置依然存在
- 定位为
absolute
的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在
- 定位为
-
2、定位
relative
定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式
absolute
定位是从父元素开始查找,如果父元素不为static
定位,则相对于父元素,如果父元素为static
定位,则继续向外寻找不为static
定位的元素,如果其父层中都未定义absolute
或relativ
e,则其将相对body
进行定位
6.2.6、position: sticky
position: sticky
; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对(relative
)和固定(fixed
)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置(比如 position:fixed
)
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
6.2.7、重叠元素
在对元素进行定位时,它们可以与其他元素重叠。
z-index
属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面)。
元素可以设置正或负的堆叠顺序:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
注意:如果两个定位的元素重叠而未指定 z-index,则位于 HTML 代码中最后的元素将显示在顶部。
6.3、Overflow属性
overflow
属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条- 属性值:
visible
- 默认。溢出没有被剪裁。内容在元素框外渲染hidden
- 溢出被剪裁,其余内容将不可见scroll
- 溢出被剪裁,同时添加滚动条以查看其余内容auto
- 与 scroll 类似,但仅在必要时添加滚动条
注释:overflow 属性仅适用于具有指定高度的块元素
6.3.1、overflow: visible
默认情况下,溢出是可见的(visible
),这意味着它不会被裁剪,而是在元素框外渲染:
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
6.3.2、overflow: hidden
如果使用 hidden
值,溢出会被裁剪,其余内容被隐藏:
div {
overflow: hidden;
}
6.3.3、overflow: scroll
如果将值设置为 scroll
,溢出将被裁剪,并添加滚动条以便在框内滚动。请注意,这将在水平和垂直方向上添加一个滚动条(即使您不需要它)
div {
overflow: scroll;
}
6.3.4、overflow: auto
auto
值类似于 scroll
,但是它仅在必要时添加滚动条:
div {
overflow: auto;
}
6.3.5、overflow-x 和 overflow-y
overflow-x
和overflow-y
属性规定是仅水平还是垂直地(或同时)更改内容的溢出overflow-x
指定如何处理内容的左/右边缘。overflow-y
指定如何处理内容的上/下边缘。
div {
overflow-x: hidden; /* 隐藏水平滚动栏 */
overflow-y: scroll; /* 添加垂直滚动栏 */
}
6.4、浮动和清除
6.4.1、浮动 float
float
属性规定元素如何浮动, 用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里
- 属性:
left
- 元素浮动到其容器的左侧right
- 元素浮动在其容器的右侧- `none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。
inherit
- 元素继承其父级的 float 值
- 用法:最简单的用法是,float 属性可实现(报纸上)文字包围图片的效果。
6.4.2、清除浮动 clear
clear
属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧
- clear 属性可设置以下值之一:
none
- 允许两侧都有浮动元素。默认值left
- 左侧不允许浮动元素right
- 右侧不允许浮动元素both
- 左侧或右侧均不允许浮动元素inherit
- 元素继承其父级的 clear 值
- 用法:使用 clear 属性的最常见用法是在元素上使用了 float 属性之后
在清除浮动时,应该对清除与浮动进行匹配:如果某个元素浮动到左侧,则应清除左侧。您的浮动元素会继续浮动,但是被清除的元素将显示在其下方
6.4.3、clearfix Hack
如果一个元素比包含它的元素高,并且它是浮动的,它将“溢出”到其容器之外:
然后我们可以向包含元素添加 overflow: auto;
,来解决此问题:
.clearfix {
overflow: auto;
}