目录
一、CSS基础认知
1.1 CSS的介绍
CSS：层叠样式表。
CSS的作用是什么？
· 结构：HTML（决定了身体）
· 表现：CSS（决定了样式美观）
· 行为：JavaScript（决定了交互的动态效果）
1.2 CSS语法规则
CSS 写在 style 标签中，style 标签一般写在 head 标签里面，title标签下面。
<!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>03.CSS基础--01.体验css</title>
<style>
/*CSS的注释*/
/*这个区域写的都是CSS*/
/*选择器 + {CSS属性}*/
/*选择器：查找标签*/ /*css文件（样式文件）中不需要任何的结构以及辅助代码*/
p{
color: blue; /*文字变蓝色*/
font-size: 30px; /*字变大，px：像素（单位）*/
background-color: aqua;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
1.3 CSS引入方式
1、内嵌式：CSS 写在 style 标签中。（示例1.2中代码块）
· style 标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中。
2、外联式：CSS 写在一个单独的 .css 文件中。
· 需要通过 link 标签在网页中引入。
<!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>03.CSS基础--02.CSS的引入(外联式)</title>
<link rel="stylesheet" href="./02.css">
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>3、行内式：CSS 写在标签的 style 属性中。
【总结】
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | CSS 写在 style 标签中 | 当前页面 | 小案例 |
| 外联式 | CSS 写在单独的 css 文件中，通过 link 标签的引入 | 多个页面 | 项目中 |
| 行内式 | CSS 写在标签的 style 属性中 | 当前标签 | 配合 js 使用 |
二、基础选择器
选择器作用：选择页面中对应的标签（找），方便后续设置样式（改）。
2.1 标签选择器
· 结构：标签名 { css属性名：属性值; }
· 作用：通过标签名，找到页面中所有这类标签，设置样式。
1、标签选择器选择的是一类标签，而不是单独某一个；
2、标签选择器无论嵌套关系有多深，都能找到对应的标签；
3、标签选择器选中的所有这个标签都生效 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>03.CSS基础--03.标签选择器</title>
<style>
/*选择器{ }，标签选择器就是已标签命名的选择器。*/
p{
color: red;
}
</style>
</head>
<body>
<p>p1p1p1p1p1p1</p>
<p>p2p2p2p2p2p2</p>
<p>p3p3p3p3p3p3</p>
</body>
</html>
2.2 类选择器
· 结构：.类名 { css属性名：属性值; }
· 作用：通过类名，找到页面中所有带这个类名的标签，设置样式。
1、所有标签上都要有 class 属性，class 属性的属性值成为类名（类似于名字）。
2、类名可以由数字、字母、下划线、中划线组成，但是不能以数字或者中划线开头。
3、一个标签可以同时有多个类名，类名之间以空格隔开。
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>03.CSS基础--04.类选择器</title>
<style>
.blue{
color: blue;
}
</style>
</head>
<body>
<p>111</p>
<p class="blue">222</p>
<div class="blue">333</div>
</body>
</html>
2.3 id 选择器
· 结构：# id 属性值 { css属性名：属性值; }
· 作用：通过 id 属性值，找到页面中带这个 id 属性值的标签，设置样式。
1、所有标签上都有 id 属性；
2、id 属性值类似于身份证号码，在一个页面是唯一的，不可重复的！
3、一个标签上只能有一个 id 属性；
4、一个 id 选择器只能选中一个标签。
2.4 通配符选择器
· 结构：* { css属性名：属性值; }
· 作用：找到页面中所有的标签，设置样式。
在实际开发中使用极少，只有在极特殊情况下才会用到；在基础较为薄弱的开始，可能会用于去除标签的 margin 和 padding 。
三、字体和文本样式
3.1 字体样式
1、字体大小：font-size
取值：数字 + px ；单位需要设置，否则无效；谷歌浏览器默认文字大小是16px。
<!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>03.CSS基础--05.字体样式(大小)</title>
<style>
p{font-size: 30px;}
</style>
</head>
<body>
<p>段落文字大小</p>
</body>
</html>2、字体粗细：font-weight
取值：
【关键字】正常 normal 加粗 bold
【纯数字: 100-900 的整百数】正常 400 加粗 700
· 不是所有的字体都提供了九种粗细，因此部分取值页面中无变化；实际开发中，正常、加粗两种取值使用最多。
3、字体样式：font--style
取值：正常 (默认值): normal 倾斜: utalic
4、字体类型：font-family
· 如果字体名称中存在多个单词，推荐使用引号包裹；最后一项字体系列不需要引号包裹；网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示。
【常见的字体系列】
A、无衬线字体：sans-serif
B、衬线字体：serif
C、等宽字体：monospace
【样式层叠问题】
问题：给一个标签设置了相同的样式，此时浏览器会如何渲染？
答：如果给一个标签设置了相同的属性，此时样式就会层叠(覆盖)，写在最下面的会生效。
注：CSS (Cascading style sheets) 层叠样式表：所谓层叠即叠加的意思，表示央视可以一层一层的层叠覆盖。
5、字体 font 相关属性的连写：font 属性连写
取值：font: style weight size family;
省略要求：只能省略前两个(倾斜、加粗)，如果省略了相当于设置了默认值。
· 如果需要同时设置单独和连写形式，要么把单独的样式写在连写下面，要么把单独的样式写在连写里面。
3.2 文本样式
1、文本缩进：text - indent
取值：(1) 数字 + px ;
（2）数字 + em（推荐：1 em = 当前标签的 font-size 的大小）
2、文本水平对齐方式：text - align
取值：左对齐left 居中对齐center 右对齐right
如果需要让文本水平居中，text-align 属性给文本所在标签(文本的父元素)设置。
【 居中对齐 center 】
text-align：center 能让哪些元素水平居中？——文本、span标签、a标签、input标签、img标签。
如果需要让以上元素水平居中，text-align：center 需要给以上元素的父元素设置。
3、文本修饰：text - decoration
取值：下划线 underline 删除线 line-through 上划线 overline 无装饰线 none
注意：实际开发时会使用 text-decoration：none；清除 a 标签默认的下划线。
3.3 line-height 行高
取值：(1) 数字 + px；(2) 倍数（当前标签font-size的倍数）。
应用：(1) 让单行文本垂直居中可以设置 line-height：文字父元素高度。
(2) 网页精准布局时，会设置 line-height：1，可以取消上下间距。
行高与 font 连写的注意点：如果同时设置了行高和 font 连写，注意覆盖问题。
font：style weight size/line-height family;
<!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>03.CSS基础--06.行高与font连写</title>
<style>
p{
/*line-height:50px;*/
/*line:height 1.5*/ /*指的是自己字号的1.5倍*/
font:italic 700 66px/2 宋体;
/*66px 宋体 倾斜 加粗 行高是2倍*/
}
</style>
</head>
<body>
<p>2019年,事件视界望远镜团队让世界首次看到了西班牙和南极地区的射电望远镜所得到的数据，研究也可以在此基础上进一步加以分析。</p>
</body>
</html>
四、Chrome 调试工具。(鼠标右键-->检查）
五、拓展1：颜色常见取值（了解）
1、属性名：(1) 文字颜色：color (2) 背景颜色：background-color
2、属性值：
| 颜色表示方法 | 表示含义 | 属性值 |
|---|---|---|
| 关键词 | 预定义的颜色 | red、green、blue、yellow... |
| rgb 表示法 | 红绿蓝三原色， 每项取值范围 0-255 | rgb(0,0,0) , rgb(255,255,255) , rgb(255,0,0)... |
| rgba 表示法 | 红绿蓝三原色 + a 表示透明度， 取值范围 0-1 | rgba(255,255,255,0.5) , rgba(255,0,0,0.3)... |
| 十六进制表示法 | # 开头，将数字转换成十六进制表示 | #000000 , #ff0000 , #e92322 , 简写：#000 , #f00 |
六、拓展2：标签水平居中方法总结
margin : 0 auto；
1、如果需要让 div、p、h（大盒子）水平居中，可以通过 margin：0 auto；来实现。
2、margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。
七、综合案例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{
width: 800px;
height: 600px;
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>八、综合案例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>
body{
background-color: #f5f5f5;
}
.goods{
width: 234px;
height: 300px;
background-color: #fff;
margin: 0 auto; /*标签div居中*/
text-align: center; /*内容居中*/ /*在父级中设置居中，则父集下的内容都居中*/
}
img{
width: 160px;
}
.title{
font-size: 14px;
line-height: 25px;
}
.introduce{
font-size: 12px;
color: #ccc;
line-height: 30px;
}
.price{
font-size: 14px;
color: #ffa500;
}
</style>
</head>
<body>
<div class="goods">
<img src="./car.jpg" alt="">
<div class="title">九号平衡车</div>
<div class="introduce">成年人的玩具</div>
<div class="price">1999元</div>
</div>
</body>
</html>
2281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
