一、CSS编写位置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 3.css的外部样式 -->
<link rel="stylesheet" href="./position.css">
<!--
style按照标准是写在head里的
在css要带上单位px，否则不起效果
-->
<style>
h2{
color: red;
font-size: 20px;
}
h3{
color: blue;
}
</style>
</head>
<body>
<!-- 1、css的行内样式（不推荐） -->
<h1 style="color: aqua;font-size: 20px;">学习前端</h1>
<!-- 2、css的内部样式 -->
<h2>css的内部样式</h2>
<!--
3.css的外部样式 ，可以实现浏览器的缓存
-->
<h4>css外部</h4>
</body>
</html>二、样式表的优先级
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: black;
font-size: 30px;
}
/* h1{
color: black;
font-size: 30px;
} */
/* 后面的h1会覆盖前面的 */
/* h1{
color: black;
color: #000;
font-size: 30px;
} */
/* 后面的color会覆盖前面的 */
</style>
<link rel="stylesheet" href="./position.css">
<!-- 以上是link优先生效 -->
</head>
<body>
<!--
1.当同名属性发生冲突时，行内样式优先生效；
2.当内部样式和外部样式优先级相同，只是后来者居上！
3.同一个样式中，也遵循后来者居上
-->
<h1 style="color: red;">哈哈</h1>
</body>三、CSS选择器
3.1 通配选择器
*{
color: red;
}
/* 1、通配选择器：可以选择所有HTML标签 */3.2 元素选择器
p{
color: chartreuse;
} 3.3 类选择器
.c1{
color: cornflowerblue;
}
.c2{
font-size: 40px;
}<p class="c1 c2">哈哈哈</p>标签的class属性只能写一个，但是一个class值可以写多个,用空格分隔
class的属性值不能是纯数字，例如001不行，不要写中文
3.4 id选择器
/* id选择器
id选择器不能数字开头，多个元素的id不能重复
一个元素可以同时有class和id的
*/
#p1{
color: rebeccapurple;
}<p id="p1">啦啦</p>3.4 交集选择器
/*
交集选择器:语法就是基本选择器仅仅紧挨在一起
标签名必须写在前面，仅有一个元素选择器
*/
p.y1{
color: red;
}3.5 并集选择器
.p2,#p3{
background-color: bisque;
color: red;
}3.6 后代选择器
ul li{
color: red;
}
ul li a{
color: royalblue;
}<ul>
<li>男</li>
<li>女</li>
<li><a href="#">中性</a></li>
</ul>
<ol class="d1">
<li>a</li>
<li>b</li>
</ol>3.7 子代选择器
/*子代(只包含儿子)选择器*/
div > a{
color: red;
}
div>p>a{
color: skyblue;
} <div>
<a href="#">a</a>
<p><a href="#">哈哈</a></p>
</div>3.8 兄弟选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 相邻兄弟选择器 ：向下找紧紧相邻的节点 */
/* div+p {
color: red;
} */
/* 通用兄弟选择器：向下找所有的兄弟节点 */
div~p{
color: royalblue;
}
</style>
</head>
<body>
<p>兄弟0</p>
<div>兄弟1</div>
<p>兄弟3</p>
<p>兄弟4</p>
</body>
</html>3.9 属性选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 写法一 有这个属性*/
[title] {
color: red;
}
/* 写法二 title属性值为t3*/
[title="t3"]{
color: blue;
}
/* 写法三 :title属性值以a字母开头*/
[title^="a"]{
color: yellow;
}
/* 写法四:title属性值以u字母结尾*/
[title$="u"]{
color: green;
}
/* 写法五:title属性值有w就行*/
[title*="w"]{
color: chocolate;
}
</style>
</head>
<body>
<div title="t1">t1</div>
<div title="t2">t2</div>
<div title="t3">t3</div>
<div title="a1">a1</div>
<div title="a2">a2</div>
<div title="uu">u1</div>
<div title="au">u2</div>
<div title="awa">awa</div>
</body>
</html>3.10 伪类选择器
3.10.1 伪类选择器的概念
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/* 伪类：像类但不是类，是元素特殊状态的一种描述 */
/* 选中没有访问过的a元素 */
a:link{
color: orange;
}
/* 选中有访问过的a元素 */
a:visited{
color: gray;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.jd.com">京东</a>
</body>
</html>3.10.2 动态伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/* 伪类：像类但不是类，是元素特殊状态的一种描述 */
/* 选中没有访问过的a元素 */
a:link{
color: orange;
}
/* 选中有访问过的a元素 */
a:visited{
color: gray;
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover{
color: skyblue;
}
/*
选中激活（按下鼠标不松手）状态的a元素
*/
a:active{
color: green;
}
/* 以上顺序不能交换，否则不生效 */
span:hover{
color: green;
}
span:active{
color: red;
}
/* 获取焦点的focus只有表单类可以输入 */
input:focus,select:focus{
color: orange;
background-color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.jd.com">京东</a>
<span>周末愉快</span>
<br>
<input type="text">
<br>
<input type="text">
<br>
<input type="text">
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
</body>
</html>3.10.3 结构伪类
（1）结构伪类first-child
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/* 结构一
选中div的第一个儿子p元素
first-child是找父类的所有儿子的第一个儿子
*/
/* div>p:first-child{
color: red;
} */
/*
结构二：选中div后代的p元素，
且p的父级是谁无所谓，但p是其父亲的第一个儿子
*/
div p:first-child{
color: red;
}
/* 结构三:选中p元素，
且p的父级是谁无所谓，但p其父亲的第一个儿子 */
p:first-child{
color: red;
}
</style>
</head>
<body>
<!-- 结构一 -->
<!-- <div>
<p>张柳：89分</p>
<p>阿萨：85分</p>
<p>大风车：80分</p>
<p>欧珀：34分</p>
</div> -->
<!-- 结构二 -->
<!-- <div>
<p>张柳：89分</p>
<marquee>
<p>阿萨：85分</p>
<p>大风车：80分</p>
</marquee>
<p>欧珀：34分</p>
</div> -->
<!-- 结构三 -->
<p>测试一</p>
<div>
<p>测试二</p>
<marquee>
<p>测试三</p>
</marquee>
</div>
</body>
</html>（2） 结构伪类nth-child
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/* 选中最后一个儿子 */
div>p:last-child{
color: red;
}
/* 选中第n个儿子*/
div>p:nth-child(2){
color: red;
}
/* 选中序号是偶数个儿子 */
div>p:nth-child(2n){
color: green;
}
/*
选中前三个 ,不能写成 3 -n，必须是an + b
n的范围是0到正无穷，0几乎不用，没有作用，从1开始
*/
div>p:nth-child(-n+3){
color: skyblue;
}
/* 找同类型的第一个儿子 */
div>p:first-of-type{
color: blue;
}
/* 找同类型的最后一个儿子 */
div>p:last-of-type{
color: blue;
}
/* 找同类型的第n个儿子 */
div>p:nth-of-type(3){
color: red;
}
</style>
</head>
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
</body>
</html>（3）不常用的结构伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/* 在所有兄弟，选中倒数第三个 */
div>p:nth-last-child(3){
color: red;
}
/* 选中没有兄弟的唯一span元素*/
span:only-child{
color: red;
}
/* 选中没有同类型的唯一span元素 */
span:only-of-type{
color: blue;
}
/* 选中根元素(html元素) */
:root{
background-color: gray;
}
/* 选中没有内容的元素 */
div:empty{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<span>span1</span>
</div>
<div>
<span>span2</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
<div></div>
</body>
</html>3.10.4 否定伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>否定伪类选择器</title>
<style>
/* 排除类名是.p1的儿子元素 */
div>p:not(.p1){
color: red;
}
div>p:not([title^="uu"]){
color: skyblue;
}
div>p:not(:first-child){
color: green;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p class="p1">4</p>
<p title="uu">5</p>
</div>
</body>
</html>3.10.5 UI伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>UI伪类选择器</title>
<style>
/*
对于复选框、单选框，checked伪类不能设置其他属性,只能设置宽和高
*/
input:checked{
width: 100px;
height: 100px;
}
/* 选中不可用的input */
input:disabled{
background-color: gray;
}
/* 选中可用的input */
input:enabled{
background-color: green;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="radio" name="in1">
<input type="radio" name="in1">
<input type="text" disabled>
<input type="text">
</body>
</html>3.10.6 目标伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>UI伪类选择器</title>
<style>
div{
background-color: gray;
height: 300px;
}
div:target{
background-color: green;
}
</style>
</head>
<body>
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<div id="one">1</div>
<br>
<div id="two">2</div>
<br>
<div id="three">3</div>
</body>
</html>3.10.7 语言伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>UI伪类选择器</title>
<style>
div:lang(en){
color: red;
}
/* 由于html标签指定中文，所有标签默认是中文 */
div:lang(zh-CN){
color: green;
}
/* 选中所有中文的标签 */
:lang(zh-CN){
color: skyblue;
}
</style>
</head>
<body>
<div lang="en">d1</div>
<div>呵呵</div>
<p>哈哈</p>
<p>咯咯</p>
</body>
</html>3.11 伪元素选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
/* 选中div中第一个文字，是元素中的特殊位置 */
div::first-letter{
color: red;
font-size: 20px;
}
/* 选中div第一行的文字 */
div::first-line{
background-color: yellow;
}
/* 选中div中鼠标选择的文字 */
div::selection{
background-color: green;
color: orange;
}
/* 选择input提示的元素 */
input::placeholder{
color: skyblue;
}
/* 选中p元素最开始的位置，随后创建一个子元素*/
p::before{
content: "￥";
}
/* 选中p元素最后的位置，随后创建一个子元素*/
p::after{
content: ".00";
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eum architecto labore dicta unde sunt, doloribus eius voluptas voluptates minima culpa commodi recusandae alias reprehenderit sapiente possimus ex at quas natus. Adipisci debitis at placeat facilis quidem ducimus tempora quibusdam unde, cum blanditiis est omnis quam doloribus similique numquam. Accusamus.</div>
<br>
<input type="text" placeholder="请输入您的用户名">
<p>199</p>
<p>199</p>
<p>199</p>
<p>199</p>
</body>
</html>3.12 选择器的优先级
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器优先级</title>
<style>
/*
样式冲突：通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值
(0,0,0)
简单描述：!important > 行内 > id选择器 > 类选择器 > 元素选择器 > 通配选择器
*/
/*
权重计算：
格式：(a,b,c)
a:ID选择器的个数
b:类、伪类、属性选择器的个数
c:元素、伪元素选择器的个数
权重从左向右比较，直到遇到不等（数字大优先级越大）就结束，后面不需要再看
当权重一样大，遵循后来者居上
*/
/*
权重1=(0,2,1)
*/
.container span.slogan{
color: red;
}
/*
权重2=(0,1,3)
*/
div>p>span:nth-child(1){
color: green;
}
.slogan{
/* 优先级最大 */
color: purple !important;
}
</style>
</head>
<body>
<div class="container">
<p>
<span class="slogan" style="color: blue;">啊哈哈</span>
<span>加速度</span>
</p>
</div>
</body>
</html>四、CSS三大特性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS三大特性</title>
<style>
div{
color: red;
}
p{
color: purple;
}
*{
color: gray;
}
</style>
</head>
<body>
<!--
1.层叠性：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）
-->
<!--
2.继承性：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式
优先继承离得近的
可以继承的样式：color,font-size，text-？？，font-？？，line-？？
不能继承:background-color
-->
<!--
3.优先级：
!important > 行内 > id选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式
并集选择器是分开算
-->
<div>
哈哈
<span>咯咯</span>
<p>
<!-- 继承p的样式 -->
<span>呵呵</span>
</p>
</div>
</body>
</html>五、CSS像素表示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS像素与颜色</title>
<style>
.dv1{
width: 1cm;
height: 1cm;
background-color: red;
}
.dv2{
width: 1mm;
height: 1mm;
background-color: red;
}
.dv3{
width: 1px;
height: 1px;
background-color: red;
}
</style>
</head>
<body>
<!-- cm,mm不够精细，不常用 -->
<div class="dv1"></div>
<hr>
<div class="dv2"></div>
<hr>
<!-- px 相对单位-->
<div class="dv3"></div>
</body>
</html>六、CSS颜色
（1）颜色名称表示法和rgb
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色表示</title>
<style>
.h{
color: red;
}
.hc{
color: rgb(255, 0, 0);
}
.hc1{
color: rgb(100%,0%,0%);
}
/* rgb要么都百分比 ，要么都是数字（0-255）
rgb(0,0,0) 黑色 rgb(255,255,255) 白色
rgb(n,n,n) 0<n<255 灰色 数字越大颜色越浅
*/
.hc2{
color: rgba(100%,0%,0%,0.5);
}
.hc3{
color: rgba(255,0,0,50%);
/*
color: rgba(255,0,0,.5);
*/
}
</style>
</head>
<body>
<!-- 颜色名表示，开发不用 -->
<h2 class="h">哈哈</h2>
<!-- rgb表示,r:red,g:green,b:blue 这是光的三颜色 -->
<h2 class="hc">咯咯</h2>
<h2 class="hc1">嘿嘿</h2>
<!-- rgba，a表示透明度（0~1）0完全透明，1一点也不透明 ;写百分比也行-->
<h2 class="hc2">嘿嘿</h2>
<h2 class="hc3">嘿嘿1</h2>
</body>
</html>（2）16进制表示法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色表示法HEX或HEXA</title>
<style>
/* 煤两位表示一个颜色，从左到右分别是红、绿、蓝、透明 */
.hc{
color: #ff0000;
}
.hc1{
color: #00ff00;
}
/* 最后两位表示透明 */
.hc2{
color: #0000ff00;
}
.hc3{
color: #fcd;
/* 等价于#ffccdd */
}
.hc4{
color: #fcd0;
/* 等价于#ffccdd00*/
}
</style>
</head>
<body>
<h2 class="hc">哈哈1</h2>
<h2 class="hc1">哈哈2</h2>
<h2 class="hc2">哈哈3</h2>
<h2 class="hc3">哈哈4</h2>
<h2 class="hc4">哈哈5</h2>
</body>
</html>（3）HSL或者HSLA
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色表示法hsl或hsla</title>
<style>
.hc{
/* 色相（0度到360度） ，饱和度（0%~100%），亮度（0%~100%）
色相0表示红色，饱和度0%即白色照片，亮度为0%表示黑色，亮度为100%即白色
*/
color: hsl(0deg, 100%, 50%);
/*
等价于rgb（255,0,0）
color: hsl(0, 100%, 50%);
*/
}
/*最后一位是透明度写小数或者百分比*/
.hc1{
color: hsla(0, 50%, 50%, 0.5);
}
</style>
</head>
<body>
<h2 class="hc">哈哈</h2>
<h2 class="hc1">哈哈1</h2>
</body>
</html>七、CSS属性
7.1 字体大小
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
.dv1{
font-size: 40px;
}
.dv2{
font-size: 30px;
}
.dv3{
font-size: 20px;
}
.dv4{
font-size: 16px;
}
</style>
</head>
<body>
<!-- 谷歌浏览器默认字体是16px，默认最小字体是12px，可以调 -->
<div class="dv1">dv1</div>
<div class="dv2">dv2</div>
<div class="dv3">dv3</div>
<div class="dv4">dv4</div>
<div>dv4</div>
</body>
</html>7.2 字体族
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体族</title>
<style>
.dv1{
font-size: 100px;
font-family: "微软雅黑";
}
.dv2{
font-size: 100px;
font-family: "楷体";
}
.dv3{
font-size: 100px;
font-family: "宋体";
}
.dv4{
font-size: 100px;
/* 可以写多个，从左到右，先有效优先选，不写默认是微软雅黑 */
font-family: "华文彩云","微软雅黑","楷体";
}
.dv5{
font-size: 100px;
/*
建议写英文体，一般把微软雅黑放在最后
写多个无衬线体，在末尾写个不加引号的sans-serif，泛指非衬线
写多个衬线体，在末尾写个不加引号的serif，泛指衬线
*/
font-family: "Huawen Caiyun","Microsoft YaHei",sans-serif;
}
/*
衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。
无衬线体是无衬线字体，没有这些额外的装饰，而且笔画的粗细差不多
网页多用无衬线体
*/
</style>
</head>
<body>
<div class="dv1">dv1</div>
<div class="dv2">dv2</div>
<div class="dv3">dv3</div>
<div class="dv4">dv4</div>
<div class="dv5">dv5</div>
</body>
</html>7.3 字体其他属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体风格与字体粗细</title>
<style>
.dv1{
/*
字体大小
*/
/* font-size: 100px; */
/*
字体风格
*/
/* font-style: normal; */
/* font-style: italic; 斜体 寻找设计者的斜体，没找到则强制斜体，推荐使用*/
/* font-style: oblique; 斜体 强制斜体*/
/*
字体粗细
*/
/* font-weight: lighter; 细体 */
/* font-weight: normal; 正常 */
/* font-weight: bold; 粗体 */
/* font-weight: bolder; 一般大多数字体只有细体、正常和粗体，这个属性可能不生效 */
/* font-weight: 100; 范围100到1000 */
/*
字体复合属性:最后两位必须是大小和字体族,前面无顺序，推荐写
*/
font: bold italic 100px "华文彩云","微软雅黑",sans-serif;
}
</style>
</head>
<body>
<div class="dv1">哈哈</div>
</body>
</html>7.4 文本属性
（1）文本颜色、间距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本属性</title>
<style>
.dv1{
/*
文本颜色
*/
/* color: red; */
/*
字母间距(中英文),可以给负数
*/
/* letter-spacing: 20px; */
/* letter-spacing: -1px; */
/*
单词间距，通过空格识别，对中文不起作用
*/
/* word-spacing: 20px; */
/*
文本修饰
*/
/* text-decoration: overline; 上划线 */
/* text-decoration: underline;下划线 */
/* text-decoration: line-through; 删除线 */
/* text-decoration: none; 无线 */
/* text-decoration: underline dotted; 虚线 */
/* text-decoration: underline wavy red; */
/*
文本缩进
*/
/* font-size: 40px;
text-indent: 80px; */
/*
文本对齐
*/
/* text-align: center; */
/* text-align: left;
text-align: right; */
}
</style>
</head>
<body>
<div class="dv1">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
</body>
</html>（2）文本行高
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style>
.dv1{
font-size: 40px;
background-color: skyblue;
/*
行高
*/
/* line-height: normal; 默认*/
/* line-height:100px; */
/* line-height: 1; 表示font-size的倍数 推荐*/
/* line-height: 150%; 表示font-size的百分比*/
/*
注意：
（1）font-size和line-height不要设置一样
（2）行高太小，文字会重叠，最小值为0
（3）行高可以继承父类
（4）height设置值，div高度就是height，没有设置div高度=行高乘以行数
（5）当line-height=0，则div的height=0，此时背景色消失
（6）行高应用于多行文字、单行文字的垂直居中（line-height==height）
*/
}
</style>
</head>
<body>
<div class="dv1">dv1</div>
</body>
</html>（3）文本对齐
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本对齐_垂直</title>
<style>
/*
默认顶部对齐
中间对齐：height == line-height
单行底部对齐：line-height = (height * 2) - font-size - x
x是根据字体族，动态决定的一个值
*/
div{
font-size: 100px;
height: 300px;
background-color: skyblue;
}
/* vertical-align */
span{
font-size: 40px;
background-color: orange;
/* vertical-align: top; */
/* vertical-align: baseline; 默认值基线对齐 */
/* vertical-align: bottom; */
/* vertical-align: middle; 父元素x的中心点 */
}
/*
vertical-align不能控制div的文字。
只能控制div里的子元素，反例如下
*/
.dv1{
width: 400px;
height: 400px;
background-color: green;
vertical-align: middle;
}
/*
vertical-align 不能控制块级元素，可以控制行内元素
*/
.dv2{
width: 400px;
height: 400px;
background-color: gray;
}
.dv3{
width: 100px;
height: 100px;
background-color: green;
vertical-align: bottom;
}
/* vertical-align可以控制表格的单元格的内容 */
.san{
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
哈哈哈x<span>x前端</span>
</div>
<!-- 反例一 -->
<div class="dv1">
1234
</div>
<br>
<!-- 反例二 -->
<div class="dv2">
<div class="dv3"></div>
</div>
<br>
<table border="1" cellspacing="0">
<caption>人员信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr height="200px">
<td class="san">张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>7.5 列表属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表相关属性</title>
<style>
ul{
/* 列表符号 */
list-style-type: decimal;
/* 列表符号的位置 */
list-style-position: inside;
/* 自定义列表符号 */
/* list-style-image: url("./pic.jpg"); */
/* 复合属性 */
list-style: decimal inside;
/* 以上属性可以用在ul、ol、li */
}
li{
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>哈哈</li>
<li>咯咯</li>
<li>喵喵</li>
</ul>
</body>
</html>7.6 边框属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>边框相关属性</title>
<style>
table{
/* border-width: 2px;
border-color: green;
border-style: solid; */
border: 2px green solid;
}
td,th{
border: 2px orange solid;
}
h2{
border: 3px red solid;
}
span{
border: 3px purple dashed;
}
</style>
</head>
<body>
<h2>边框属性不仅仅表格能用，其他元素也能用</h2>
<span>加油</span>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>3</td>
<td>赵柳</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>28</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>7.7 表格独有属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>边框相关属性</title>
<style>
table{
/* border-width: 2px;
border-color: green;
border-style: solid; */
border: 2px green solid;
width: 500px;
/* 控制表格的列宽 */
table-layout: fixed;
/* 控制单元格的距离 */
/* border-spacing: 5px; */
border-spacing:0px;
/* 合并相邻的单元格的边框 border-collapse会导致border-spacing失效*/
border-collapse: collapse;
/* 隐藏没有内容的单元格 (不要合并边框)*/
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: bottom;
}
td,th{
border: 2px orange solid;
}
h2{
border: 3px red solid;
}
span{
border: 3px purple dashed;
}
</style>
</head>
<body>
<h2>边框属性不仅仅表格能用，其他元素也能用</h2>
<span>加油</span>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>3</td>
<td>赵柳</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>28</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>7.8 背景属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景相关属性</title>
<style>
div{
width: 400px;
height: 400px;
border: 5px black solid;
font-size: 40px;
/* 设置背景的颜色 ，默认背景色是transparent*/
background-color: skyblue;
/* 设置背景图片 */
/* background-image: url(../pic.jpg); */
/* 设置背景图片的重复方式 */
/* background-repeat: no-repeat; 不重复 */
/* background-repeat: repeat; 默认重复 */
/* background-repeat: repeat-x; 水平重复 */
/* background-repeat: repeat-y; 垂直重复 */
/* 可以控制背景图片的位置 */
/* background-position: left top; 默认左上角 */
/* background-position: center top; */
/* background-position: center; 水平和垂直都居中 */
/* background-position: 10px 20px; (x,y) */
/* background-position: 100px; x=100px */
/* 复合属性 */
/* background: skyblue url() no-repeat; */
}
</style>
</head>
<body>
<div>哈哈哈</div>
</body>
</html>7.9 鼠标相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>鼠标相关属性</title>
<style>
div{
height: 400px;
width: 400px;
background-color: skyblue;
/* cursor: pointer; */
/* cursor: move; */
cursor: wait;
}
button{
cursor: pointer;
/* cursor: url(),pointer; 自定义*/
}
</style>
</head>
<body>
<div>
把鼠标放进来看一看
<input type="text">
<button></button>
</div>
</body>
</html>八、CSS盒子模型
8.1 常用单位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS常用的长度单位</title>
<style>
#d1{
/* 第一种单位：px（像素） */
width: 200px;
height: 200px;
font-size: 20px;
background-color: skyblue;
}
#d2{
/*
第二种单位：em(相对于当前元素或其父元素的font-size的倍数)
如果不设置font-size，会向上找父类，如果还是没找见，则采用浏览器默认的
*/
width: 10em;
height: 10em;
font-size: 20px;
/* font-size: 1em; 同样这种情况也是找父类 */
background-color: skyblue;
}
#d3{
/*
第三种单位：rem (相对于(html)根元素的font-size的倍数)
*/
width: 10rem;
height: 10rem;
font-size: 20px;
/* font-size: 1rem; 同样这种情况也是找父类 */
background-color: skyblue;
}
#d4{
width: 200px;
height: 200px;
font-size: 20px;
background-color: gray;
}
/*
第四种长度单位，%（相对其父元素的百分比）
*/
.inside{
width: 50%;
height: 25%;
font-size: 150%;
background-color: orange;
}
/* 首行缩进 */
.d5{
font-size: 80px;
text-indent: 2em;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="d1">1</div>
<br>
<div id="d2">2</div>
<br>
<div id="d3">3</div>
<br>
<div id="d4">
<div class="inside">4</div>
</div>
<br>
<div class="d5">哈哈哈</div>
</div>
</body>
</html>8.2 元素的显示模式
<body>
<!--
（1）块元素的特点
独占一行，默认宽度撑满整个父元素，默认高度是由内容撑开的，可以通过css设置宽高 div
（2）行内元素的特点
不独占一行，默认宽度和高度都是由内容撑开的，无法通过css设置宽高 span
（3）行内块元素
不独占一行，默认宽度和高度都是由内容撑开的，可以通过css设置宽高 img
-->
</body>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>修改元素的显示模式</title>
<style>
div{
width: 100px;
height: 100px;
font-size: 40px;
/* display: block; 块元素*/
/* display: inline-block; 行内快元素 */
/* display: inline;行内元素 */
background-color: skyblue;
}
a{
display: block;
/* display: none; 不显示 */
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>你好1</div>
<div>你好2</div>
<br>
<a href="#">百度</a>
<a href="#">京东</a>
</body>
</html>8.3 盒模型组成部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒模型组成部分</title>
<style>
div{
/* 内容区域宽 */
width: 100px;
/* 内容区域高 */
height: 100px;
/* 内边距 ，背景颜色会填充内边距*/
padding: 10px;
/* 边框 ,背景颜色会填充边框*/
border: 10px solid black;
/* 盒子最终大小（宽或高）= 内容区域左右 + 内边距左右 + 边框左右 */
/* 外边距 */
margin: 20px;
font-size: 40px;
background-color: grey;
}
</style>
</head>
<body>
<div>你好1</div>
</body>
</html>8.4 盒子组成部分的相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
/*
1.内容区域
min-width不能小于最小宽度
max-width不能大于最大宽度
min-height
max-height
内容区域默认宽度：不设置width
总宽度=父content - 自身左右的margin
内容区宽度= 父content - 自身左右的margin - 自身左右的border - 自身左右的padding
*/
/*
padding 内边距 值不能为负数
行内元素左右padding可以设置，但是上下设置如果上下有其他元素，会重叠
*/
div{
background-color: skyblue;
width: 100px;
height: 100px;
/* padding-left: 20px;
padding-top: 30px;
padding-right: 50px;
padding-bottom: 20px; */
/* padding: 20px;四个方向边距一样 */
/* padding: 10px 20px; 上下 左右 */
/* padding: 10px 20px 30px; 上 左右 下 */
/* padding: 10px 20px 30px 40px;上 右 下 左 */
}
span{
background-color: orange;
font-size: 20px;
/* padding: 50px 20px 30px 40px; */
}
/* 边框 ,默认边框宽度是10px*/
#d1{
width: 50px;
height: 50px;
/* border-left-width: 10px;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px; */
/* border-left-color: #000;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000; */
/* border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid; */
/* border-color: red;
border-width: 10px;
border-color: skyblue; */
border-left: 50px solid purple;
border-top: 50px solid red;
border-bottom: 50px solid green;
border-right: 50px solid gray;
}
/* margin */
#d2{
width: 50px;
height: 50px;
background-color: aquamarine;
/* margin-left: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-top: 40px;
margin: 50px;
margin: 10px 20px; 和border一样 */
}
</style>
</head>
<body>
<div>内容</div>
<span>padding</span>
<div id="d1">边框</div>
<div id="d2">margin</div>
</body>
</html>8.5 margin注意事项
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin注意事项</title>
<style>
.outer{
width: 400px;
height: 400px;
padding: 50px;
background-color: gray;
}
.inner{
width: 100px;
height: 100px;
margin: 100px;
background-color: orange;
}
</style>
</head>
<body>
<!-- 子元素的margin是参考父元素的content来算的 -->
<!-- 上margin、左margin会影响自身的位置，下margin、右margin会影响兄弟元素的位置 -->
<!-- 行内元素可以设置左右margin，但是上下设置没有效果，行内块和块元素都可以设置 -->
<!-- 对于块级元素，设置左右margin为auto，可以实现水平居中 -->
<!-- margin可以设置负数 -->
<!-- margin的塌陷问题 ：
第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上
解决方案：
（1）给父元素设置不为0的padding
（2）给父元素设置宽度不为0的border
（3）给父元素设置overflow:hidden
-->
<!-- margin合并问题：
上下外边距会发生合并，左右不会发生
-->
<div class="outer">
<div class="inner"> </div>
</div>
</body>
</html>8.6 内容溢出
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
/* overflow: hidden; */
/* overflow: visible; 默认值 */
/* overflow: scroll; 这个滚动条一定有*/
/* overflow: auto;这个滚动条不一定有，随着内容变化 */
/* overflow-x: hidden; 横向 不推荐 */
/* overflow-y: auto; 纵向 不推荐*/
}
</style>8.7 隐藏元素
div {
width: 100px;
height: 100px;
background-color: skyblue;
/* 隐藏元素 */
/* display: none; 隐藏但不占据位置 */
/* visibility: hidden; 隐藏但还占据位置 */
}8.8 CSS布局技巧
8.9 CSS相关问题
九、浮动
9.1 浮动特点
- 脱离文档流
- 浮动后任何元素默认宽高被内容撑开，可以设置宽高
- 与其他元素公用一行
- 可以完美设置四个方向的margin和padding
- 不会像行内块一样当做文本处理（没有行内块的空白问题）
9.2 浮动影响及解决
浮动后，后面的兄弟元素，会占据浮动之前的位置，不能撑起父元素高度，但子元素仍受宽影响
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动影响</title>
<style>
.outer{
width: 500px;
background-color: grey;
border: 1px solid black;
/* height: 122px; 方法一*/
/* float: left; 方法二*/
/* overflow: hidden; 方法三 */
}
.box{
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
}
.box1,.box2,.box3{
float: left;
}
.mofa{
/* overflow: hidden; 方法四 */
clear: both;
}
.outer::after{
/* 方式五 推荐*/
content: '';
display: block;
clear: both;
}
/* 布局原则：兄弟要么都浮动，要么都不 ，否则浮动仍会产生影响*/
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<!-- <div class="mofa"></div> -->
</div>
</body>
</html>十、定位
10.1 相对定位
10.2 绝对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
/*
绝对定位
1.参考点是包含块
（1）如果没有脱离文档流，其父为包含块
（2）脱离文档流，第一个开启定位的祖先元素，即为包含块
2.如果左右同时写，左生效；上下同时写，上生效
3.可以margin-x可以和x一起使用，x为left、right、top、bottom，有的浏览器不能用
4.绝对定位和浮动不能共存
5.加绝对定位的元素变成定位元素，特点是默认宽高被内容撑开，且能自由设置宽高
*/
.outer{
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
position: relative;
}
.box{
width: 200px;
height: 200px;
font-size: 20px;
}
.box1{
background-color: #888;
}
.box2{
background-color: orange;
position: absolute;
right: 0;
bottom: 0;
/* margin-bottom: 20px;
margin-right: 20px; */
}
.box3{
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>10.3 固定定位
固定定位：
（1）固定定位的参考点是视口
（2）可以margin-x可以和x一起使用，x为left、right、top、bottom
（3）固定定位和浮动不能共存
（4）加固定定位的元素变成定位元素，特点是默认宽高被内容撑开，且能自由设置宽高
（5）脱离文档流，对后面的兄弟元素，父元素有影响
10.4 粘性定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>粘性定位</title>
<!--
(1)参考点是离他最近能滚动的祖先元素
(2)不脱离文档流，可以和浮动设置
（3）也可以和margin一起使用
-->
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
}
.page-header{
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
background-color: orange;
}
.item{
background-color: gray;
}
.first{
background-color: skyblue;
font-size: 40px;
position: sticky;
/* 距离顶端10px生效，包含那个粘性定位的父容器也被推走的时候就失效了*/
top: 0;
}
.content{
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="page-header">头部</div>
<!-- 内容 -->
<div class="content">
<div class="item">
<div class="first">A</div>
<h2>A1</h2>
<h2>A2</h2>
<h2>A3</h2>
<h2>A4</h2>
<h2>A5</h2>
<h2>A6</h2>
<h2>A7</h2>
<h2>A8</h2>
</div>
<div class="item">
<div class="first">B</div>
<h2>B1</h2>
<h2>B2</h2>
<h2>B3</h2>
<h2>B4</h2>
<h2>B5</h2>
<h2>B6</h2>
<h2>B7</h2>
<h2>B8</h2>
</div>
<div class="item">
<div class="first">C</div>
<h2>C1</h2>
<h2>C2</h2>
<h2>C3</h2>
<h2>C4</h2>
<h2>C5</h2>
<h2>C6</h2>
<h2>C7</h2>
<h2>C8</h2>
</div>
</div>
</body>
</html>10.5 定位层级
10.6 定位的特殊应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位的特殊应用</title>
<style>
.outer{
height: 100px;
background-color: #888;
position: relative;
}
.inner{
background-color: orange;
font-size: 20px;
padding: 20px;
border: 10px solid black;
position: absolute;
/* 让定位元素宽与包含块一致 */
left: 0;
right: 0;
/* 让定位元素高与包含块一致 */
top: 0;
bottom: 0;
}
.outer1{
height: 400px;
width: 800px;
background-color: #888;
position: relative;
}
.inner1{
width: 400px;
height: 100px;
background-color: orange;
position: absolute;
/* 这种居中必须设置宽和高 */
/* 居中方案一推荐 */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* 居中方案二 */
/* left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -200px; */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">123</div>
</div>
<br>
<div class="outer1">
<div class="inner1">123</div>
</div>
</body>
</html>
3048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
