HTML+CSS
目录
HTML
HTML基本格式
<!--文档类型声明标签-->
<!DOCTYPE html>
<!--en:英文网站;zh-CN:中文网站;fr:法文网站-->
<html lang="en">
<head>
<meta charset="UTF-8"> <!--UTF-8:万国码-->
<title>Document</title>
</head>
<body>
</body>
</html>
字体、图像标签
- 标题标签:
<h1>~<h6> </h1>~<h6>
- 段落标签:
<p></p>
- 加粗标签:
<strong></strong> / <b></b>
- 倾斜标签:
<em></em> / <i></i>
- 删除线标签:
<del></del> / <s></s>
- 下划线标签:
<ins></ins> / <u></u>
- 布局标签:1、
<div></div>
(一行只能放一个) 2、<span></span>
(一行可以放多个 ) - 图像标签:
<img src="图像路径">
1、alt属性:替代的文本
2、width属性:规定图像宽度
3、title属性:显示图像信息
超链接
- 超链接:
<a href="链接网站">网站名称</a>
1、target属性:_blank(新窗口打开链接)、_self(同一网页打开链接)
锚点链接
常用于目录,返回目录
- 例:
<a href="one">标题</a>
<h3 id ="one">标题</h3>
特殊字符
- 空格字符:
- "<"字符:
<
- ">"字符:
>
表格标签
表格用于显示、展示数据
- 表格标签:
<table></table>
(定义表格的标签)
表格中的标题:<th></th>
表格中的行:<tr></tr>
表格中的data:<td></td>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is my 表格</title>
</head>
<body>
<!--表格用于显示、展示数据的-->
<!--"<table></table>":用于定义表格的标签-->
<!--"<tr></tr>":用于定义表格中的行-->
<!--"<td></td>":用于定义表格中的单元格table data-->
<!--"<th></th>":表头单元格,加粗,居中显示table head-->
<!-- align="center":表格在中间显示"left":左对齐显示;"right":右对齐显示, -->
<!-- border="1":表格加一个边框 -->
<!-- cellpadding="像素值":内容与边框之间的距离 -->
<!-- cellspacing="像素值":单元格之间的距离 -->
<!-- width="像素值":表格的宽度 -->
<!-- height="像素值":表格的高度 -->
<table align="center" border="1" cellpadding="10" cellspacing="0" width="300" height="200">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>王一</td> <td>女</td> <td>18</td></tr>
<tr><td>王二</td> <td>女</td> <td>15</td></tr>
<tr><td>王三</td> <td>男</td> <td>19</td></tr>
</table>
</body>
</html>
- 将table分成两部分
<thead></thead>
<tbody></tbody>
合并单元格标签
- 跨列合并单元格:
<td clospan="合并的单元格数量">
- 跨行合并单元格:
<td rowspan="合并的单元格数量">
列表标签
列表:无序列表、有序列表、自定义列表
列表用来布局的
- 无序列表:
<ul>
<li>榴莲</li>
<li>臭豆腐</li>
<li>雪梨</li>
</ul>
1、<ul>
里面只能放<li>
标签,<li>
里面可以任何标签
- 有序列表
<ol>
<li>王一</li>
<li>王二</li>
<li>王三</li>
</ol>
1、<ol>
里面只能放<li>
标签,<li>
里面可以放任何标签
- 自定义列表
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
1、<dl>
相当于一个容器,<dt>
最大的,<dd>
围绕<dt>
进行说明
2、<dl>
中只能有<dt>
和<dd>
,经常是一个<dt>
,多个<dd>
<label>
标签为 input 元素定义标注(标记)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <label>元素定义标注 -->
<label for="text">用户名:</label><input type="text" id ="text"><br>
<label for="nan">男</label><input type="radio" id="nan" name="sex">
<label for="nv">女</label><input type="radio" id="nv" name="sex">
<!-- 下拉列表 -->
<form action="">
籍贯:
<select>
<option>北京</option>
<option>山东</option>
<option selected="selected">广东</option> <!--<selected="selected">使之处于选定状态-->
<option>天津</option>
</select>
</form>
</body>
</html>
textatrea元素
<textarea>
标签定义多行的文本输入控件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form >
今日反馈:
<!--cols:每行可以显示多少字符-->
<!-- rows可以显示多少行 -->
<textarea cols="40" rows="3">请输入你的反馈</textarea><br>
</form>
</body>
</html>
CSS
CSS语法规范
<style>
/* 选择器{样式} */
/* 给谁改样式{概什么样式} */
p {
color: red;
/* 修改文字大小为12像素 */
font-size: 12px;
}
</style>
类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用 */
.red{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="red">往往</li>
<li>王一</li>
<li>王二</li>
<li class="red">1111</li>
</ul>
</body>
</html>
- 在
<style>
中定义类型
<style>
.red{
color: red;
}
</style>
再进行调用该选择
<li class="red">姓名</li>
- 多类名
<head>
<title>Document</title>
<style>
.red{
color: red;
}
.font35{
font-size :35px;
}
</style>
</head>
<body>
<div class="red font35">LUNA</div>
<div></div>
<div></div>
</body>
id选择器
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
<head>
<title>Document</title>
<style>
/* id选择器的口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用 */
#pink{
color: pink;
}
</style>
</head>
<body>
<div id="pink">luna</div>
</body>
</html>
通配符选择器
如果希望所有的元素都符合某一种样式,可以使用通配符选择器。通配符选择器不需要调用。
*{
color: red;
}
字体属性
- 字体格式:
font-family:"Miscrosoft YaHei";
- 字体大小:
font-size: 16px;
- 字体加粗:
font-weight: 400;
(加粗是700,不加粗是400) - 字体不倾斜:
font-style: normal;
- 字体倾斜:
font-style: italic;
- font符合属性写法:
font:font-style font-weight font-size/line-height font-family;
例子:
<head>
<title>Document</title>
<style>
/* div{
font-style(字体样式): italic;
font-size(字号): 16px;
font-weight(字体粗细): 700;
font-family(字体): "Microsoft YaHei";
} */
/* 复合属性:简写的方式,节约代码 */
/* font:font-style font-weight font-size/line-height font-family */
div{
font: italic 700 16px 'Microsoft YaHei';
}
</style>
</head>
<body>
<div>字体属性</div>
</body>
</html>
对齐属性
h1{
/* 本质是让h1盒子里面的文字水平居中对齐 */
text-align: center;
}
装饰文本
- 下划线:
text-decoration: underline;
- 删除线:
text-decoration: line-through;
- 上划线:
text-decoration: overline;
- 取消下划线:
text-decoration: none;
文本缩进
- 第一行首行缩进距离:
text-indent: 10px;
- 缩进当前元素的两个文字大小距离:
text-indent: 2em;
p{
/* 文本的第一行首行缩进多少距离 */
text-indent: 20px; /*若为赋值则是往前进,正值往后退 */
/* 如果此时写了2em,则是缩进当前元素两个文字大小的距离 */
text-indent: 2em;
}
行间距
line-height: 20px;
行内样式表
<p style="color: red; font-size: 25px;">行内样式表</p>
外部样式表
在.html文件中:<link rel="stylesheet" href="style.css">
在.css文件中:
/* 这个CSS文件里面只有样式没有标签 */
div{
color: pink;
}
Emmet语法
- 提高html/CSS的编写速度
- 快速生成HTML结构语法
1、生成标签:标签名+tab
2、生成多个相同标签:标签名*数量
3、若有父子级关系,用>即可:ul>li
4、兄弟关系标签,用+:div+p
5、带有类名或者id名的,直接写.demo或者#demo即可
6、若生成的div有顺序:用自增符号$
eg:.demo$*5
7、若生成的标签内部写内容可以用{ }表示
复合选择器
把基础选择器组合形成的
常用的复合选择器:后代选择器、子选择器、伪类选择器…
后代选择器
- 又称包含选择器
- 语法:
元素1 元素2 {样式声明}
- 例如:
ul li {样式声明} /*选择ul中的所有li标签元素*/
1、元素1和元素2要用空格隔开
2、元素1是父级、元素2是子级
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">saaaaaaaa</a>
<ul>
<a href="#">sss</a>
<li>jjjjj</li>
<li>jjjjj</li>
<li>jjjjj</li>
<li>jjjjj</li>
</ul>
</div>
</body>
</html>
子选择器
- 又称子元素选择器
- 语法:
元素1>元素2 {样式声明}
选择元素1里面的所有直接后代元素2
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hot>a {
color: red;
}
</style>
</head>
<body>
<div class="hot">
<a href="#">A1</a>
<ul>
<li><a href="#">A2</a></li>
<li><a href="#">A3</a></li>
</ul>
</div>
</body>
</html>
并集选择器
可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。
- 通过“,”进行分割
- 语法:
元素1,元素2 {样式声明}
- 例子:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 要求1:把熊大和熊二改成粉色 */
/* div,
p {
color: pink;
} */
/* 要求2:把熊大和熊二改成粉色,还有小猪一家改成粉色 */
div,
p,
.pig li {
color: pink;
}
/* 约定的语法规范:并集选择器竖着写 */
/* 一定要注意最后一个选择器不需要加逗号 */
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
</html>
伪类选择器
用于向某些选择器添加特殊的效果
- 伪类选择器书写的最大特点是用冒号(:)表示,比如:hover、:first-child
- 伪类选择器有很多种,如链接伪类、结构伪类等
链接伪类
a:link /*选择所有未被访问的链接*/
a:visited/*选择所有已被访问的链接*/
a:hover/*选择鼠标指针位于其上的链接*/
a:active/*选择活动链接(鼠标按下未弹起的链接)*/
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1、未访问的链接a:link 把没有访问过的链接选出来*/
a:link {
color: #333;
text-decoration: none;
}
/* 2、a:visited选择点击过的(访问过的链接) */
a:visited {
color: orange;
}
/*3、 a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 4、a:active 选择的是鼠标正在按下还没有弹起鼠标的链接 */
a:active {
color: rgb(128, 0, 0);
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a><br>
<a href="##">www</a>
</body>
</html>
- 链接伪类选择器的注意事项
1、按照LVHA顺序进行书写
2、a链接需要单独指定样式
focus伪类选择器
用于选取获得焦点的表单元素
- 焦点就是光标,一般情况
<input>
类表单元素才能获取 - 语法:
input:focus{
background-color:yellow;
}
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* 把多的光标的input表单元素选取出来 */
input:focus {
background-color: pink;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
CSS元素显示模式
-
元素显示模式
1)元素以什么方式进行显示
2)HTML元素一般分为块元素和行内元素两种类型 -
块元素:
1、独占一行
2、高度、宽度、内外边距都可以控制
3、容器默认是容器(父级宽度)的100%
4、是一个容器及盒子,里面可以放行内或块级元素
5、文字类的元素内不允许使用块级元素
如:<p>
里面不能放<div>
-
行内元素:
1、相邻行内元素在一行上,一行可以显示多个
2、高、宽直接设置是无效的
3、默认宽度就是本身内容的宽度
4、行内元素只能容纳文本或者其他的行内元素
5、链接里面不能再放链接
6、<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全 -
行内块元素
1、<img />
<input />
<td>
都是行内块元素
2、一行上可以有多个块元素
3、默认宽度就是本身内容的宽度
4、高度、宽度、内外边距都可以控制 -
元素显示模式转换
1、一个模式的元素需要另一种模式的特征
2、转换为块元素:display:block;
3、转换为行内元素:display:inline;
4、转换为行内块元素:display:inline-block;
-
单行文字垂直居中的代码
让文字的行高等于盒子的高度
div{
height: 42px;
line-height: 42px;
}
-
CSS背景
1、背景颜色:background-color:颜色值;
2、背景图片:便于控制位置(小图片、超大图片)
语法:background-image:url(图片地址)
没有背景图片则是background-image:none
-
背景平铺
1、在HTML页面上对背景图像进行平铺
语法:background-repeat:repeat | no-repeat | repeat-x | repeat-y
repeat:平铺(默认)
no-repeat:不平铺
repeat-x:沿x轴平铺
repeat-y:沿y轴平铺 -
背景位置
1、改变图片在背景中的位置
语法:background-position: x y;
x、y:可以是方位名词或精确单位 -
边框属性border:
语法:
border-width
border-style
border-color
-
内边距padding:所有内边距属性
语法:padding
-
外边距margin:盒子间的距离
语法:margin
1、外边距可以让块级盒子水平居中对齐,但需要满足:
1)盒子必须指定宽度
2)盒子左右的外边距都设置为auto
2、嵌套元素垂直外边距塌陷:
1)overflow:hidden
2)为父元素定义上边框
3)为父元素定义上内边框 -
清除内外边距
圆角边框
语法:border-radius:length;
-
radius:半径(⚪与边框交集形成圆角效果)
-
单位可以是数值或者百分比
-
分开写:border-top-left-radius、border-top-right-radius…
盒子阴影
语法:box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:水平阴影距离
v-shadow:垂直阴影距离
blur:阴影虚实
spread:阴影的尺寸大小
color:阴影的颜色
inset:内阴影;外阴影是默认的,如果写了阴影会不出现
文字阴影
语法:text-shadow:h-shadow v-shadow blur color;
CSS浮动
- 浮动
多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
语法:选择器{dloat:属性值;}
1、属性值:left、right
2、特性:1)浮动元素会脱标(脱标、不保留原先的位置)
2)具有行内块元素的特性
CSS定位
- 定位组成
1、定位=定位模式+边偏移 - 静态定位
position:static;
- 相对定位:参照自己原来位置进行移动
position:relative;
- 绝对定位: 相对于祖先元素移动
positiong:absolute;
只要父元素有定位,则以最近一级的父元素为参考点
- 固定定位——①
固定于浏览器可视区位置
position:fixed;
1)跟父元素无关系
2)不随着滚动条滚动
3)不占有原先的位置
- 固定定位——②
固定盒子在版心右侧位置
1)left:50%
2)margin-left:版心宽度的一半距离 - 粘性定位
positon:sticky; top:10px;
1)以浏览器的可视窗口为参考点移动元素
2)占有原先的位置
3)必须添加top、left、right、bottom其中一个才有效
-
定位叠放次序z-index
z-index:1;
数值越大,盒子越靠上。默认是auto
数字后面不能加单位 -
绝对定位盒子居中水平垂直
-
定位的特殊特性
1 )行内元素添加绝对或者固定定位,可以直接设置高度和宽度;
2)块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小 -
脱标的盒子不对触发外边距塌陷
浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题 -
绝对定位(固定定位)会完全压住盒子
1)浮动元素只会压住下面标准流的盒子,但不会压住标准流盒子里面的文字(图片)
2)绝对定位(固定定位)会压住下面标准流的所有内容
CSS元素显示与隐藏
- display属性(隐藏元素后不占有原先位置)
1)display:none ;隐藏对象
2)display:block;转换为块级元素,显示元素 - visibility属性(隐藏元素后继续占有原来的位置)
1)visibility:visible;元素可视
2)visibility:hidden;元素隐藏 - overflow溢出
1)·overflow:visible
2)overflow:hidden
CSS精灵图
有效减少服务器接受和请求的次数,提高页面的加载速度
- 精灵图
- 字体图标:结构样式比较简单的小图标
CSS用户界面样式
- 鼠标样式cursor
li {cursor:pointer;}
例子:
<body>
<ul>
<li style="cursor:default;">小白鼠标样式</li>
<li style="cursor:pointer;">鼠标小手样式</li>
<li style="cursor:move;">鼠标移动样式</li>
<li style="cursor:text;">鼠标文本样式</li>
<li style="cursor: not-allowed;">鼠标禁止样式</li>
</ul>
</body>
- 取消表单轮廓线
input{outline:none;}
- 防止拖拽文本域resize
textarea {resize: none;}
-
vertical-align属性
经常用于设置图片或者表单(行内块元素)和文字垂直对齐 -
溢出的文字省略号显示
1、单行文本溢出显示省略号
/* 1、如果文字一行显示不完,也必须在一行内显示 */
white-space: nowrap;
/* 2、超出部分隐藏 */
overflow: hidden;
/* 3、文字溢出的时候用省略号显示 */
text-overflow: ellipsis;
2、多行文字溢出省略号显示