CSS 叫 层叠样式表， 用来 给html页面修改样式。 可以让页面更美观
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>
<!-- 内嵌式 -->
<style>
div {
color: pink;
}
</style>
</head>
<body>
<div>我是一个盒子</div>
<div>我是一个盒子</div>
<div>我是一个盒子</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>
<!-- 外部样式表 外联式 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
</body>
</html>
行内式
<p style="color: green">我是个屁</p>
3.三种样式表对比
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | CSS写在style标签中 | 当前页面 | 小案例 |
| 外联式 | 在单独的css文件中，通过link标签引入 | 多个页面 | 项目中 |
| 行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
基本选择器包括：表签选择器、类选择器、id选择器、通配符选择器
语法是：标签名{样式属性；}
结构是：
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
样式的写法：
p {
color: red;
font-style: 20px;
}
注意：标签选择器是选择当前页面里面所有的一类标签，比如选择页面所有的页面标签。
样式点定义，结构(class)调用
css样式
.red {
color: red;
}
html结构
<span>大牌5折购</span>
<span class="red">开学季</span>
<span>放学季</span>
<span>休学季</span>
使用方法跟类非常的相似。样式 #定义，结构id调用
css
#last{
color: blue;
}
html
<div>我是div</div>
<div>我是div</div>
<div id="last">我是div</div>
和类选择器的区别 （使用次数上）
1.类选择器相当于人的名字，可以重复，可以多次使用。
2.ID选择器相当于人的身份证，只能使用一次，唯一的。
选中所有的标签 *
css：
*{
color: red;
}
html：
<div>我是div</div>
<p>我是段落</p>
<h2>标题</h2>
注意：特殊情况使用
一般使用font-size
size是大小的意思(比如：鞋号)
font：指的是文字
css:
span{
font-weight: 700;
}
html:
<span>优惠</span>
有两组设置
字体不加粗
font-weight: 400;
font-weight: normal;
字体加粗
font-weight: 700;
font-weight: blod;
注意我们更提倡使用数字表示，注意数字不要跟单位
让span加粗的写法：
span{
font-weight: 700;
}
让标题不加粗
h2{
font-weight: 400;
}
em {
font-style: normal;
}
1.语法规范，必须按照swsf(稍微舒服)的顺序写，不能改变顺序。
font: 字体样式 字体加粗 字体大小 字体
2.字体是大小和字体的种类不能省略，font-family和font-size不能省略的，否则连写失效。
可以实现文本的首行缩进效果
p {
text-indent: 2em;
}
em:当前文字大小的单位，1em相当于当前一个文字的大小
h2 {
text-align: center;
}
div {
/* 下划线 */
/* text-decoration: underline; */
/* 上划线 */
/* text-decoration: overline; */
/* 删除线 （贯穿线） */
/* text-decoration: line-through; */
}
a {
color: #333;
/* 取消下划线 */
text-decoration: none;
}
/* 鼠标经过a的时候 */
a:hover {
color: orange;
/* 显示下划线 */
text-decoration: underline;
}
<div> 折扣 </div>
<a herf="#"> 小米 </a>
.box {
width: 400px;
height: 400px;
background-color: pink;
line-height: 400px;
/* text-align: center; */
margin: 0 auto;
}
注意：
/*可以让div盒子的内容水平居中/
text-align: center;
/让div盒子在浏览器水平居中*/
margin: 0 auro;
1.如果行高等于盒子的高度，则里面的单行文字会垂直居中
2.如果行高大于盒子的高度，则里面的单行文字会垂直偏下
3.如果行高小于盒子的高度，则里面的单行文字会垂直偏上
<div class="box">
<div class="one">
<h1>《自然》评选改变科学的10个计算机代码项目</h1>
<span>2077年01月28日14:58</span>
<i>新浪科技</i>
<a href="#">收藏文本</a>
</div>
<hr />
<p>
2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
</p>
<p>
这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”
</p>
<p>
如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。
</p>
<p>
最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x
= 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。
</p>
</div>
.box {
width: 900px;
margin: 0 auto;
}
.one {
text-align: center;
}
p {
text-indent: 2em;
}
i {
font-style: normal;
color: skyblue;
font-weight: 700;
}
a {
text-decoration: none;
}
<div class="box">
<img src="./images/car.jpg" alt="" class="pic" />
<h4>九号平衡车</h4>
<p>成年人的玩具</p>
<span>1999元</span>
</div>
* {
margin: 0;
}
body {
background-color: #f5f5f5;
}
.box {
margin: 0 auto;
width: 234px;
height: 300px;
text-align: center;
background-color: #fff;
}
.pic {
width: 160px;
}
img {
width: 160px;
}
h4 {
height: 25px;
font-weight: 400;
}
p {
font-size: 12px;
color: #ccc;
height: 30px;
}
span {
color: #ffa500;
font-style: 14px;
}
;
height: 300px;
text-align: center;
background-color: #fff;
}
.pic {
width: 160px;
}
img {
width: 160px;
}
h4 {
height: 25px;
font-weight: 400;
}
p {
font-size: 12px;
color: #ccc;
height: 30px;
}
span {
color: #ffa500;
font-style: 14px;
}
