CSS基础
01_CSS编写位置-1行内样式
行内样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>位置1_css行内样式</title>
</head>
<body>
<h1 style="color: red;font-size: 60px;">欢迎来到我的css</h1>
</body>
</html>
01_CSS编写位置-2内部样式
内部样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>位置1_css内部样式</title>
<style>
h1{
color: red;
font-size: 60px;
}
h2{
color: green;
font-size: 40px;
}
p{
color: blue;
font-size: 80px;
}
img{
width: 200px;
}
</style>
</head>
<body>
<h1>欢迎来到我的css</h1>
<h1>欢迎学习前端</h1>
<p>北京欢迎您</p>
<p>上海欢迎您</p>
<p>广州欢迎您</p>
<p>深圳欢迎您</p>
<img src="../../1_HTML/jks.jpg" alt="jks">
</body>
</html>
01_CSS编写位置-3外部样式(最推荐使用)
1.css代码：position.css
h1{
color: red;
font-size: 60px;
}
h2{
color: green;
font-size: 40px;
}
p{
color: blue;
font-size: 80px;
}
img{
width: 200px;
}
2.html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>位置1_css外部样式</title>
<link rel="stylesheet" href="./position.css">
</head>
<body>
<h1>欢迎来到我的css</h1>
<h1>欢迎学习前端</h1>
<p>北京欢迎您</p>
<p>上海欢迎您</p>
<p>广州欢迎您</p>
<p>深圳欢迎您</p>
<img src="../../1_HTML/jks.jpg" alt="jks">
</body>
</html>
02_CSS样式表的优先级
行内(优先级最高) > 内部 = 外部 （后来者居上）
1.css代码：index.css
h1{
color: blue;
font-size: 100px;
}
2.html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 优先级最高 （后来者居上）
行内 > 内部 = 外部
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式表的优先级</title>
<style>
h1{
color: red;
}
</style>
<link href="./index.css" rel="stylesheet">
</head>
<body>
<h1>欢迎学习css</h1>
</body>
</html>
03_CSS语法规范
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语法规范</title>
<style>
h1 {
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<h1></h1>
</body>
</html>
04_CSS代码风格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码风格</title>
<style>
/* 展开风格 */
h1 {
color: red;
font-size: 100px;
}
/* 紧凑风格 */
/* h1 {color: red;font-size: 100px;} */
</style>
</head>
<body>
<h1>欢迎学习css</h1>
</body>
</html>
05_CSS基本选择器_1 通配选择器
* {
/* 选中所有的样式 */
color: red;
font-size: 40px;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_通配选择器</title>
<style>
* {
/* 选中所有的样式 */
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网,土的味道我知道</h1>
<br>
<h2>土味情话</h2>
<h3>作者:优秀的网友</h3>
<p>万水千山总是情</p>
<p>钻石王老五</p>
<p>爱如潮水</p>
</body>
</html>
05_CSS基本选择器_2 元素选择器
标签名 {
属性名:属性值;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--
标签名 {
属性名:属性值;
}
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_元素选择器</title>
<style>
h2 {
color: chocolate;
}
h1 {
font-size: 50px;
}
h3 {
color: green;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网,土的味道我知道</h1>
<br>
<h2>土味情话</h2>
<h3>作者:优秀的网友</h3>
<p>万水千山总是情</p>
<p>钻石王老五</p>
<p>爱如潮水</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:更优秀的网友们</h3>
<p>点个赞啊行不行</p>
<p>上山打老虎</p>
<p>单身万岁</p>
</body>
</html>
05_CSS基本选择器_3 类选择器
.类名 {
属性名:属性值
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--
.类名 {
属性名:属性值
}
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_类选择器</title>
<style>
/* 选中页面中所有类名为speak的元素 */
.speak {
color: red;
}
/* 选中页面中所有类名为answer的元素 */
.answer {
color: blue;
}
.big {
font-size: 40px ;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网,土的味道我知道</h1>
<br>
<h2>土味情话</h2>
<h3>作者:优秀的网友</h3>
<p class="speak big">我对你说:万水千山总是情</p>
<p class="speak">我对你说:钻石王老五</p>
<p class="speak">我对你说:爱如潮水</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:更优秀的网友们</h3>
<p class="answer">你回答我:点个赞啊行不行</p>
<p class="answer">你回答我:上山打老虎</p>
<p class="answer">你回答我:单身万岁</p>
</body>
</html>
05_CSS基本选择器_4 id选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--
.类名 {
属性名:属性值
}
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_类选择器</title>
<style>
/* 选中页面中所有类名为speak的元素 */
.speak {
color: red;
}
/* 选中页面中所有类名为answer的元素 */
.answer {
color: blue;
}
.big {
font-size: 40px ;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网,土的味道我知道</h1>
<br>
<h2>土味情话</h2>
<h3>作者:优秀的网友</h3>
<p class="speak big">我对你说:万水千山总是情</p>
<p class="speak">我对你说:钻石王老五</p>
<p class="speak">我对你说:爱如潮水</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:更优秀的网友们</h3>
<p class="answer">你回答我:点个赞啊行不行</p>
<p class="answer">你回答我:上山打老虎</p>
<p class="answer">你回答我:单身万岁</p>
</body>
</html>
总结:
06_CSS复合选择器_1 交集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_交集选择器</title>
<style>
.rich {
color: red;
}
.star {
color: gold;
}
p.star {
color: green;
}
.rich.star {
color: orange;
}
</style>
</head>
<body>
<h2 class="rich">土豪张三</h2>
<h2 class="star">明星李四</h2>
<h2 class="rich star">土豪明星王五</h2>
<hr>
<p class="star">小狗旺财</p>
<p class="star">小猪佩奇</p>
</body>
</html>
06_CSS复合选择器_2 并集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_并集选择器</title>
<style>
.rich {
color: red;
}
.star {
color: gold;
}
.dog {
color: green;
}
.pig {
color: orange;
}
.rich,
.star,
.dog,
.pig,
#suxi {
font-size: 40px;
background-color:gray;
width: 180px;
}
</style>
</head>
<body>
<h2 class="rich">土豪张三</h2>
<h2 class="star">明星李四</h2>
<h2>破产王五(不加任何样式)</h2>
<hr>
<p class="dog">小狗旺财</p>
<p class="pig">小猪佩奇</p>
<p id="suxi">小羊苏西</p>
</body>
</html>
06_CSS复合选择器_3 后代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_后代选择器</title>
<style>
ul li {
color: red;
}
ol li {
color: green;
}
ul li a {
color: orange;
}
ol li a {
color: pink;
}
.subject .front-end {
color: blue;
}
.subject div.front-end {
color: chocolate;
}
.subject li.front-end {
color: goldenrod;
}
</style>
</head>
<body>
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>
<a href="#">烫头</a>
</li>
</ul>
<hr>
<ol>
<li>张三</li>
<li>李四</li>
<li>
<a href="#">王五</a>
</li>
</ol>
<hr>
<ol class="subject">
<li class="front-end">java</li>
<div class="front-end">学科</div>
<li>前端</li>
<li>大数据</li>
<li>UI</li>
</ol>
<hr>
</body>
</html>
06_CSS复合选择器_4 子代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_子代选择器</title>
<style>
div>a {
color: red;
}
div>p>a {
color: blue;
}
.foot>a {
color: blueviolet;
}
</style>
</head>
<body>
<div>
<a href="#">张三</a>
<a href="#">李四</a>
<a href="#">王五</a>
<p>
<a href="#">赵六</a>
<div class="foot">
<a href="#">孙七</a>
</div>
</p>
</div>
</body>
</html>
06_CSS复合选择器_5 兄弟选择器
+:选中div后紧紧相邻的兄弟p元素 (睡在我下铺的兄弟)-相邻兄弟选择器
~:选中div后所有的兄弟p元素 (睡在我下铺的所有兄弟)-通用兄弟选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_兄弟选择器</title>
<!-- + 代表紧紧相邻的下面的标签 -->
<style>
/* 选中div后紧紧相邻的兄弟p元素 (睡在我下铺的兄弟)-相邻兄弟选择器
div+p {
color: red;
} */
/* 选中div后所有的兄弟p元素 (睡在我下铺的所有兄弟)-通用兄弟选择器 */
div~p {
color: red;
}
/* 排除第一个*/
li+li {
color: orange;
}
</style>
</head>
<body>
<div>尚硅谷</div>
<p>前端</p>
<p>java</p>
<p>大数据</p>
<p>UI</p>
<ul>
<li>主页</li>
<li>秒杀</li>
<li>订单</li>
</ul>
</body>
</html>
06_CSS复合选择器_6 属性选择器
第一种写法:选中具有title属性的元素-[title="choose3"]
第二种写法:选中具有title属性，且属性值为choose3的元素- [title="choose3"]
第三种写法:选中具有title属性，且属性值以字母c开头的-[title^="c"]
第四种写法:选中具有title属性，且属性值以字母1结尾的-[title$="1"]
第五种写法:选中具有title属性，且属性值包含字母o的元素-[title*="o"]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06_属性选择器</title>
<style>
/* 第一种写法:选中具有title属性的元素
[title]{
color: red;
} */
/* 第二种写法:选中具有title属性，且属性值为choose3的元素
[title="choose3"]{
color: red;
} */
/* 第三种写法:选中具有title属性，且属性值以字母c开头的
[title^="c"]{
color: red;
} */
/* 第四种写法:选中具有title属性，且属性值以字母1结尾的
[title$="1"]{
color: red;
} */
/* 第五种写法:选中具有title属性，且属性值包含字母o的元素*/
[title*="o"]{
color: red;
}
</style>
</head>
<body>
<div title="choose1">属性选择器1</div>
<div title="choose2">属性选择器2</div>
<div title="3choose3">属性选择器3</div>
<div title="3choose4">属性选择器4</div>
</body>
</html>
06_CSS伪类选择器_7
什么是伪类?-很像类，但不是类(class),是元素特殊状态的一种描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_伪类选择器_概念</title>
<style>
/* 什么是伪类?-很像类，但不是类(class),是元素特殊状态的一种描述 */
/* 选中的是没有访问过的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>
06_CSS伪类选择器_8 动态伪类
什么是伪类?-很像类，但不是类(class),是元素特殊状态的一种描述
:link-超链接未被访问的状态
:visited-超链接访问过的状态
:hover-鼠标悬停在元素上的状态
:active-元素激活的状态
:focus-获取焦点的元素(表单类元素使用)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08_伪类选择器_动态伪类</title>
<style>
/* 什么是伪类?-很像类，但不是类(class),是元素特殊状态的一种描述 */
/* 选中的是没有访问过的a元素 */
a:link{
color: orange;
}
/* 选中的是访问过的a元素 */
a:visited{
color: gray;
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover{
color: skyblue;
}
/* 选中的是激活状态下的 */
a:active{
color: green;
}
/* 选中的是鼠标悬浮的span元素 */
span:hover{
color: green;
}
/* 选中的是激活的span元素 */
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">
<br>
<select>
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
</body>
</html>
06_CSS伪类选择器_9 结构伪类_1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器_结构伪类_1</title>
<style>
/* 选中的是div的第一个儿子p元素(按照所有兄弟计算的)---看结构1 */
div>p:first-child{
color: red;
}
/* 选中的是div的第一个儿子p元素(按照所有兄弟计算的)---看结构2 */
/* div>p:first-child{
color: red;
} */
/* 选中的是div的后代p元素,且P的父级是谁无所谓,但P必须是其父亲的第一个儿子---看结构3 */
/* div p:first-child{
color: red;
} */
/* 选中的是p元素,且p的父亲是谁无所谓,但是p必须是其父亲的第一个儿子-看结构3 */
p:first-child{
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
</div> -->
<!-- 结构2-->
<!-- <div>
<span>张三:98分</span>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
</div> -->
<!-- 结构3-->
<div>
<marquee>
<p>测试</p>
<p>张三:98分</p>
</marquee>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
</div>
</body>
</html>
06_CSS伪类选择器_10 结构伪类_2
关于n的值
1.0或者不写:什么都选不中 -几乎不用
2.n: 选中所有子元素 -几乎不用
3.1 ~ 正无穷的整数 选中对应序号的子元素
4.2n或者even :选中序号为偶数的子元素
5.2n+1或者odd :选中序号为奇数数的子元素
6.-n+3 : 选中前三个
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10_伪类选择器_结构伪类_2</title>
<style>
/* 选中的是div的第一个儿子p元素(按照所有兄弟计算的)-结构1 */
/* div>p:first-child {
color: red;
} */
/* 选中的是div的最后一个儿子p元素(按照所有兄弟计算的)-结构1 */
/* div>p:last-child {
color: red;
} */
/* 选中的是div的第n个儿子p元素(按照所有兄弟计算的)-结构1 */
/* div>p:nth-child(3){
color: red;
} */
/* even/(2n) 偶数 odd/2n+1奇数 公式:取前五个(-n+5)-格式必须an+b*/
/* 选中的是div的偶数个儿子元素p元素 */
/*
关于n的值=结构2
1.0或者不写:什么都选不中 -几乎不用
2.n: 选中所有子元素 -几乎不用
3.1 ~ 正无穷的整数 选中对应序号的子元素
4.2n或者even :选中序号为偶数的子元素
5.2n+1或者odd :选中序号为奇数数的子元素
6.-n+3 : 选中前三个
*/
/* div>p:nth-child(2n){
color: red;
} */
/* 选中的是div的第一个儿子p元素(按照所有同元素的兄弟计算的)-结构3 */
/* div>p:first-of-type{
color: red;
} */
/* 选中的是div的最后一个儿子p元素(按照所有同元素的兄弟计算的)-结构3 */
/* div>p:last-of-type{
color: red;
} */
/* 选中的是div的第N个儿子p元素(按照所有同元素的兄弟计算的)-结构3 */
div>p:nth-of-type(3){
color: red;
}
</style>
</head>
<body>
<!-- -结构1
<div>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div> -->
<!-- 结构3 -->
<div>
<span>测试</span>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<span>测试2</span>
<p>赵六:68分</p>
<p>孙七:58分</p>
<p>老八:48分</p>
<span>测试3</span>
</div>
</body>
</html>
06_CSS伪类选择器_11 结构伪类_3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10_伪类选择器_结构伪类_2</title>
<style>
/* 选中的是div的第一个儿子p元素(按照所有兄弟计算的)-结构1 */
/* div>p:first-child {
color: red;
} */
/* 选中的是div的最后一个儿子p元素(按照所有兄弟计算的)-结构1 */
/* div>p:last-child {
color: red;
} */
/* 选中的是div的第n个儿子p元素(按照所有兄弟计算的)-结构1 */
/* div>p:nth-child(3){
color: red;
} */
/* even/(2n) 偶数 odd/2n+1奇数 公式:取前五个(-n+5)-格式必须an+b*/
/* 选中的是div的偶数个儿子元素p元素 */
/*
关于n的值=结构2
1.0或者不写:什么都选不中 -几乎不用
2.n: 选中所有子元素 -几乎不用
3.1 ~ 正无穷的整数 选中对应序号的子元素
4.2n或者even :选中序号为偶数的子元素
5.2n+1或者odd :选中序号为奇数数的子元素
6.-n+3 : 选中前三个
*/
/* div>p:nth-child(2n){
color: red;
} */
/* 选中的是div的第一个儿子p元素(按照所有同元素的兄弟计算的)-结构3 */
/* div>p:first-of-type{
color: red;
} */
/* 选中的是div的最后一个儿子p元素(按照所有同元素的兄弟计算的)-结构3 */
/* div>p:last-of-type{
color: red;
} */
/* 选中的是div的第N个儿子p元素(按照所有同元素的兄弟计算的)-结构3 */
div>p:nth-of-type(3){
color: red;
}
</style>
</head>
<body>
<!-- -结构1
<div>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div> -->
<!-- 结构3 -->
<div>
<span>测试</span>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<span>测试2</span>
<p>赵六:68分</p>
<p>孙七:58分</p>
<p>老八:48分</p>
<span>测试3</span>
</div>
</body>
</html>
06_CSS伪类选择器_12 否定伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12_伪类选择器_否定伪类</title>
<style>
/* 选中的是div的儿子p元素,但是排除类名为fail的元素 */
/* div>p:not(.fail){
color: red;
} */
/* 选中的是div的儿子p元素,但是排除title属性值以"加油"开头的元素 */
/* div>p:not([title^="加油"]){
color: red;
} */
/* 选中的是div的儿子p元素,但是排除第一个儿子元素 */
div>p:not(:first-child){
color: red;
}
</style>
</head>
<body>
<div>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
<p class="fail" title="加油老七">孙七:58分</p>
<p class="fail" title="加油老八">老八:48分</p>
</body>
</html>
06_CSS伪类选择器_13 UI伪类
:not(选择器):排除满足括号中条件的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13_伪类选择器_UI伪类</title>
<style>
/* 选中的是勾选的复选框 */
input:checked{
width: 100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled{
background-color: gray;
}
/* 选中的是可用的input元素
input:enabled等同于input
*/
input:enabled{
background-color: green;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
</body>
</html>
06_CSS伪类选择器_14 目标伪类
:target :选中锚点指向的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14_伪类选择器_目标伪类</title>
<style>
div{
background-color: gray;
height: 300px;
}
/* :target :选中锚点指向的元素 */
div:target{
background-color: green;
}
</style>
</head>
<body>
<a href="#one">去看第一个</a>
<a href="#two">去看第二个</a>
<a href="#three">去看第三个</a>
<a href="#four">去看第四个</a>
<a href="#five">去看第五个</a>
<a href="#six">去看第六个</a>
<div id="one">1</div>
<br>
<div id="two">2</div>
<br>
<div id="three">3</div>
<br>
<div id="four">4</div>
<br>
<div id="five">5</div>
<br>
<div id="six">6</div>
</body>
</html>
06_CSS伪类选择器_15 语言伪类
:lang()根据指定的语言选择元素(本质是看lang属性的值)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15_伪类选择器_语言伪类</title>
<style>
div:lang(en){
color: red;
}
/* :lang()根据指定的语言选择元素(本质是看lang属性的值) */
:lang(zh-CN){
color: green;
}
</style>
</head>
<body>
<div>北京</div>
<div lang="en">shangHai</div>
<p>深圳</p>
<span>广州</span>
</body>
</html>
06_CSS伪元素选择器
作用:选中元素中的一些特殊位置。
常用伪元素:
::first-letter 选中元素的第一个文字
::first-line 选中元素的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置,创建一个子元素(必须用content属性指定内容)
::after 在元素最后的位置,创建一个子元素(必须用content属性指定内容)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>16_伪元素选择器</title>
<style>
/*
作用:选中元素中的一些特殊位置。
常用伪元素:
::first-letter 选中元素的第一个文字
::first-line 选中元素的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置,创建一个子元素(必须用content属性指定内容)
::after 在元素最后的位置,创建一个子元素(必须用content属性指定内容)
*/
/* 什么是伪元素?----很像元素,但不是元素(element),是元素中的一些特殊位置 */
/* 选中的是div种的第一个文字 */
/* 一段话的第一个文字 */
div::first-letter{
color: red;
font-size: 100px;
}
/* 选中的是div种的第一行的文字 */
div::first-line{
background-color: green;
}
/* 选中的是div种被鼠标选择的文字 */
div::selection{
background-color: orangered;
color: yellow;
}
/* 选中的是input元素的提示文字 */
input::placeholder{
color: skyblue;
}
/* 选中的是p元素最开始的位置，随后创建一个子元素 */
p::before{
content: "￥";
}
/* 选中的是p元素最后的位置，随后创建一个子元素 */
p::after{
content: ".00";
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet.</div>
<input type="text" placeholder="请输入您的用户名">
<p>199</p>
<p>299</p>
<p>399</p>
<p>499</p>
</body>
</html>
07_CSS选择器优先级-简单聊
通过不同的选择器 选中相同的元素 并且为相同的样式名设置不同的值时，就发生了冲突,到底用哪个样式，就要看优先级.
行内 > id选择器> 类选择器 > 元素选择器 >通配选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器优先级</title>
<style>
/* 通过不同的选择器 选中相同的元素 并且为相同的样式名设置不同的值时，就发生了冲突
到底用哪个样式，就要看优先级
行内 > id选择器> 类选择器 > 元素选择器 >通配选择器
*/
h2 {
color: red;
}
* {
color: green;
}
.slogan{
color: blue;
}
#sky{
color: skyblue;
}
</style>
</head>
<body>
<h2 id="sky" class="slogan">天下没有难学的技术</h2>
</body>
</html>
07_CSS选择器优先级-详细聊
权重比较:谁的权重大显示哪个属性
(a,b,c)
a : id选择器的个数
b : 类,伪类,属性 选择器的个数
c : 元素，伪元素 选择器的个数
行内 > id选择器> 类选择器 > 元素选择器 >通配选择器
!important 宇宙最强，无论权重是多少，都不管用 都显示标注important的属性值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_选择器优先级-详细聊</title>
<style>
/*
(a,b,c)
a : id选择器的个数
b : 类,伪类,属性 选择器的个数
c : 元素，伪元素 选择器的个数
*/
#sky{
color: purple;
}
.container span.slogan{
color: red;
}
div>p>span:nth-child(1){
color: green;
}
/* !important 宇宙最强，无论权重是多少，都不管用 都显示标注important的属性值 */
.slogan{
color: blue !important;
}
</style>
</head>
<body>
<div class="container">
<p>
<span class="slogan" id="sky">天下没有难学的技术</span>
<span>同学们好好学习</span>
</p>
</div>
</body>
</html>
08_CSS三大特性
09_CSS像素_颜色-01像素
px 像素单位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>像素</title>
<style>
.sky{
width:1cm;
height: 1cm;
background-color: red;
}
.sky1{
width: 10mm;
height: 10mm;
background-color: red;
}
.sky2{
width: 10px;
height: 10px;
background-color: red;
}
</style>
</head>
<body>
<div class="sky"></div>
<br>
<div class="sky1"></div>
<br>
<div class="sky2"></div>
</body>
</html>
09_CSS像素_颜色-02颜色第一种表示
表示方式1：
直接使用颜色对应的英文单词,编写比较简单 例如:
红色:red
绿色:green
蓝色:blue
紫色:purple
橙色:orange
灰色:gray
...
具体参考MDN官网文档
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色第一种表示_颜色名</title>
<style>
/*
表示方式1
直接使用颜色对应的英文单词,编写比较简单 例如:
红色:red
绿色:green
蓝色:blue
紫色:purple
橙色:orange
灰色:gray
...
具体参考MDN官网文档
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style
*/
.sky{
color: red;
}
</style>
</head>
<body>
<h2 class="sky">颜色</h2>
</body>
</html>
09_CSS像素_颜色-03颜色第二种表示_rgb和rgba
编写方式2：
使用红，黄，蓝这三种光的三原色进行组合。
r 表示红色
g 表示绿色
b 表示蓝色
a 表示透明度
具体参考MDN官网文档
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色第二种表示_rgb</title>
<style>
/*
编写方式：使用红，黄，蓝这三种光的三原色进行组合。
r 表示红色
g 表示绿色
b 表示蓝色
a 表示透明度
*/
.sky1{
color: rgb(0,255,0);
}
.sky2{
color: rgb(255,0,0);
}
.sky3{
color: rgb(0,0,255);
}
.sky4{
color: rgb(138,43,226);
}
.sky5{
color: rgb(100%,0%,0%);
}
.sky6{
color: rgba(255,0,0,0.1);
}
.sky7{
color: rgba(50, 50, 50, 0.479);
}
</style>
</head>
<body>
<h2 class="sky1">颜色</h2>
<h2 class="sky2">颜色</h2>
<h2 class="sky3">颜色</h2>
<h2 class="sky4">颜色</h2>
<h2 class="sky5">颜色</h2>
<h2 class="sky6">颜色</h2>
<h2 class="sky7">颜色</h2>
</body>
</html>
09_CSS像素_颜色-04颜色第三种表示_HEX和HEXA
编写方式3：
HEX原理跟rgb一样，依然是红绿蓝进行组合，只不过要用6个数字，分成三组来表达格式为#rrggbb
每一位数字的取值范围是:0~f 即(0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f)
所以每一种的光最小值是00 ，最大值是ff
注意:IE不支持HEXA但是支持HEX
具体参考MDN官网文档
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色第三种表示_HEX和HEXA</title>
<style>
/*
HEX原理跟rgb一样，依然是红绿蓝进行组合，只不过要用6个数字，分成三组来表达
格式为#rrggbb
每一位数字的取值范围是:0~f 即(0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f)
所以每一种的光最小值是00 ，最大值是ff
*/
.sky1{
color: #FF0000;
}
.sky2{
color: #00FF00;
}
.sky3{
color: #0000FF;
}
</style>
</head>
<body>
<h2 class="sky1">颜色</h2>
<h2 class="sky2">颜色</h2>
<h2 class="sky3">颜色</h2>
</body>
</html>
09_CSS像素_颜色-05颜色第四种表示_HSL或者HSLA
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_颜色第四种表示_HSL或者HSLA</title>
<style>
/* deg可以省略 */
.sky1{
color: hsl(0deg, 100%, 50%);
}
.sky2{
color:hsl(60, 100%, 50%);
}
.sky3{
color:hsl(120, 100%, 50%);
}
.sky4{
color:hsl(180, 100%, 50%);
}
.sky5{
color:hsl(240, 100%, 50%);
}
.sky6{
color:hsl(360, 100%, 50%);
}
.sky6{
color:hsla(0, 100%, 50%, 0.411);
}
</style>
</head>
<body>
<div>
<h2 class="sky1">颜色</h2>
<h2 class="sky2">颜色</h2>
<h2 class="sky3">颜色</h2>
<h2 class="sky4">颜色</h2>
<h2 class="sky5">颜色</h2>
<h2 class="sky6">颜色</h2>
<h2 class="sky7">颜色</h2>
</div>
</body>
</html>
10_CSS常用字体属性_01字体大小
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_字体大小</title>
<style>
body{
font-size: 20px;
}
.sky1{
font-size: 20px;
}
.sky2{
font-size: 30px;
}
.sky3{
font-size: 40px;
}
.sky4{
font-size: 50px;
}
/* 浏览器接受得最小得大小是12px(在设置外观里面可调)*/
.sky5{
font-size: 3px;
}
/* 浏览器默认得大小是16px(在设置外观里面可调)*/
.sky7{
font-size: 16px;
}
</style>
</head>
<body>
<div class="sky1">字体大小1</div>
<div class="sky2">字体大小2</div>
<div class="sky3">字体大小3</div>
<div class="sky4">字体大小4</div>
<div class="sky5">字体大小4</div>
<div class="sky6">字体大小4</div>
<div class="sky7">字体大小4</div>
</body>
</html>
10_CSS常用字体属性_02字体族
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_字体族</title>
<style>
.sky1{
font-size: 20px;
font-family: "微软雅黑";
}
.sky2{
font-size: 20px;
font-family: "楷体";
}
.sky3{
font-size: 20px;
font-family: "宋体";
}
.sky4{
font-size: 20px;
font-family: "华文彩云","仿宋","楷体";
}
/* sans-serif 指非衬线 serif 衬线 */
.sky5{
font-size: 20px;
font-family: "Microsoft yaHei","STCaiyun","STHupo",sans-serif;
}
</style>
</head>
<body>
<div class="sky1">字体族1</div>
<div class="sky2">字体族2</div>
<div class="sky3">字体族3</div>
<div class="sky4">字体族4</div>
<div class="sky5">字体族5</div>
</body>
</html>
10_CSS常用字体属性_03字体风格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_字体风格</title>
<style>
.sky1{
font-size: 100px;
font-style: normal;
}
/* italic斜体 */
.sky2{
font-size: 100px;
font-style: italic;
}
/*oblique 也是斜体 但是通常使用italic 如果italic找不到会自动使用oblique */
.sky3{
font-size: 100px;
font-style: oblique;
}
</style>
</head>
<body>
<div class="sky1">字体风格1</div>
<div class="sky2">字体风格2</div>
<div class="sky3">字体风格3</div>
<em>字体风格</em>
</body>
</html>
10_CSS常用字体属性_04字体粗细
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_字体粗细</title>
<style>
div{
font-size: 100px;
}
.sky1{
font-weight: lighter;
}
.sky2{
font-weight: normal;
}
.sky3{
font-weight: bold;
}
.sky4{
font-weight: bolder;
}
/* 数值得范围是100-1000但是区分得界限100-300是lighter
400-500 normal
大于500就是bold
*/
.sky5{
font-weight: 1000;
}
</style>
</head>
<body>
<div class="sky1">字体粗细1</div>
<div class="sky2">字体粗细2</div>
<div class="sky3">字体粗细3</div>
<div class="sky4">字体粗细4</div>
<div class="sky5">字体粗细5</div>
</body>
</html>
10_CSS常用字体属性_05字体复合属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_字体复合属性</title>
<style>
/* 大小 字体族必须放最后*/
.sky{
font:bold italic 100px "STCaiyun","STHupo",sans-serif;
}
</style>
</head>
<body>
<div class="sky">复合属性</div>
</body>
</html>
11_CSS常用文本属性_01文本颜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_文本颜色</title>
<style>
.sky{
color: red;
font-size: 90px;
}
.sky2{
color: rgb(255, 0, 0);
font-size: 90px;
}
.sky3{
color: rgba(255, 0, 0,0.5);
font-size: 90px;
}
.sky4{
color: #00FF;
font-size: 90px;
}
.sky5{
color: #00F8;
font-size: 90px;
}
.sky6{
color: hsl(0, 100, 50%);
font-size: 90px;
}
.sky6{
color: hsl(0, 100, 50%,0.5);
font-size: 90px;
}
</style>
</head>
<body>
<div class="sky">文本颜色</div>
<div class="sky2">文本颜色2</div>
<div class="sky3">文本颜色3</div>
<div class="sky4">文本颜色4</div>
<div class="sky5">文本颜色5</div>
<div class="sky6">文本颜色6</div>
<div class="sky7">文本颜色7</div>
</body>
</html>
11_CSS常用文本属性_02文本间距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_文本间距</title>
<style>
div{
font-size: 30px;
}
.sky2{
/* 字母间距 */
letter-spacing: 10px;
}
.sky3{
word-spacing: 10px;
}
</style>
</head>
<body>
<div>you got a dream , you gotta project it .文本间距1</div>
<div class="sky2">you got a dream , you gotta project it .文本间距2</div>
<div class="sky3">you got a dream , you gotta project it .文本间距3</div>
<div>you got a dream , you gotta project it .文本间距4</div>
</body>
</html>
11_CSS常用文本属性_03文本修饰(个中线)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_文本修饰</title>
<style>
div,a {
font-size: 100px;
}
/* 没有顺序要求 */
/* 上划绿色虚线 */
.sky1 {
text-decoration: overline dotted green ;
}
/* 下划的红色波浪线 */
/* 下划线 控制下划线是波浪还是点(改变样式) 改变颜色*/
.sky2 {
text-decoration: underline wavy red;
}
/* 删除线 */
.sky3 {
text-decoration: line-through;
}
/* 去除划线内容 */
.sky4,ins,del {
text-decoration: none;
}
</style>
</head>
<body>
<div class="sky1">文本修饰1</div>
<div class="sky2">文本修饰2</div>
<div class="sky3">文本修饰3</div>
<a class="sky4" href="https://baidu.com">文本修饰3</a>
<ins>测试1</ins>
<del>测试2</del>
</body>
</html>
11_CSS常用文本属性_04文本缩进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_文本缩进</title>
<style>
div{
font-size: 20px;
text-indent: 40px;
}
</style>
</head>
<body>
<div>文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩
进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩
进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进
文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进
文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进</div>
</body>
</html>
11_CSS常用文本属性_05文本对齐-水平
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_文本对齐_水平</title>
<style>
div {
font-size: 40px;
background-color: red;
}
.sky1 {
text-align: center;
}
.sky2 {
text-align: left;
}
.sky3 {
text-align: right;
}
</style>
</head>
<body>
<div class="sky1">文本对齐-水平-居中</div>
<div class="sky2">文本对齐-水平-居左</div>
<div class="sky3">文本对齐-水平-居右</div>
</body>
</html>
11_CSS常用文本属性_06细说font-size
1.由于字体设计原因， 文字最终呈现的大小,并不一定与font-size得值一致,可能大,也可能小。例如font-size设为40px，最终呈现得文字，可能比40px大，也可能比40px小.
2.通常情况下,文字相对字体设计框，并不是垂直居中得，通常都靠下一些
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>06_细说font-size</title>
<!--
1.由于字体设计原因， 文字最终呈现的大小,并不一定与font-size得值一致,可能大,
也可能小。例如font-size设为40px，最终呈现得文字，可能比40px大，也可能比40px小
2.通常情况下,文字相对字体设计框，并不是垂直居中得，通常都靠下一些
-->
<style>
div{
font-size: 40px;
background-color: red;
}
</style>
</head>
<body>
<div>fontSize字体大小</div>
<span style="font-size: 40px; font-family: '微软雅黑';">细</span>
<span style="font-size: 40px; font-family: '楷体';">细</span>
<span style="font-size: 40px; font-family: '仿宋';">细</span>
</body>
</html>
11_CSS常用文本属性_07行高
第一种想法 值为像素
line-height: 100px;
第二种写法,值为normal
line-height: normal;
第三种写法,值为数值 - 用的比较多
line-height: 1.5;
第四种写法,值为数值
line-height: 150%;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_行高</title>
<style>
#d1 {
background-color: skyblue;
font-size: 40px;
/* 行高 防止字体重叠 line-height永远不要跟font-size设置一样 */
/* 第一种想法 值为像素 */
/* line-height: 100px; */
/* 第二种写法,值为normal */
line-height: normal;
/* 第三种写法,值为数值 - 用的比较多*/
line-height: 1.5;
/* 第四种写法,值为数值 */
line-height: 150%;
}
</style>
</head>
<body>
<div id="d1">行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现行高hanggao发量才是技术的体现</div>
</body>
</html>
11_CSS常用文本属性_08行高注意事项
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08_行高注意事项</title>
<style>
/* 注意点1 :行高过小会怎么样?文字重叠且最小值是0 不能为负数 */
div{
font-size: 40px;
background-color: skyblue;
line-height: 0;
}
/* 注意点2 : 行高是可以继承的 */
#d2{
font-size: 40px;
background-color: skyblue;
line-height: 1.5;
}
span{
font-size: 200px;
color: red;
}
/* 注意点3:height跟line-height的关系
设置了height 高度就是height的值
如果没有设置height 高度就是line-height * 行数
*/
#d3{
font-size: 40px;
background-color: yellowgreen;
line-height: 300px;
}
#d4{
font-size: 40px;
background-color: skyblue;
line-height: 0px;
}
/* 行高的应用场景 1 调整多行文字的间距 */
#d5{
font-size: 40px;
background-color: skyblue;
line-height: 100px;
}
/* 行高的应用场景 2 单行文字的垂直居中 */
#d6{
font-size: 40px;
background-color: skyblue;
height: 300px;
line-height: 300px;
}
</style>
</head>
<body>
<!-- <div>
发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长<span>发亮</span>生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长
</div>
<div id="d2">
发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长<span>发亮</span>生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长
</div>
<div id="d3">
发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长
</div> -->
<!-- <div id="d4">
发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长
</div> -->
<!-- <div id="d5">
发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长
</div> -->
<div id="d6">
发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长发亮生长
</div>
</body>
</html>
11_CSS常用文本属性_09文本对齐-垂直方向
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09_文本对齐_垂直方向</title>
<style>
div{
font-size: 40px;
height: 400px;
line-height: 240px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>垂直方向</div>
</body>
</html>
11_CSS常用文本属性_09-vertical-align
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10_vertical-align</title>
<style>
div {
font-size: 40px;
background-color: skyblue;
height: 200px;
}
span {
font-size: 20px;
background-color: red;
vertical-align: middle;
}
img {
width: 240px;
vertical-align: middle;
}
/* 反例 不可以用在div上 ---start*/
.test {
width: 400px;
height: 400px;
background-color: green;
}
.test1 {
width: 80px;
height: 60px;
background-color: red;
vertical-align: middle;
}
/* 反例 ---end */
/* 可以用在表格元素里 */
.name {
height: 80px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
我在学X<span>前端</span>
</div>
<hr>
<div>
垂直高度X<img src="../../1_HTML/jks.jpg">
</div>
<hr>
<!-- 反例 不可以直接用在div上 -->
<div class="test">
<div class="test1">
123
</div>
</div>
<hr>
<table border="1" cellspacing="0">
<caption>人员信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
12_CSS列表相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_列表相关属性</title>
<style>
ul {
/* 列表符号 */
/* list-style-type: decimal; */
/* 列表符号的位置 */
/* list-style-position: inside; */
/* 自定义列表符号 */
/* list-style-image: url("../../favicon.ico"); */
/* 复合属性 没有顺序*/
list-style: decimal inside url("../../favicon.ico");
}
li{
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>《震惊！两男子竟在教室做出这种事情》</li>
<li>《一夜暴富指南》</li>
<li>《给成功男人的五条建议》</li>
</ul>
</body>
</html>
13_CSS边框相关属性_01CSS边框相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_边框相关属性</title>
<style>
table{
/* border-width: 2px; */
/* border-color: green; */
/* border-style: solid ; */
border:1px green solid;
}
td,th{
border:1px green solid;
}
h2{
border:2px red solid;
}
span{
border: 2px blue dotted;
}
</style>
</head>
<body>
<h2>边框相关的属性,不仅仅是表格能用,其他元素也能用</h2>
<span>你要加油啊!</span>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>女</td>
<td>群众</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
<td>男</td>
<td>共青团员</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>21</td>
<td>女</td>
<td>人民群众</td>
</tr>
</tbody>
</table>
</body>
</html>
13_CSS边框相关属性_02表格独有属性
1.控制表格列宽 auto fixed
table-layout: auto;
2.控制单元格间距 （生效的前提是:不能合并单元格的边框）
border-spacing: 0px;
3.合并相邻单元格的边框 separate collapse（单元格间距就不可用了）
border-collapse: collapse;
4.隐藏没有内容的单元格
empty-cells: hide;
5.设置表格标题的位置 bottom top
caption-side: bottom;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_表格独有属性</title>
<style>
/* div{
transform: rotate(90deg);
} */
table{
border: 2px green solid;
width: 500px;
/* 控制表格列宽 auto fixed*/
table-layout: auto;
/* 控制单元格间距 （生效的前提是:不能合并单元格的边框）*/
border-spacing: 0px;
/* 合并相邻单元格的边框 separate collapse（单元格间距就不可用了） */
/* border-collapse: collapse; */
/* 隐藏没有内容的单元格 */
empty-cells: hide;
/* 设置表格标题的位置 bottom top*/
caption-side: bottom;
}
th,td{
border: 2px gray solid;
}
</style>
</head>
<body>
<div>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th></th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>女</td>
<td>群众</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
<td>男</td>
<td>共青团员</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>21</td>
<td>女</td>
<td>人民群众</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
14_CSS背景相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景相关属性</title>
<style>
div{
width: 400px;
height: 400px;
border: 2px solid;
/* 设置北京颜色 transparent 透明色(默认值)*/
background-color: red;
background-color: transparent;
/* 设置背景图片 */
background-image: url('../../favicon.ico');
/* 设置背景图片的重复方式 no-repeat 不重复 repeat重复
repeat-x水平方向 重复
repeat-y垂直方向 重复
*/
background-repeat: repeat-x;
/* 控制背景图片的位置 第一种写法:用关键词 第二个参数不填默认是在中间*/
background-position: left top;
/* 控制背景图片的位置 第二种写法:用具体像素值 第二个参数不填默认是在中间*/
background-position: 10px 20px;
background: red url('../../favicon.ico');
}
</style>
</head>
<body>
<div>你好啊!</div>
</body>
</html>
15_CSS鼠标相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标相关属性</title>
<style>
div{
width: 400px;
height: 400px;
background-color: skyblue;
cursor: help;
}
button{
cursor:pointer
}
</style>
</head>
<body>
<div>
把鼠标放进来看一看
<input type="text">
<a href="">百度</a>
<button>点我</button>
</div>
</body>
</html>
16_CSS盒子模型 01_css中常用的长度单位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_css中常用的长度单位</title>
<style>
#d1{
/* 第一种长度单位 px (像素) */
width: 200px;
height: 200px;
font-size: 20px;
background-color: skyblue;
}
/* 第二种长度单位 em (相对于当前元素的font-size的倍数) */
/* 如果不写font-size 则找父级元素的font-size */
#d2{
width: 10em;
height: 10em;
font-size: 20px;
background-color: skyblue;
}
/* 第二种长度单位 rem (相对于根元素的font-size的倍数) */
#d3{
width: 10rem;
height: 10rem;
font-size: 20px;
background-color: blue;
}
#d3{
width: 200px;
height: 200px;
font-size: 150%;
background-color: gray;
}
/*第四种长度单位:%(相对其父元素的百分比) */
.inside{
width: 50%;
height: 25%;
}
/* 通过me来控制缩进 */
.test{
font-size: 80px;
text-indent: 2em;
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
1
</div>
<div id="d2">
2
</div>
<div id="d3">
3
</div>
<div id="d4">
<div class="inside">4</div>
</div>
<hr>
<div class="test">好好学习，天天向上</div>
</body>
</html>
16_CSS盒子模型 02_css中盒子的显示模式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_盒子的显示模式</title>
<style>
body{
background-color: gray;
}
/* 块元素 */
#d1{
background-color: skyblue;
}
#d2{
background-color: blue;
}
#d3{
background-color: green;
}
/* 行内元素 */
.one{
background-color: red;
}
.two{
background-color: yellow;
}
/* 行内块元素 */
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!-- 块元素 -->
<div id="d1">山回路转不见君</div>
<div id="d2">雪上空留马行处</div>
<div id="d3">风里雨里我在家里等你</div>
<!-- 行内元素 -->
<span class="one">人之初</span>
<span class="two">性本善</span>
<hr>
<!-- 行内块元素 -->
<img src="../../favicon.ico">
<img src="../../favicon.ico">
<img src="../../favicon.ico">
</body>
</html>
16_CSS盒子模型 03_总结各元素的显示模式
16_CSS盒子模型 04_修改元素的显示模式
通过display属性修改元素的默认显示方式
display:none 元素会被隐藏
display:block 元素将作为块级元素显示
display:inline 元素将作为内联元素显示
display:inline-block 元素将作为行内块元素显示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_修改元素的显示模式</title>
<style>
/*
通过display属性修改元素的默认显示方式
display:none 元素会被隐藏
display:block 元素将作为块级元素显示
display:inline 元素将作为内联元素显示
display:inline-block 元素将作为行内块元素显示
*/
div {
width: 200px;
height: 200px;
font-size: 20px;
display: inline-block;
}
#d1 {
background: skyblue;
}
#d2 {
background: orange;
}
#d3 {
background: gray;
}
a{
width: 200px;
height: 200px;
font-size: 20px;
display: block;
}
#s1 {
background: skyblue;
}
#s2 {
background: orange;
}
#s3 {
background: gray;
}
</style>
</head>
<body>
<div id="#1">你好1</div>
<div id="#2">你好2</div>
<div id="#3">你好3</div>
<div id="#4">你好4</div>
<hr>
<a id="s1" href="https://www.baidu.com">去百度</a>
<a id="s2" href="https://www.jd.com">去京东</a>
<a id="s3" href="https://www.toutiao.com">去头条</a>
</body>
</html>
16_CSS盒子模型 05_盒子模型的组成部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_盒子模型的组成部分</title>
<style>
div{
/* 内容区的宽*/
width:400px;
/* 内容区的高 */
height: 400px;
/* 内边距 */
padding: 20px;
/* 边框 */
border:10px dashed red;
font-size: 20px;
background-color: gray;
/* 外边距 */
margin: 50px;
}
</style>
</head>
<body>
<div>你好啊</div>
</body>
</html>
16_CSS盒子模型 06_盒子的内容区
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06_盒子的内容区</title>
<style>
div{
/* 底线值 最小只能是600 不会再小了 */
/* 浏览器视口的最小值484 不会再小了 */
/* min-width :600 px */
/* 最大值 最大只能是600 不会再大了 */
/* max-width :600 px */
background-color: skyblue;
height: 60px;
/* 视口最小高度 */
/* min-height 50px; */
/* 视口最大高度 */
/* max-height 50px; */
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, minus.</div>
</body>
</html>
16_CSS盒子模型 07_关于默认宽度
关于默认宽度:
所谓的默认宽度，就是不设置width属性时,元素呈现出来的宽度。
总宽度=父的content-自身的左右margin
内容区=父的content-自身的左右margin-自身的左右border-自身的左右
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_关于默认宽度</title>
<style>
div{
background-color: skyblue;
margin: 50px;
height: 200px;
border: 5px solid black ;
}
</style>
</head>
<body>
<div>你好啊</div>
</body>
</html>
16_CSS盒子模型 08_盒子的内边距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08_盒子的内边距</title>
<style>
#d1 {
width: 500px;
height: 500px;
background-color: skyblue;
/* 左边边距 */
/* padding-left: 20px; */
/* 右边边距 */
/* padding-right: 20px; */
/* 上边边距 */
/* padding-top: 20px; */
/* 下边边距 */
/* padding-bottom: 20px; */
/* 复合属性(两个属性) 上下左右*/
/* padding: 20px 20px； */
/* 复合属性(三个值) 上 左右 下*/
/* padding: 20px 30px 40px; */
/* 复合属性(四个值 顺时针) 上右下左*/
padding: 10px 20px 30px 40px;
}
/* 行内元素得左右padding没问题，上下存在问题 */
span{
background-color: blue;
font-size: 10px;
padding-left: 20px;
/* padding-right: 20px; */
/* padding-top: 20px; */
/* padding-bottom: 20px; */
}
img{
width: 200px;
padding: 50px;
}
</style>
</head>
<body>
<div id="d1">你好啊</div>
<hr>
<span>我很好</span>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus aspernatur quibusdam earum a. Nobis harum placeat maxime, vitae commodi similique eum quam expedita, deleniti iste doloribus impedit pariatur maiores numquam.</div>
<img src="../../favicon.ico">
<div>图标 你好呀</div>
</body>
</html>
16_CSS盒子模型 09_盒子的边框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09_盒子的边框</title>
<style>
div{
width: 400px;
height: 400px;
background-color: skyblue;
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;
border-left-color: red;
border-right-color: orange;
border-top-color: green;
border-bottom-color: tomato;
/* border: 1px solid red; */
border-left-style: solid ;
border-right-style: dashed ;
border-top-style: double ;
border-bottom-style: dotted;
/* border-color:red; */
/* border-width:80px; */
/* border-style:dashed; */
/* 复合属性 */
border-left: 50px solid purple;
border-right: 60px solid red;
border-top: 70px solid blue;
border-bottom: 80px solid green;
border: 10px solid red;
}
</style>
</head>
<body>
<div>
你好啊
</div>
</body>
</html>
16_CSS盒子模型 10_盒子的外边距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10_盒子的外边距</title>
<style>
div{
width: 400px;
height: 400px;
background-color: red;
/* margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px; */
/* 一个值 上下左右 */
margin: 50px;
/* margin 上下50px 左右60px*/
margin: 50px 60px;
/* margin 上50px 下70px 左右60px*/
margin: 50px 60px 70px;
/* margin 上50px 右60px 下70px 左80px*/
margin: 50px 60px 70px 80px;
}
</style>
</head>
<body>
<div>
你好啊
</div>
</body>
</html>
16_CSS盒子模型 11_margin的注意事项
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11_margin的注意事项</title>
<style>
.outer{
width: 400px;
height: 400px;
padding: 50px;
background-color: gray;
}
.inter{
width: 100px;
height: 100px;
margin: 100px;
background: orange;
}
</style>
</head>
<body>
<!-- 子元素的margin是参考元素的content计算的 -->
<div class="outer">
<div class="inter"></div>
</div>
</body>
</html>
16_CSS盒子模型 12_margin的注意事项2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12_margin的注意事项2</title>
<style>
.box{
width: 200px;
height: 200px;
}
.box1{
background-color: skyblue;
}
.box2{
background-color: orange;
/* 设置top 是自己往下移动 */
margin-top: 50px ;
/* 设置bottom 下方元素移动 */
margin-bottom: 50px ;
}
.box3{
background-color: green;
}
.img2{
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<!-- 上margin跟左margin会影响自身的位置 下margin跟右margin会影响兄弟元素的位置 -->
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<hr>
<img src="../../favicon.ico" class="img1">
<img src="../../favicon.ico" class="img2">
<img src="../../favicon.ico" class="img3">
</body>
</html>
16_CSS盒子模型 13_margin的注意事项3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13_margin的注意事项3</title>
<style>
#d1 {
width: 400px;
height: 200px;
margin: 50px;
background-color: deepskyblue;
}
img {
margin: 50px;
}
.one {
background-color: red;
}
.two {
background-color: orange;
margin-left: 20px;
margin-right: 30px;
margin-top: 40px;
margin-bottom: 50px;
}
.three {
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 对于行内元素来说,左右的margin是可以完美设置的,上下的margin设置后是无效的 -->
<div id="d1">我是一个块级元素</div>
<div>我是一段文字</div>
<hr>
<img src="../../favicon.ico">
<div>我是一段文字</div>
<hr>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="three">性相近</span>
</body>
</html>
16_CSS盒子模型 14_margin的注意事项4
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14_margin的注意事项4</title>
<style>
div{
widows: 400px;
height: 400px;
background-color: red;
/* margin-left: auto; */
/* margin-right: auto; */
margin: 100px auto;
}
span{
background-color: skyblue;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- marigin的值也可以是auto 给一个块级元素左右margin设置auto可以实现该元素在其父元素左右居中 -->
<div>你好啊</div>
<span>好好学习</span>
</body>
</html>
16_CSS盒子模型 14_margin的注意事项4
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15_margin的注意事项5</title>
<style>
.box{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
}
.box2{
margin-top: -200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div></div>
</body>
</html>
16_CSS盒子模型 15_margin的注意事项5
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15_margin的注意事项5</title>
<style>
.box{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
}
.box2{
margin-top: -200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div></div>
</body>
</html>
16_CSS盒子模型 16_margin塌陷问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>16_margin塌陷问题</title>
<style>
.outer{
width: 400px;
/* height: 400px; */
background-color: gray;
/* border: 1px solid red; */
/* padding: 1px; */
/* 溢出之后的显示模式 */
overflow: hidden;
}
.inner1{
width: 100px;
height: 100px;
background-color: orange;
/* 有问题 */
margin-top: 50px;
}
.inner2{
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1">inner1</div>
<div class="inner2">inner2</div>
</div>
</body>
</html>
16_CSS盒子模型 17_margin合并问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>17_margin合并问题</title>
<style>
.box{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
margin-bottom: 50px;
}
.box2{
background-color: orange;
margin-top: 60px;
}
.test{
width: 200px;
height: 200px;
display: inline-block;
}
.testA{
background-color: red;
margin-right: 50px;
}
.testB{
background-color: orange;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<hr>
<div class="test testA">a</div>
<div class="test testB">b</div>
</body>
</html>
16_CSS盒子模型 18_处理内容的溢出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>18_处理内容的溢出</title>
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
/* 默认显示visible 滚动条 scroll 隐藏hidden 自动适应auto*/
/* overflow: visible; */
/* 控制横向 不建议使用 不能x用visible y用hidden*/
overflow-x: auto;
/* 控制纵向 不建议使用 不能x用visible y用hidden*/
overflow-y: auto;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quaerat perferendis laborum adipisci modi
facilis cupiditate a numquam iste voluptatum laboriosam voluptatibus optio, maxime quam, exercitationem placeat
qui. Perspiciatis, rem?
</div>
</body>
</html>
16_CSS盒子模型 19_隐藏元素的两种方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19_隐藏元素的两种方式</title>
<style>
.box {
width: 400px;
height: 400px;
/* background-color: skyblue; */
}
.box1{
background-color: red;
/* display:none 看不到不占位置 */
/* visibility:show 占位保留原有位置 */
/* 显示show 隐藏hidden */
visibility: show;
}
.box2{
background-color: orange;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
</body>
</html>
16_CSS盒子模型 20_样式的继承
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20_样式的继承</title>
<style>
/* 跟布局和盒子相关的都不能继承 */
body{
font-size: 50px;
color: yellow;
font-weight: 100;
}
#d1{
height: 600px;
padding: 100px;
background-color: gray;
}
#d2{
height: 400px;
background-color: orange;
padding: 50px;
}
#d3{
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3" style="font-family: 'Courier New', Courier, monospace;">你好啊</div>
</div>
</div>
</body>
</html>
16_CSS盒子模型 21_元素的默认样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>21_元素的默认样式</title>
<style>
body{
margin: 0;
}
div{
font-size: 50px;
color: red;
}
a{
color: orange;
cursor: grabbing;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<a href="https://www.baidu.com">去百度</a>
<span>你好啊</span>
</div>
<hr>
<h1>一级标题</h1>
<hr>
<h2>二级标题</h2>
<ul>
<li>张三</li>
<li>李四</li>
</ul>
</body>
</html>
16_CSS盒子模型 22_布局的技巧1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>22_布局的技巧1</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
overflow: hidden;
}
.inner{
width: 200px;
height: 100px;
padding: 5px;
border: 5px solid black;
background-color: red;
margin: 0px auto;
margin-top: 150px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">inner</div>
</div>
</body>
</html>
16_CSS盒子模型 23_布局的技巧2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>22_布局的技巧2</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
line-height: 400px;
}
.inner{
background-color: orange;
font-size: 20px;
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">出来玩啊?</span>
</div>
</body>
</html>
16_CSS盒子模型 24_布局的技巧3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>24_布局的技巧3</title>
<style>
.outer{
width: 400px;
height: 400px;
background-color: gray;
text-align: center;
font-size: 0px;
}
.inner{
line-height: 400px;
background-color: yellow;
vertical-align: middle;
font-size: 40px;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">出来玩啊</span><img src="../../favicon.ico" alt="">
</div>
</body>
</html>
16_CSS盒子模型 25_元素之间的空白问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>25_元素之间的空白问题</title>
<style>
div{
font-size: 0;
}
span{
width: 200px;
}
.s1{
background-color: red;
}
.s2{
background-color: orange;
}
.s3{
background-color: blue;
}
</style>
</head>
<body>
<div>
<span class="s1">人之初</span>
<span class="s2">性本善</span>
<span class="s3">性相近</span>
<hr>
<img src="../../favicon.ico" alt="">
<img src="../../favicon.ico" alt="">
<img src="../../favicon.ico" alt="">
</div>
</body>
</html>
16_CSS盒子模型 26_行内块的幽灵空白问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>26_行内块的幽灵空白问题</title>
<style>
div {
width: 600px;
background-color: red;
/* */
/* font-size: 0; */
}
img{
/* vertical-align: bottom; */
/* display: block; */
}
</style>
</head>
<body>
<div>
<img src="../../favicon.ico" alt="">
</div>
</body>
</html>
17_CSS浮动 01_浮动_简介
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_浮动_简介</title>
<style>
div {
width: 400px;
height: 400px;
background-color: skyblue;
}
img{
width: 200px;
/* 文字环绕图片 */
float: right;
}
.test::first-letter{
font-size: 80px;
float: left;
}
</style>
</head>
<body>
<div>
<img src="../../favicon.ico" alt="">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga quae magni dolor! Itaque voluptatibus veniam ab placeat quasi alias sequi similique. Veritatis quaerat, modi earum nemo placeat illum iusto voluptate molestias asperiores? Corporis necessitatibus quia, consectetur id dignissimos natus dolorem aliquam repellendus error? Saepe veritatis dolores vitae mollitia aperiam quod. Reprehenderit voluptates accusamus quidem aliquid facere dolorum nostrum omnis. Totam exercitationem atque, a aliquid voluptatem facilis tempora beatae quo nesciunt nihil quas illo officia quos cumque dolorum tenetur soluta? Fugit unde repellendus architecto sunt corrupti quos suscipit officiis cumque officia quam, quae, sapiente impedit optio aspernatur atque nobis totam reprehenderit!</div>
<hr>
<div class="test"><span>L</span>orem ipsum, dolor sit amet consectetur adipisicing elit. Amet, incidunt necessitatibus! Sint quas cumque magnam porro omnis consequatur, quidem optio natus. Nesciunt ullam ratione maxime aliquid similique commodi iure. Ipsa cupiditate sapiente dolor ipsum voluptate neque. Dolor quas modi at ullam temporibus sapiente cumque exercitationem! Ratione, iusto. Perferendis, excepturi? Minima.</div>
</body>
</html>
17_CSS浮动 02_元素浮动后的特点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_元素浮动后的特点</title>
<style>
.outer{
width: 800px;
height: 400px;
background-color: gray;
}
.box{
font-size: 20px;
padding: 10px;
float: left;
}
.box1{
background-color: skyblue;
}
.box2{
background-color: orange;
}
.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>
17_CSS浮动 03_浮动的小练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_浮动的小练习</title>
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
float: left;
}
.box1 {
/* float: left; */
height: 300px;
}
/* .box2 {
float: left;
}*/
</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>
17_CSS浮动 04_浮动后的影响
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_浮动后的影响</title>
<style>
.outer{
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box{
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
/* float: left; */
}
.box1,.box2,.box3 {
float: left;
}
</style>
</head>
<body>
<div class="outer">
<!-- <div class="box box0">0</div> -->
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<!-- <div class="box box4">4</div> -->
</div>
</body>
</html>
17_CSS浮动 05_解决浮动后的影响
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_解决浮动后的影响</title>
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
/* 第一种解决方案 */
/* height: 122; */
/* 第二种解决方案 */
/* float: left; */
/* 第三种方案 */
/* overflow: hidden; */
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
/* float: left; */
}
.box1,
.box2,
.box3,
.box4 {
float: left;
}
/* .box4{
display: inline-block;
} */
/* 第四种解决方案 */
/* .mofa {
clear: both;
} */
/* .box4{
clear: both;
}
*/
/* 第五种方案 */
.outer::after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="outer">
<!-- <div class="box box0">0</div> -->
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<!-- <div class="mofa"></div> -->
</div>
</body>
</html>
18_CSS定位 01_相对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_相对定位</title>
<style>
.outer{
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
}
.box{
width: 200px;
height: 200px;
font-size: 20px;
}
.box1{
background-color: #888;
}
.box2{
background-color: orange;
position: relative;
left: 100px;
}
.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>
18_CSS定位 02_绝对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_绝对定位</title>
<!--
何为包含块
1.没有脱离文档流的元素，父元素就是包含块
2.脱离文档流的元素，第一个开启定位的祖先元素，就是他的包含块
-->
<style>
.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;
left: 100px;
}
.box3{
background-color: green;
}
.outer:hover .box2{
/* transition: 1s all linear; */
left: 220px;
}
</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>
18_CSS定位 03_固定定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_固定定位</title>
<style>
.outer{
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
}
.box{
width: 200px;
height: 200px;
font-size: 20px;
}
.box1{
background-color: #888;
}
.box2{
background-color: orange;
position: fixed;
top: 0;
left: 0;
}
.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>
6166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
