2022黑马程序员-前端学习第一阶段（Day03-CSS基础）
CSS基础-Day03 学习笔记打卡
- CSS基础
-
- 基础认知
-
- CSS知识
- CSS引入方式（三种）
- 基础选择器
-
- 标签选择器
- 类选择器
- id选择器
- 类与id选择器的区别
- 通配符选择器
- 字体和文本样式
-
- 字体样式
- 文本样式
- line-height行高
- Chrome调试工具
-
- 颜色取值（扩展）
- 综合案例代码示例
学习视频B站：黑马程序员-前端学习（第一阶段）
CSS基础
基础认知
CSS知识
CSS： 层叠样式表（Cascading style sheets）
CSS作用是什么？？
给页面中的HTML标签设置样式
写在哪里？
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>Documenttitle>
<style>
/* CSS注释 */
/* 这里写的都是CSS */
/* 选择器{CSS属性} */
/* 选择器：查找标签 */
p{
color: red;
font-size: 60px;
background-color: salmon;
}
style>
head>
<body>
<p>hello world 你好世界p>
body>
html>
CSS常见属性
| CSS常见属性 | 作用 |
|---|---|
| color | 文字颜色 |
| font-size | 字体大小 |
| background-color | 背景颜色 |
| width | 宽度 |
| height | 高度 |
注意点：
- CSS 标点符号都是英文状态下的
- 每一个样式键值对写完之后，最后需要写分号
CSS引入方式（三种）
内嵌式： CSS 写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
外联式： CSS 写在一个单独的.css文件中
提示：需要通过link标签在网页中引入
行内式： CSS 写在标签的style属性中
提示：基础班不推荐使用，之后会配合js使用
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | CSS 写在style标签中 | 当前页面 | 小案例 |
| 外联式 | CSS 写在一个单独的.css文件中，通过link标签引入 | 多个页面 | 项目中 |
| 行内式 | CSS 卸载标签的style属性中 | 当前标签 | 配合js使用 |
基础选择器
标签选择器
结构： 标签名 { css属性名：属性值； }
作用： 通过标签名，找到页面中所有这类标签，设置样式
注意点：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器
结构： .类名 { css属性名：属性值； }
作用： 通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签
id选择器
结构： #id属性值 { css属性名：属性值； }
作用： 通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签
类与id选择器的区别
class类名与id属性值的区别
• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
类选择器与id选择器的区别
• 类选择器以 . 开头
• id选择器以 # 开头
实际开发的情况
• 类选择器用的最多
• id一般配合js使用，除非特殊情况，否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）
通配符选择器
结构： * { css属性名：属性值； }
作用： 找到页面中所有的标签，设置样式
注意点：
- 开发中使用极少，只会在极特殊情况下才会用到
- 在基础班小页面中可能会用于去除标签默认的margin和padding（后续讲解）
*{ margin: 0; padding: 0; }
字体和文本样式
字体样式
字体大小： font-size
• 数字+px
字体粗细： font-weight
• 正常：normal 或 400
• 加粗：bold 或 700
字体样式： font-style
• 正常：normal
• 倾斜：italic
字体系列： font-family
• 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
字体连写： font
• font : style weight size family;
文本样式
| 样式 | 属性名 | 常见属性值 |
|---|---|---|
| 文本缩进 | text-indent | 数字+px/数字+em |
| 文本水平对齐方式 | text-align | left/center/right |
| 文本修饰 | text-decoration | underline/none |
line-height行高
作用： 控制一行的上下行间距
属性名： line-height
取值：
• 数字+px
• 倍数（当前标签font-size的倍数）
应用：
1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距
行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;
Chrome调试工具
颜色取值（扩展）
| 颜色表示方式 | 表示含义 | =属性值 |
|---|---|---|
| 关键词 | 预定义的颜色名 | red、green·、blue、yellow… |
| rgb表示法 | 红绿蓝三原色。每项取值范围:0~255 | rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)… |
| rgba表示法 | 红绿蓝三原色+a表示透明度，取值方位是：0~1 | rgba(0,0,0,0.5)、rgba(255,255,255,0.3)、rgba(255,0,0,0.7)… |
| 十六进制表示法 | # 开头，将数字转换成十六进制表示 | #000000、#ff0000、#e92322，简写#000、#f00 |
综合案例代码示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.box {
width: 800px;
/* background-color: orange; */
/* 让当前新闻整体div大盒子水平居中 */
margin: 0 auto;
}
.time {
color: grey;
}
.sina {
color: skyblue;
font-weight: 700;
}
a {
/* 去除a标签的下划线 */
text-decoration: none;
}
h1 {
/* background-color: pink; */
/* 要让文本在h1标签中水平居中！！！ */
text-align: center;
}
.info {
/* 让span、a标签在p标签中水平居中 */
text-align: center;
}
.content {
/* 首行缩进两个字 */
text-indent: 2em;
}
style>
head>
<body>
<div class="box">
<h1>《自然》评选改变科学的10个计算机代码项目h1>
<p class="info">
<span class="time">2077年01月28日14:58 span>
<span class="sina">新浪科技span>
<a href="#">收藏本文a>
p>
<hr>
<p class="content">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。p>
<p class="content">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”p>
<p class="content">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。p>
<p class="content">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。p>
div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 可以通过给body标签设置背景颜色完成设置浏览器的背景颜色 */
body {
background-color: #f5f5f5;
}
.box {
width: 234px;
height: 300px;
background-color: #fff;
margin: 0 auto;
/* 让内部的img和文本类型的元素水平居中 */
text-align: center;
}
.pic {
width: 160px;
}
.product {
height: 25px;
font-size: 14px;
}
.info {
height: 30px;
font-size: 12px;
color: #cccccc;
}
.price {
font-size: 14px;
color: #ffa500;
}
style>
head>
<body>
<div class="box">
<img src="./images/car.jpg" alt="" class="pic">
<div class="product">九号平衡车div>
<div class="info">成年人的玩具div>
<div class="price">1999元div>
div>
body>
html>
