CSS
目录
CSS
1. HTML补充 frame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-HTMLframeset</title>
</head>
<!--
如果使用 frameset HTML 页面需要移除 body 标签
-->
<frameset rows="100px, *">
<!-- 第一个frame 是页面头 -->
<frame src="01-top.html">
<frameset cols="150px, *">
<frame src="01-left.html">
<frame src="01-right.html" name="show">
</frameset>
</frameset>
</html>
2. CSS
2.1 CSS 概述
层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。
CSS 可以用于美化 HTML 页面，同时可以采用模版。提高前端开发效率
2.2 CSS 的三种引入方式
行内样式表
利用 HTML 标签的 style 属性，在 style 属性中就是 CSS 样式
内联样式表
在 head 标签中，内置 style 标签，style 标签内容就是 CSS 样式
外联样式表
定义 .css 样式表文件，利用 link 连接对应的 .css 文件，在当前 HTML 页面引入 css 样式
权重
行内 > 内联 > 外联
就近原则
开发常用:
外联！！！
1. 外联样式可以作为模版，提供给众多页面使用
2. 外联样式表方便浏览器缓存，用户第一次访问页面 1.2 S 第二次 0.6 s 因为 CSS 文件可以缓存到浏览器中。下
一次访问无需从服务器获取。
3. 外联样式表可以降低企业成本！外联样式利用缓存机制，可以降低用户访问页面的流量需求，同时降低企业对应服务所
需的上行带宽需求，降低企业成本
2.3 CSS 选择器【重点】
明确当前 CSS 样式修饰哪些 HTML 标签内容
2.3.1 常用选择器
id选择器
class选择器
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-CSS常用选择器</title>
<style>
/*
id 选择器
#开头，直接跟上id值
*/
#div1 {
font-size: 30px;
color: hotpink;
}
/*
class 选择器
.开头 ，直接跟上class数据
*/
.sp1 {
font-size: 36px;
color: pink;
}
/*
标签选择器
直接安排标签名修饰对应标签
*/
p {
font-size: 50px;
color: greenyellow;
}
</style>
</head>
<body>
<!-- id 属性，在整个 HTML 页面中 id是一个唯一标记，不允许出现 id 属性值一致 -->
<div id="div1">今天去买一注彩票</div>
<hr>
<!-- class 属性，属性内容允许重复，可以认为 同 class 属性的标记认为是一类 -->
<span class="sp1">北平の融融ひめごと</span> <br>
<span class="sp1">北平の融融ひめごと</span> <br>
<span class="sp1">北平の融融ひめごと</span> <br>
<hr>
<p>北平の融融一本番</p>
<p>北平の融融一本番</p>
<p>北平の融融一本番</p>
</body>
</html>
2.3.2 属性选择器
根据 HTML 标签指定的属性进行约束操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-CSS属性选择器</title>
<style>
span {
color: greenyellow;
font-size: 32px;
}
/*
选择修饰标签为 input 标签
选择修饰的 input 标签要求存在属性 type
同时要求 type 属性值为 text
tips: 属性值 "" '' 都是 ok 的
*/
input[type="text"] {
background-color: black;
color: white;
font-size: 32px;
}
/*
选择修饰标签为 input 标签
选择修饰的 input 标签要求存在属性 type
同时要求 type 属性值为 password
*/
input[type='password'] {
background-color: hotpink;
color: yellow;
font-size: 32px;
}
/*
选择修饰标签为 font 标签
选择修饰的 font 标签要求存在属性 size
*/
font[size] {
/*font-family: 黑体;*/
color: green;
}
</style>
</head>
<body>
<form action="#" method="get">
<font size="5">数据提交</font> <br>
<span>用户: </span> <input type="text" name="username"> <br>
<span>密码: </span> <input type="password" name="password"> <br>
<input type="submit" value="提交">
</form>
</body>
</html>
2.3.4 伪类选择器
主要针对的是 a 标签，可以在 a 标签在不同的状态下有不同的效果
操作
a:link 链接状态/未操作状态
a:hover 鼠标悬浮状态
a:active 鼠标触发状态
a:visited 已访问状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-CSS伪类选择器</title>
<style>
a {
font-size: 32px;
text-decoration: none;
}
/*
伪类选择器
a:link 链接状态/未操作状态
a:hover 鼠标悬浮状态
a:active 鼠标触发状态
a:visited 已访问状态
顺序不允许更换，有可能会导致伪类选择器失效
*/
a:link {
color: hotpink;
}
a:hover {
color: purple;
}
a:active {
color: green;
}
a:visited {
color: skyblue;
}
</style>
</head>
<body>
<a href="https://www.jiayuan.com">北平and融融 ~~ 缘起</a>
</body>
</html>
2.3.4 层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-CSS层级选择器</title>
<style>
/*
层级选择器
不同的选择器使用空格隔开！！！
*/
#div1 .cls1 span {
font-size: 50px;
color: #BE0C11;
}
#div1 .cls2 span {
font-size: 50px;
color: #CC612A;
}
</style>
</head>
<body>
<!--
HTML 标签是一层一层包含
-->
<div id="div1">
<div class="cls1">
<span>火锅</span>
</div>
<div class="cls2">
<span>老碗面</span>
</div>
</div>
<span>中午你们吃啥</span>
</body>
</html>
2.3.5 并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-CSS并集选择器</title>
<style>
/* 并集选择器 */
div, span, p, h1 {
color: hotpink;
}
/* 选择器 id > class > 标签 */
.cls1, .cls2, #div1 {
font-size: 40px;
color: #DD2125;
}
</style>
</head>
<body>
<div>北平挺瘦的</div>
<span>北平挺瘦的</span> <br>
<p>北平挺瘦的</p>
<h1>北平挺瘦的</h1>
<hr>
<div class="cls1">北平挺瘦的</div>
<div id="div1">北平挺瘦的</div>
<span class="cls2">北平挺瘦的</span>
</body>
</html>
2.3.6 通配选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-CSS通配选择器</title>
<style>
/*
*
通配选择器，在整个 CSS 选择器中，权重最低
通常用于消除页面的默认内边距和外边距
*/
* {
font-size: 50px;
color: hotpink;
}
</style>
</head>
<body>
<div>北平被掏空了</div>
<span>北平被掏空了</span>
<p>北平被掏空了</p>
<h1>北平被掏空了</h1>
<font>北平被掏空了</font>
</body>
</html>
2.4 CSS 属性
2.4.1 文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-CSS文字属性</title>
<style>
/*
文字属性
font-size 字体大小
font-family 字体样式
font-style 斜体样式
font-weight 加粗样式
*/
div {
/*font-size: 50px;*/
/*font-family: 幼圆;*/
/*font-style: italic;*/
/*font-weight: bold;;*/
/*
font 可以替代以上几个属性
必须有字体大小和字体样式
*/
font: italic bold 50px 幼圆;
}
</style>
</head>
<body>
<div>《融平之夜》</div>
</body>
</html>
2.4.2 文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-CSS文本属性</title>
<style>
/*
文本属性:
color 文本颜色
text-decoration 文本修饰线 删除线，上划线，下划线
underline 下划线
line-through 删除线
overline 上划线
none 无修饰，可以用于去除 a 标签默认下划线
text-indent 缩进 常见 2em
text-align 对齐方式
left 左对齐 默认
center 居中对齐
right 右对齐
line-height 行高
可以根据所在元素高度，设置居中效果
text-shadow 文本阴影
X 方向偏移量 Y 方向偏移量 阴影散布/虚化效果 阴影颜色
*/
#div1 {
font: 50px 幼圆;
color: hotpink;
text-decoration: underline;
text-indent: 2em;
text-align: left;
line-height: 100px;
text-shadow: 0 0 10px black;
}
div {
height: 100px;
width: 1000px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="div1">北平是如何烹饪的</div>
</body>
</html>
2.4.3 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-CSS背景属性</title>
<style>
/*
background-color: 背景颜色
background-image: 背景图片
需要提供 url("");
是图片的路径，可以是网络路径，可以是本机路径
background-repeat: 背景是否重复和重复方式
no-repeat 不重复
repeat-x 横向重复
repeat-y 纵向重复
background-position: 背景定位
横向偏移 纵向偏移
*/
body {
/*background-color: darkgray;*/
background-image: url("https://img2.baidu.com/it/u=2090606195,1473750087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500");
/*background-image: url("http://img.mobiletrain.org/templates/mobiletrain/images/java2021/sh-32.jpg");*/
/*background-image: url("./img/L{9~3WP5BKZ_F6S[`UXX1OJ.gif");*/
background-repeat: no-repeat;
background-position: 100px 100px;
}
div {
font: 50px 宋体;
color: black;
}
</style>
</head>
<body>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
<div>王乾现在很跳，需要北平照顾一下~</div>
</body>
</html>
2.4.4 列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-CSS列表属性</title>
<style>
/*
列表属性:
list-style-type 列表标记样式
disc 默认 实心圆
circle 空心圆
square 方块
none 无标记
list-style-image 列表对应图片
url 连接图片
. 当前
.. 上级
list-style-position 列表标记是显式在页面内部还是外部
inside outside
*/
li {
/*
list-style-type: none;
list-style-image: url("./img/L{9~3WP5BKZ_F6S[`UXX1OJ.gif");
list-style-position: inside;
*/
list-style: inside url("./img/L{9~3WP5BKZ_F6S[`UXX1OJ.gif");
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>白酒</li>
<li>红酒</li>
<li>啤酒</li>
</ul>
</body>
</html>
2.4.5 尺寸属性
width
height
2.4.6 显示属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-CSS尺寸和显示属性</title>
<style>
div {
height: 100px;
background-color: darkgray;
/*
display 显示属性
none 不显示
block 块标签 修饰标签之后，具备宽高属性
inline 行内标签 修饰标签之后，不具备宽高属性
inline-block 行内块标签，不会单独成行，具备宽高属性
*/
display: inline-block;
}
span {
height: 100px;
background-color: darkgray;
display: block;
}
p {
/*display: none;*/
}
</style>
</head>
<body>
<!--
块标签
默认带有宽高属性
默认单独成行
-->
<div>周董需要解决大问题~~~</div>
<div>周董需要解决大问题~~~</div>
<div>周董需要解决大问题~~~</div>
<div>周董需要解决大问题~~~</div>
<hr>
<!--
行内标签
默认情况下不具备宽高属性
非单独成行元素
-->
<span>周董需要解决大问题之后，解决吃的问题</span>
<p>
悠悠岁月愁，一杯二锅头
</p>
</body>
</html>
2.4.7 轮廓属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-CSS轮廓属性</title>
<style>
div {
width: 200px;
height: 200px;
background-color: hotpink;
/*border: 1px darkgray solid;*/
/*
outline-style: 样式 实线 虚线 dotted 点虚线 dashed 线虚线
outline-color: 颜色
outline-width: 宽度
outline: 颜色，样式，宽度
*/
outline: red solid 1px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.4.8 浮动属性 详见代码
2.4.9 定位属性 详见代码
3. 盒子模型
3.1 盒子模型图例
3.2 border 边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-CSS盒子模型边框</title>
<style>
div {
width: 200px;
height: 200px;
background-color: lightblue;
/*
border-top: 顶部边框
border-left: 左侧边框
border-right: 右侧边框
border-bottom: 底部边框
border-top: 10px solid darkgray;
border-right: 5px solid black;
border-left: 15px solid hotpink;
border-bottom: 20px solid aqua;
*/
border: 10px solid #FF4400;
/*
倒角
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
*/
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.2 padding 内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-CSS盒子模型内边距</title>
<style>
div {
width: 200px;
height: 200px;
border: 10px solid darkgray;
background-color: skyblue;
/*
padding-left: 50px;
padding-top: 100px;
padding-right: 150px;
padding-bottom: 200px;
一个数据 四边齐
两个数据 第一个数据控制上下，第二个数据控制左右
三个数据 第一个数据控制上, 第二个数据控制左右, 第三个数据控制下
四个数据 上右下左 顺时针结构
*/
padding: 100px 50px 150px 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.2 margin 外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-CSS盒子模型外边距</title>
<style>
/* 去除HTML标签自带的内边距和外边距，body 自带 8px 边距*/
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
border: 10px solid #999999;
background-color: skyblue;
/*
margin-left: 10px;
margin-right: 50px;
margin-top: 100px;
margin-bottom: 200px;
一个数据 四边齐
两个数据 第一个数据控制上下，第二个数据控制左右
三个数据 第一个数据控制上, 第二个数据控制左右, 第三个数据控制下
四个数据 上右下左 顺时针结构
*/
margin: 10px 50px 100px 200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div style="width: 200px; height: 200px; background-color: red"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-CSS盒子模型外边距案例</title>
<style>
* {
margin: 0;
padding: 0;
}
.table {
width: 100%;
height: 260px;
}
.element {
width: 200px;
height: 200px;
border: 10px solid #888888;
float: left;
/*
margin 外边距设置 左右横向外边距是叠加的！！！
margin-left: 20px;
margin-right: 30px;
*/
margin-top: 10px;
margin-left: 20px;
}
.li {
width: 150px;
height: 150px;
border: 5px solid skyblue;
background-color: aqua;
color: white;
font-size: 60px;
line-height: 150px;
}
</style>
</head>
<body>
<div class="table">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
<!-- 上下纵向 margin 塌陷原则，或者说取较大值原则 -->
<div class="li" style="margin-bottom: 50px">A</div>
<div class="li" style="margin-top: 100px">B</div>
</body>
</html>
