前端CSS3(一)

一、基础认知

1.1 CSS介绍

CSS：层叠样式表(Cascading style sheets)

问题1：CSS作用是什么?

给页面中的HTML标签设置样式

问题2：写在哪里?

css写在style标签中，style标签一般写在head标签里面，title标签下面

问题3：怎么写?

1.2 CSS引入方式

内嵌式：CSS 写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

外联式：CSS 写在、个单独的.css文件中
提示：需要通过link标签在网页中引入

行内式：CSS 写在标签的style属性中
提示：不推荐使用，之后会配合js使用

问题：CSS常见三种引入方式的特点区别有哪些(书写位置、作用范围、使用场景)?

二、基础选择器

2.1 选择器的作用

选择器的作用：选择页面中对应的标签(找)，方便后续设置样式(改)

2.2 标签选择器

结构：标签名 {css属性名：属性；}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：
①标签选择器选择的是一类标签，而不是单独某一个
②标签选择器无论嵌套关系有多深，都能找到对应的标签

2.3 类选择器

结构：.类名 {css属性名：属性值；}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：
①所有标签上都有class属性，class属性的属性值称为类名(类似于名字)
②类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
③一个标签可以同时有多个类名，类名之间以空格隔开
④类名可以重复，一个类选择器可以筒时选中多个标签

2.4 id选择器

结构：#id属性值 {css属性名：属性值；}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：
        ①所有标签上都有id属性
        ②id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
        ③一个标签上只能有一个id属性值
        ④一个id选择器只能选中一个标签

2.5 通配符选择器

结构：*{css属性名：属性值；}

作用：找到页面中所有的标签，设置样式

注意点:
①开发中使用极少，只会在极特殊情况下才会用到
②在小页面中可能会用于去除标签默认的margin和padding

三、字体和文本样式

3.1 字体样式

1. 字体大小：font-size

属性名：font-size

取值：数字 + px

注意点：
①谷歌浏览器默认文字大小是16px
②单位需要设置，否则无效

2. 字体粗细：font-weight

属性名：font-weight

取值：
关键字：

纯数字:100~900的整百数：

注意点：
①不是所有字体都提供了九种粗细，因此部分取值页面中无变化；
②实际开发中以：正常、加粗两种取值使用最多。

3. 字体样式：font-style(是否倾斜)

属性名：font-style

取值：
正常(默认值)：normal
倾斜：italic

4.字体类型：font-family

属性名：font-family

常见取值：具体字体1,具体字体2,具体字体3,具体字体4..,字体系列
具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等......
字体系列：sans-serif、serif、monospace等......

渲染规则：
1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点:
        ①如果字体名称中存在多个单词，推荐使用引号包裹
        ②最后一项字体系列不需要引号包裹
        ③网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

常见字体系列(了解)

无衬线字体(sans-serif)

1. 特点：文字笔画粗细均匀，并且首尾无装饰
2. 场景：网页中大多采用无衬线字体
3. 常见该系列字体：黑体、Arial

衬线字体(serif)

1.特点：文字笔画粗细不均，并且首尾有笔锋装饰
2. 场景：报刊书籍中应用广泛
3.常见该系列字体：宋体、Times New Roman

等宽字体(monospace)

1. 特点：每个字母或文字的宽度相等
2. 场景：一般用于程序代码编写，有利于代码的阅读和编写
3. 常见该系列字体：Consolas、fira code

样式的层叠问题

问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢?

结果：如果给同一个标签设置了相同的属性，此时样式会层叠(覆盖)，写在最下面的会生效

TIP:
CSS(Cascading style sheets) 层叠样式表
所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

5. 字体类型：font属性连写

属性名：font(复合属性)

取值：font : style weight size family；

省略要求:
只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面

3.2 文本样式

1. 文本缩进：text-indent

属性名：text-indent

取值：
数字+px
数字+em(推荐：1em=当前标签的font-size的大小)

2. 文本水平对齐方式：text-align

属性名：text-align

取值：

注意点：如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置

水平居中方法总结 text-align：center

text-align：center能让哪些元素水平居中?
1. 文本
2.span标签、a标签
3.input标签、img标签

注意点：如果需要让以上元素水平居中， text-align：center 需要给以上元素的父元素设置

3. 文本修饰：text-decoration

属性名：text-decoration

取值：

注意点：开发中会使用 text-decoration:none；清除a标签默认的下划线

3.3 line-height行高

作用：控制一行的上下行间距

属性名：line-height

取值：
数字+px
倍数(当前标签font-size的倍数)

应用：
1.让单行文本垂直居中可以设置 line-height：文字父元素高度
2.网页精准布局时，会设置 line-height：1 可以取消上下间距（line-height：1 表示行高是1倍，即字号大小）

行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font : style weight size/line-height family ;

拓展：颜色常见取值(了解)

属性名：
如：文字颜色：color
如：背景颜色：background-color

属性值：

拓展：标签水平居中方法总结 margin：0 auto

问题：如果需要让div、p、h(大盒子)水平居中?
可以通过margin：0 auto；实现

注意点：
①如果需要让 div、p、h(大盒子)水平居中，直接给当前元素本身设置即可
②margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

四、Chrome调试工具

方法：在浏览器打开的页面空白处，点击鼠标右键，选择”检查“

五、综合案例

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>你好</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;
        }
        
        .indent {
            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="indent">
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图 像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得 到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程 代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
        </p>
        <p class="indent">
            这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美 国斯坦福大学的计算生物学家迈克尔·菜维特因"为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013 年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机 的1万倍。“我们今天确实拥有相当可观的计算能力，"他说，“问题在于，我们仍然需要思考。"
        </p>
        <p class="indent">
            如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是 毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近 日，《自然》(Nature)杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出 了其中10个关键的计算机项目。
        </p>
        <p class="indent">
            最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机 器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多 科学家难以掌握。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>你好</title>
    <style>
        body {
            background-color: #f5f5f5;
        }
        
        .goods {
            width: 234px;
            height: 300px;
            background-color: red;
            /* 让标签div居中 */
            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;
        }
        
        .money {
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>

<body>
    <!-- div 用来网页布局，一个页面可能用无数次，原则:如果使用div,尽量使用类名控制样式 -->
    <div class="goods">
        <img src="./images/car.jpg" alt="" />
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="money">1999元</div>
    </div>
</body>

</html>