本质介绍css基础选择器，引入CSS的三种方式

思维导图

CSS 简介

什么是CSS

CSS是层叠样式表，用来美化页面，布局页面

CSS书写位置

css样式要写在style标签中，style标签写在head标签中。

<!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>
      /* 编写CSS代码 */
    </style>
  </head>
  <body></body>
</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>
      /* 需求：让p标签中的文字为红色red，字体大小为24PX. li标签中的文字为绿色green，字体大小为46px */

      /* 通过标签选择器"p"找到所有的p标签[可以找到3个]，然后赋予样式 */
      p {
        color: red;
        font-size: 24px;
      }
      /* 通过标签选择器"li"找到所有的li标签[可以找到4个]，然后赋予样式 */
      li {
        color: green;
        font-size: 46px;
      }
    </style>
  </head>

  <body>
    <p>1</p>
    <p>1</p>
    <p>1</p>

    <ul>
      <li>2</li>
      <li>2</li>
      <li>2</li>
      <li>2</li>
    </ul>
  </body>
</html>

类选择器

编写步骤

1.通过.定义类名
2.给标签添加class属性调用类

注意：定义类选择器的时候需要加点，调用的时候不需要

入门案例

<!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>
      /* 第一步：通过.red 定义一个名为red的类选择器 */
      .red {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 第二步：给标签添加class属性调用名为red的类选择器 -->
    <!-- 注意：定义类选择器的时候需要加点，调用的时候不需要 -->
    <div class="red">哈哈</div>
    <div>哈哈</div>
  </body>
</html>

配置多个类中间使用空格分隔

需求：通过.定义四个类样，名字和功能如下

w100:功能设置宽度100px。

h100:功能设置高度100px。

bg-red:功能设置背景色为红色。

bg-green: 设置背景色为绿色

<!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>
      /* 第一步：通过.定义名为w100,h100,bg-red,bg-green的类样式 */
      .w100 {
        width: 100px;
      }
      .h100 {
        height: 100px;
      }
      .bg-red {
        background-color: red;
      }
      .bg-green {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <!-- 第二步：给标签添加class属性，在class属性中调用类样式，如果调用多个类样式，中间要用空格分隔 -->
    <div class="w100 h100 bg-red"></div>
    <div class="w100 h100 bg-green"></div>
  </body>
</html>

ID选择器

使用步骤

1.通过#定义样式
2.给标签添加id属性调用样式

注意事项：id的值在页面中是唯一的。定义ID选择器的时候需要加#，调用的时候不需要

入门案例

<!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>
      /* 第一步：使用#定义名为box的ID选择器 */
      #box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <!-- 第二步：给标签添加id属性，调用ID选择器 -->
    <!-- 注意：定义ID选择器的时候需要加#，调用的时候不需要 -->
    <div id="box"></div>
  </body>
</html>

通配符选择器

给所有的标签设置样式

1
2

*{
}

引入CSS的三种方式

内部样式

在页面内编写style标签，在style标签中编写样式

行内样式

给标签添加style属性，在属性值中编写样式，比如 <div style="width:100px; height:100px">

外部样式

创建一个CSS文件，将样式放入该文件，然后再html页面使用link标签引入CSS文件

演示

创建style.css

div {
  width: 1000px;
  height: 1000px;
  background-color: hotpink;
}

创建index.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>

    <!-- 方式2：外部样式 -->
    <link rel="stylesheet" href="./style.css" />

    <!-- 方式1：内部样式 -->
    <style>
      div {
        background-color: royalblue;
      }
    </style>
  </head>
  <body>
    <!-- 方式3：行内样式 -->
    <ul style="list-style: none">
      <li><a href="#">今天吃了几碗面</a></li>
      <li><a href="#">今天吃了几碗面</a></li>
      <li><a href="#">今天吃了几碗面</a></li>
      <li><a href="#">今天吃了几碗面</a></li>
    </ul>
  </body>
</html>

样式优先级

行内样式 大于 内部样式 大于 外部样式

注意事项

编写代码的时候先引入外部样式，在编写内部样式

样式速查表

CSS 学习套路

找它，利用选择器，把对应标签选出来；
摆它：利用布局样式（标准流、浮动、定位等），把盒子摆在需要的位置；
改它：利用外观样式（字体、文本、背景等），修改盒子内容的显示效果。

基础选择器

基础选择器	作用	特点	使用频率
标签选择器	选中相同标签	统一设置相同标签的样式，没有差异化	较多
类选择器(`.`)	按需选择标签	根据需求选择	非常多
id 选择器(`#`)	选中唯一标签	仅针对唯一标签	通常与 JavaScript 联用
通配符选择器(`*`)	选中所有标签	选择的太多，有部分不需要	有特定的应用场景

字体样式font-*

样式名	快捷写法	说明
font-family 字体	ff	工作中按照团队约定即可,例如font-family:”黑体”,”微软雅黑”; 表示如果不支持黑体则是用微软雅黑
font-size 字体大小	fz	单位通常是 `px`(像素),字号一定要有单位，例如font-size:12px ;
font-weight 字体粗细	fw	`700` 加粗 / `400` 普通，数字字重不带单位
font-style 字体样式	fs / fsn	`italic` 斜体 / `normal` 正常，把 `em` 改成不倾斜
font 缩写	f	`font-size/line-height font-family`，工作中按照团队约定即可

文本样式text -*

样式名	快捷写法	含义	说明
color 文字颜色	c	文字颜色	`#f60` , `rgba(0~255, 0~255, 0~255, 0~1)`,`rgba(0~255, 0~255, 0~255)`,`red` 有四种写法，十六进制，rgba,rgb,英文单词
text-align 文本对其方式	tac	对齐	`center` / `left` / `right`
text-decoration 文本修饰	td / tdu	文本修饰	`text-decoration: none;` / `text-decoration: underline;` 常用none去掉超链接的下划线
text-indent 首行缩进	ti	首行缩进	`text-indent: 2em;` 首行缩进2个文字
line-height 行高	lh	行高	行高等于盒子高度会垂直居中例如 line-height:20px;height:20px 则文字会垂直居中

文章作者: 微信：hao_yongliang

文章链接: https://haoyongliang.gitee.io/2021/05/13/%E5%89%8D%E7%AB%AF/css/day01/css01/

css

打赏

微信
支付寶