第三章Web开发篇——第2节-CSS快速入门_第一步第二部 css样式-CSDN博客

本文链接：https://blog.csdn.net/gis_witch/article/details/123636684

1 CSS的基本概念

1) 什么是CSS

CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表

2) CSS的作用

CSS的作用就是用来规定每个HTML元素表现的样子, 比如

字体的大小
颜色
摆放位置

3) CSS的核心语法

CSS两步走

选元素
改属性

语法

<head>
<style>
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

主要由 选择器+声明块 组成

示例

将h1的字体改成红色

<style>
	 h1 {
	 	color: red;
	 }
</style>

2. 选择器

1) 什么是选择器

选择器的主要作用就是从一堆元素中选出特定的符合要求的元素

比如, 上图中有一堆小黄人, 现在需要统一改变单眼小黄人的颜色为红色, 该如何操作呢?

第一步: 选出所有的单眼小黄人
第二步: 修改颜色为红色

CSS的思想也是类似的

第一步: 通过选择器, 找出符合要求的HTML元素
第二步: 修改找出来的元素的属性

常见的选择器包括

元素选择器
类选择器
id选择器

2) id选择器

作用

选择某一个元素, 该元素通过id属性指定

语法

#id名 {
	属性: 值
}

示例

<div id="container"></div>

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>id选择器</title>
    <style>
      #container {
        /* w300+h300 */
        width: 300px;
        height: 300px;
        /* bgc */
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <!-- emmet: #container -->
  </body>
</html>

戳我领取完整版课程试听：

领取免费GIS开发试听课程https://www.wjx.cn/vj/e68jhwR.aspx