目录
5.hover伪类选择器（选中鼠标悬停在元素上的状态，设置样式）
3.行内块元素（标签） input、textarea、img、button
一、CSS常见属性
- color
- font-size
- background-color
- width
- height
<style>
/* ctrl 加/ css注释*/
/* 这里写的都是CSS */
/* 选择器：查找标签此时选择器查找标签p */
/* CSS写尺寸都要加px */
p{
/* 文字颜色变成红色 */
color: red;
/* 字变大 px像素的意思*/
font-size: 30px;
/* 背景颜色*/
background-color: green;
width: 400px;
height: 400px;
}
</style>二、CSS引用形式
//外联式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 关系：样式表 -->
<link rel="stylesheet" href="./my.css">
<!-- href 后面./接文件名 -->
</head>
<body>
<p>这是p标签</p>
</body>
</html>
/* 选择器加{} */
p{
color: red;
}
//行内式(配合js)
<div style="color: aqua;">这是div标签</div>三、基础选择器
| 标签选择器 | p{ } |
| 类选择器 | .one{ } |
| id选择器（配合js） | #id属性值{ } |
| 通配符选择器（选中所有标签，用于去间距） | *{ } |
四、字体和文本样式
1.字体
//字体大小
<style>
p{
font-size: 30px;
}
</style>
//字体粗细
<style>
div{
font-weight: 700;
/* 700加粗 */
}
h1{
font-weight: 400;
/* 400不加粗 */
}
</style>
//字体样式（倾斜）
<style>
div{
font-style: italic;
/* 变倾斜 */
}
em{
font-style: normal;
/* 变默认,em本来就是倾斜的属性,通过上面的代码变默认,也就是不倾斜 */
}
</style>
//字体类型
<style>
p{
font-family: 宋体,微软雅黑,sans-serif;
/* 如果电脑没有安装宋体,那就按微软雅黑显示文字 */
/* 如果电脑没有安装微软雅黑,那就按任意一种无衬性字体系列显示 */
}
</style>
//样式层叠(一层一层覆盖)
<style>
p{
color: aliceblue;
color: red;
}
</style>
//font连写
<style>
p{
/* font：style weight size family*/
/* font： 倾斜 粗细 大小 字体 */
font:italic 700 30px 宋体 ;
/* 如果想省略 只是省略前面两个,那么中两个就是默认值 */
font:70px 宋体 ;
}
</style>
2.文本
//文本缩进
<style>
p{
/* text-indent: 32px; */
/* 默认是16px字号大小，缩进两个字号就是32px，具有局限性,后期改字号，那文本缩进还要改，浪费时间 */
text-indent: 2em;
/* 1em是一个字的大小 */
}
</style>
//文本对齐方式（图片、视频也可以进行居中）
<style>
h1{
text-align: right;
}
/* 文字在和 h1之间 */
body{
text-align: center;
}
/* 图（img）在 body之间 */
</style>
//文本修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* 下划线，常用*/
text-decoration: underline;
}
p{
/* 删除线 */
text-decoration: line-through;
}
h2{
/* 上划线 */
text-decoration: overline;
}
a{
/* 无装饰线，常用，去超链接的的默认下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<h2>h2</h2>
<a href="#">我是超链接,点呀~</a>
</body>
</html>
3.行高
<style>
p{
/* line-height: 50px; */
line-height: 1.5;
/* 自己字号的1.5倍 */
font: italic 700 66px/2 宋体;
}
</style>
//font连写加行高
<style>
p{
/* font：style weight size/line-height family*/
/* font： 倾斜 粗细 大小 字体 */
font:italic 700 30px/1.5 宋体 ;
/* 如果想省略 只是省略前面两个,那么中两个就是默认值 */
font:70px 宋体 ;
}
</style>五、chrome调试工具
1.删除线——写了被覆盖了
2.删除线、黄色感叹号——代码写错了
可以实现页面调试到合适的然后回去改代码！！！！
颜色常见取值（了解）
六、案例练习（新闻网页）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 800px;
height: 600px;
/* background-color: pink; */
margin: 0 auto;
}
.center{
text-align: center;
}
.color1{
color: #808080;
}
.color2{
color: #87ceeb;
font-weight: 700;
}
a{
text-decoration: none;
}
.suojin{
text-indent: 2em;
}
</style>
</head>
<body>
<div >
<h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
<p class="center">
<span class="color1">2077年01月28日14:58 </span>
<span class="color2">新浪科技 </span>
<a href="#">收藏本文</a>
</p>
<hr>
<p class="suojin">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
<p class="suojin">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>
<p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
<p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
</div>
</body>
</html>七、案例练习（小米官网卡片）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #f5f5f5;
}
.good{
/* div就是用来网页布局的，可能用无数次，尽量用类名控制样式 */
width:234px;
height: 300px;
background-color: #fff;
/* 标签居中 */
margin: 0 auto;
/* 内容居中 */
text-align: center;
}
img{
width:160px;
/* 图片在白框里面，白框是图片的父级，因此在父级那里加个居中，那边框里面的内容都会居中 */
}
/* 产品标题 */
.title{
font-size: 14px;
line-height: 25px;
}
/* 介绍 */
.info{
color: #ccc;
font-size: 12px;
line-height: 30px;
}
.price{
font-size: 14px;
color:#ffa500;
}
</style>
</head>
<body>
<div class="good">
<img src="./car.jpg" >
<div class="title">九号平衡车</div>
<div class="info">成年人的玩具</div>
<div class="price">1999元</div>
</div>
</body>
</html>八、选择器进阶（解决更复杂的场景）
| 后代选择器 | p div{css} |
| 子代选择器 | p>div{css} |
| 并集选择器 | p,div,span{css} |
| 交集选择器 | p.one{css} |
| hover伪类选择器 | p:hover{css} |
1.后代选择器（儿子、孙子、重孙子）
<style>
/* 找到div儿子p设置字体颜色是红色 */
div p {
color: red;
}
</style>
<body>
<p>这是一个p标签</p>
<div>
<p>
ggggg
</p>
</div>
</body>2.子代选择器 （儿子）
<style>
div>p{
color: blue;
}
</style>
<body>
<div>
<p>这是一个p标签 </p>
<p>
<div>这是一个div标签</div>
</p>
</div>
</body>3.并集选择器（同时选择多种标签设置相同样式）
<style>
p,div,span{
color: brown;
}
</style>
<body>
<p>1111111</p>
<div>
<p>222222222</p>
</div>
<span>33333333</span>
</body>4.交集选择器（同时选择多种标签设置相同样式）
<style>
p.one{
color: blue;
}
</style>
<body>
<p>1111</p>
<p class="one">2222</p>
<p class="two">33333</p>
</body>5.hover伪类选择器（选中鼠标悬停在元素上的状态，设置样式）
<style>
a:hover{
color: brown;
}
</style>
<body>
<a href="#">这是一个链接</a>
</body>
emmet语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { /* font-size: ; */ font-size: ; /* 提示css属性: 单词的首字母 */ /* font-weight: ; */ font-weight: 700; width: ; height: ; /* background-color: ; */ background-color: #fff; /* line-height: ; */ line-height: /* 宽度300,高度是200,背景色是粉色 */ /* w300+h200+bgc */ width: 300px; height: 200px; background-color: pink; } </style> </head> <body> <div></div> <h1></h1> <!-- 生成div 带类名 --> <div class="box"></div> <p class="box"></p> <div id="box"></div> <p id="box"></p> <p class="red" id="one"></p> <!-- div 同级 p + --> <div></div> <p></p> <!-- 父子 > --> <div> <p></p> </div> <ul> <li></li> </ul> <!-- ul 有3个li *乘号 --> <ul> <li></li> <li></li> <li></li> </ul> <!-- ul里面有3个li, li里面有文字111 {文字} --> <!-- ul>li{111}*3 --> <ul> <li>111</li> <li>111</li> <li>111</li> </ul> <!-- ul有3个li, li文字1, 2, 3 --> <!-- ul>li{$}*3 --> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
九、背景相关属性
| 背景颜色 | background-color（bgc） |
| 背景图片 | background-img（bgi） |
| 背景平铺 | background-repeat（bgr） |
| 背景位置 | background-position（bgp） |
<style>
div{
width: 1200px;
height: 700px;
background-color: pink;;
background-image: url(./005UJ76vly1h2jcu5690bj34mo2lre84.jpg);
/* 最常用：background-repeat: no-repeat;不平铺，保持自己的大小 */
background-repeat: no-repeat;
/* background-repeat: repeat-y; */
/* 水平方向 竖直方向 */
/* background-position: right bottom; */
background-position: center;
/* 背景只显示在盒子里面，正数，右下；负数，左上 */
}
</style>
十、元素（标签）显示模式
1.块级元素（标签）div h1系列 p...
- 独占一行（一行显示一个）
- 可设置宽高
- 宽度默认是父元素的宽度，高度默认由内容撑开
2.行内元素（标签）a span ...
- 一行可以显示多个
- 不可以设置宽高
- 宽度和高度默认由内容撑开
3.行内块元素（标签） input、textarea、img、button
- 一行可以显示多个
- 可以设置宽高
4.显示模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
/* 行内块 */
display: inline-block;
}
span{
/* 块 */
width: 400px;
height: 400px;
background-color: rgba(47, 212, 212, 0.666);
display: block;
}
</style>
</head>
<body>
<!--
块级：独占一行，一行只显示那个标签内容，可以设置宽高
宽度默认跟父级一样大，例如这个div跟body宽度一样
-->
<div>11111</div>
<div>22222</div>
<span>33333</span>
</body>
</html>
HTML嵌套规范——嵌套规范
块嵌套行 （大装小）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- p(段落标签)和h（标题标签）不能相互嵌套 --> <!-- p里面不能包含div，p等块级元素 --> <p> <h1>111</h1> </p> <!-- a标签可以嵌套任何标签，除了嵌套他自己 --> </body> </html>HTML嵌套规范——居中方法
十一、CSS特性
1.继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* 控制文字的可以继承，不是则不能 */
/* 自己有颜色，则不会继承，譬如超链接 */
/* 自己有字号，则不会继承，譬如h系列 */
height: 800px;
color: pink;
}
</style>
</head>
<body>
<div>
这是一个div里面的文字
<span>
这是div里面的span
</span>
<a href="#">我绝对不会变颜色</a>
<h1>我绝对变不了你想要的字号</h1>
</div>
</body>
</html>2.层叠性
3.优先级
作用范围越小，优先级越高
权重计算（复合选择器优先级）
十二、chrome排错
- 调试块没有出现内容，则选择器写错了（写了颜色没变色且调试时没有color）
-
上一行出错, 下一行会受影响
-
离鼠标近为英文，中文间隙大
十三、PxCook使用
2602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
