跟随黑马学前端-5，CSS简介

第五天：CSS简介

本来无一物，何处惹尘埃

学习目标

  • CSS简介

  • CSS基础选择器

  • CSS字体属性

  • CSS文本属性

  • CSS引入方式

  • 综合案例

  • Chrome调试工具

CSS简介

CSS主要使用场景就是美化网页、布局页面的

  1. HTML的局限性

    只关注内容的语义，丑，繁琐臃肿

  2. CSS-网页的美容师 Cascading Style Sheets 层叠样式表

    CSS也是一门标记语言，主要设置HTML中的文本内容、图片的外形、版面的布局和外观显示样式

    可以美化HTML，使网页布局更加美观

CSS语法规范

image-20221101213758414

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
        /* 选择器 {样式} */
        /* 给谁改样式 {改什么样式} */
        p{
            color: red;
            font-size: 12px;
        }
    </style>

</head>
<body>
    <p>有点意思</p>
</body>
CSS基础选择器

作用：image-20221102214352135

把其中目标的标签选择出来就是选择器的作用。

基础选择器分4种：1通配符选择器 2元素选择器 3class类选择器 4id选择器

选择器分类

选择器分为基础选择器和复合选择器两个大类

  • 基础选择器是由单个选择器组成的

  • 基础选择器又包括：标签选择器、类选择器、id选择器、通配符选择器

标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

语法：

1
2
3
4
5
标签{
属性1;
属性2;
...
}

作用：

​ 标签选择器可以把某一类标签全部选择出来：比如所有的<div>和所有的<span>标签

优点：

​ 能快速为页面中同类型的标签设置统一样式

缺点：

​ 不能设计差异化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <title>基础选择器之标签选择器</title>

    <style>
        /* 标签选择器：选上标签名 */
        p{
            color: green;
        }
        div{
            color: pink;
        }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>
类选择器

如果想要差异化选择不同的标签，单独选择一个或者某一个标签，可以使用类选择器

语法：

1
2
3
4
.类名{
属性1;
属性2;
}

注意：

​ 类选择器使用"."（英文点号）进行标识，后面紧跟类名（自定义名称）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <title>基础选择器之标签选择器</title>

    <style>
        /* 类选择器：样式点定义，结构类(class)调用 一个或多个 开发最常用*/
        .red{
            color: green;
        }

    </style>

</head>
<body>
    <li class="red">冰雨</li>
    <li>来生缘</li>
    <li>李香兰</li>
    <li>生僻字</li>
    <li>freeStyle</li>

    <div class="red">我也想成为红色</div>
</body>
</html>
多类名

我们可以将一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签。即一个标签多个名字

  1. 多类名的使用方式

    1
    <div class="red font35">刘德华</div>

  2. 多个类名中间必须用空格分开

  3. 这个标签就可以分别具有这些类名的样式

id选择器

id选择器可以为特有id的HTML元素定义特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

语法：

1
2
3
4
5
#id名{
属性1;
属性2；
...
}

注意：

​ 与类选择器的区别是id选择器只能使用一次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <title>id选择器</title>

    <style>        
        /* id选择器的口诀： 样式#定义，结构id使用，只能使用一次，别人切勿使用 */
        #pink{
            color: pink;
        }
    </style>

</head>
<body>
    <div id="pink">陈奕迅</div>
</body>
</html>
通配符选择器

在CSS中，通配符选择器使用*来定义，它表示选取页面中所有元素（标签）

语法：

1
2
3
4
5
*{
属性1；
属性2;
...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!--
 * @Author: Joker Yue, Joker_Yue@qq.com
 * @Date: 2022-11-03 20:48:58
 * @LastEditors: Joker Yue
 * @LastEditTime: 2022-11-03 20:51:58
 * @FilePath: \HTML\02黑马\7.4.html
 * @Description:
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <title>通配符</title>

    <style>

        /* 这里把<html><body><head>等这些标签全部设置了红色 */
        *{
            color: red;
        }
    </style>
</head>
<body>
    <div>你是我的</div>
    <div>我是你的</div>
    <ul>
        <li>谁</li>
    </ul>
</body>
</html>

  • 通配符选择器不需要调用，自动就给所有的元素使用样式

  • 特殊情况才使用

CSS字体属性

CSS Font属性用于定义字体系列、大小、粗细和文本样式（斜体）

CSS使用font-family属性定义文本的字体系列
1
2
3
4
5
6
7
h2{
    /* 设置多个字体的意思是,如果用户电脑未安装第一种字体，就执行第二个字体，以此类推。 */
    font-family: "微软雅黑";
}
p{
    font-family:'Times New Roman', Times, serif;
}

  • 各种字体之间必须使用英文状态下的逗号隔开

  • 一般情况下，如果有空格隔开的多个单词的字体，加引号

  • 尽量使用系统默认字体，毕竟不是所有用户的电脑中都有那些字体

  • 最常用的几个字体：body(font-family:“Microsoft YaHei”;tahoma,"Hiragino Sans GB"😉

CSS使用font-size设置字体大小

注意：

​ 一定要带单位！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>字体大小</title>

   <style>
      body{
         font-size: 20px;
      }
      /* 标题文字比较特殊，需要单独设置文字大小 */
      h2{
         font-size: 32px;
      }
   </style>

</head>
<body>
<h2>texttitle</h2>
<p>textarea</p>
<p>textarea</p>
<p>textarea</p>
<p>textarea</p>
<p>textarea</p>

</body>
</html>
CSS可以通过font-weight设置文字的粗细

注意：

​ 不要带单位

​ 默认normal粗细为400，加粗bold为700，减细light为100

CSS可以通过font-style设置文字样式
属性值 作用
normal 默认值，浏览器会显示标准的字体样式font-style:normal
italic 浏览器会显示斜体的字体样式

注意：

​ 我们一般很少给文字添加斜体，反而要给斜体标签更正为正常

字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码

注意：

​ 不能更换顺序

​ 不需要设置的属性可以省略，但是必须保留font-size和font-family属性，否则font属性将不起作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
   <title>字体复合</title>

   <style>
      div{
         /* font-style: italic;
         font-weight: 700;
         font-size: 16px;
         font-family: "Microsoft Sans Serif"; */

         /* 复合样式 节约代码 */
         /* font:font-style font-weight font-size/line-height font-family; */
         font:italic 700 16px "Microsoft YaHei";
      }
   </style>

</head>
<body>

<div>三生三世十里桃花，一心一意没有头发</div>

</body>
</html>
CSS文本属性

CSS Text文本属性可定义文本的外观，比如说文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

文本颜色

color 属性可以定义文本的颜色

语法：

1
2
3
div{
	color : red;
}
表示 属性值
预定义的颜色值 red、green、blue、pink等
十六进制 #FF0000、#FF6600、#29D794
RGB颜色代码 rgb(255,0,0) rgb(100%,0%,0% )
对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

语法：

1
2
3
div{
   text-align : center;
}
属性值 解释
left 左对齐（默认）
right 右对齐
center 居中对齐
装饰文本

text-decoration属性规定添加文本的装饰，可以给文本添加下划线、删除线、上划线等

语法：

1
2
3
div{
   text-decoration ： underline;
}
属性值 描述
none 默认，无任何装饰
underline 下划线，链接 a 自带下划线
overline 上划线（几乎不用）
line-through 删除线（几乎不用） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
   <title>decoration示例：去掉 a 的下划线</title>

   <style>
      a{
         text-decoration: none;
      }
   </style>

</head>
<body>
<div>不能说的秘密</div>
<a href="#">最美的不是下雨天，是与你一起躲过雨的屋檐</a>
</body>
</html>
文本缩进

text-indent属性可以设置文本的首行缩进，通常是将段落的首行缩进

  • em是一个相对单位，为当前元素(font-size)的1个文字大小

语法：

1
2
3
4
p{

   text-indent : 2em;
}
行间距

line-height属性用于控制行间的距离（行高），可以控制文字行与行之间的距离

1
2
3
p{
   line-height : 20px;
}
CSS 的引入方式
CSS的三种样式表

​ 按照CSS样式书写的位置（或者引入的方式），CSS的样式可以分为三大类：

  1. 行内样式表（行内式）

    是在元素标签内部的style属性中设定的CSS样式，适合于修改简单样式

    1
    2
    3
    <div style="color: red; font-size: 12px;"> 
        青春不常在，抓紧谈恋爱
    </div>

    style其实就是标签的属性，双引号之间要符合CSS的书写规范

    控制当前标签设置样式

    由于书写繁琐，而且没有体现出结构与样式相分离的思想，不推荐大量使用

  2. 内部样式表（嵌入式）

    把所有的CSS代码抽取出来，单独放在一个<style>标签中

    <style>标签可以放在HTML文档的任意地方，但一般放在<head>中

    这种方式可以方便控制整个页面中的元素样式设置

    代码结构清晰，但没有实现结构与样式完全分离

  3. 外部样式表（链接式）

    实际开发过程中，适合于样式较多的情况，核心是样式单独书写到CSS文件中，之后再将CSS文件引入到HTML中使用

    步骤：

    1. 首先先新建一个.css文件，把所有的CSS代码写入这个文件中

    2. 在HTML文件中，使用<link>标签引入此文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      <!--
       * @Author: Joker Yue, Joker_Yue@qq.com
       * @Date: 2022-11-05 14:08:14
       * @LastEditors: Joker Yue
       * @LastEditTime: 2022-11-05 18:19:13
       * @FilePath: \HTML\02黑马\7.7.html
       * @Description:
      -->
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <title>外部样式</title>
          <link rel="stylesheet" href="/02黑马/css/7.7.css">

      </head>
      <body>
          <p>冷咖啡离开了杯垫 我忍住的情绪在很后面 拼命想挽回的从前 在我脸上依旧清晰可见 最美的不是下雨天 是曾与你躲过雨的屋檐 回忆的画面 在荡着秋千 梦开始不甜</p>
      </body>
      </html>
      1
      2
      3
      4
      5
      6
      7
      /* 7.7.css */
      /* 这个文件中不需要存在<style>标签 */

      p{
          text-indent: 2em;
          color:red;
      }