理解CSS ｜ 青训营笔记

奕翎
84 阅读7分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

CSS

CSS简介

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

HTML的局限性

说起HTML，这其实是个非常单纯的家伙，它只关心内容的语义

很早的时候，世界上的网站有很多，但是它们都有一个共同的特点：丑

虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐

CSS-网页的美容师

CSS 是**层叠样式表（Cascading Style Sheets）**的简称

又是我们也会称之为CSS样式表或级联样式表

CSS也是一种标记语言

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

CSS让我们的网页更加丰富多彩，布局更加灵活自如

简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单

总结：

  1. HTML主要做结构
  2. CSS美化HTML，布局网页
  3. CSS最大价值：由HTML专注去做结合呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离

CSS语法规范

使用HTML时，需要遵从一定的规则，CSS也是如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则

CSS规则由两个主要的部分构成：选择器以及一条或多条声明

微信截图_20220720232459.png

  • 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  • 属性和属性值之间用英文 “ : ” 分开
  • 多个“键值对”之间用英文 " ; " 进行区分

CSS代码风格

以下代码书写风格不是强制形式，而是符合实际开发书写方式

1.样式格式书写

  • 紧凑格式
h3 { color: deeppink;font-size: 20px; }
  • 展开格式
h3 {
	color: pink;
	font-size: 20px;
}

强烈推荐第二种形式，因为更直观

2.样式大小写

h3 {
	color: pink;
}

H3 {
	COLOR: PINK;
}

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外

3.空格规范

h3 {
	color: pink;
}
  1. 属性值前面，冒号后面，保留一个空格
  2. 选择器（标签）和大括号中间保留空格

CSS基础选择器

CSS选择器的作用

选择器（选择符）就是根据不同需求把不同的标签选出来，这就是选择器的作用，简单来说，就是选择标签用的

选择器的分类

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器

  • 基础选择器是由单个选择器组成的
  • 基础选择器由包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器

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

语法

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	…………
}

作用

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

优点

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

缺点

不能设计差异化样式，只能选择全部的当前标签

类选择器

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

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点 " . " 号显示

语法

.类名 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	…………
}

注意：

  1. 类选择器使用 “ . ” （英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）

  2. 可以理解为给这个标签起了一个名字来表示

  3. 长名称或词组可以使用中横线 “ - ” 来为选择器命名

  4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示

  5. 命名要有意义，尽量使别人一眼就知道这个类名的目的

  6. 命名规范：见 Web前端开发规范手册.doc

类选择器记忆口诀：

  • 样式点定义

  • 结构类(class)调用

  • 一个或多个

  • 开发最常用

例如，将所有拥有red类的HTML元素设为红色

.red {
	color: red;
}

结构需要用class属性来调用 class 类的意思

<div class="red">变红色</div>

类选择器-多类名

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

简单理解就是一个标签有多个名字

1.多类名使用方式

<div class="red font20">亚瑟</div>

注意：

  1. 在标签class属性中写 多个类名
  2. 多个类名中间必须用空格分开
  3. 这个标签就可以分别具有这些类名的样式

2.多类名开发中使用场景

  1. 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
  2. 这些标签都可以调用这个公共的类，然后再调用自己独有的类
  3. 从而节省CSS代码，统一修改也非常方便
  4. 多类名选择器再后期布局比较复杂的情况下，还是较多使用的

id选择器

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

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

语法

#id名 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	…………
}

例如，将 id 为 nav 元素中的内容设置为红色

#nav {
 color: red;
}

<div id="nav">变红色</div>

注意：

id属性只能在每个HTML文档中出现一次

id选择器记忆口诀：

  • 样式#定义
  • 结构id调用
  • 只能调用一次
  • 别人切勿使用

id选择器和类选择器的区别

  1. 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
  2. id选择器好比人的身份证号码，全中国是唯一的，不得重复
  3. id选择器和类选择器最大的不同在于使用次数上
  4. 类选择器在修改样式中使用的最多，id选择器一般用于页面唯一性的元素上，经常和 JavaScrip 搭配使用

通配符选择器

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

语法

* {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	…………
}
  • 通配符选择器不需要调用，自动就给所有的元素使用样式
  • 特殊情况才使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距，后面讲）
* {
	magin: 0;
	padding: 0;
}

基础选择器总结

基础选择器作用特点使用情况用法
标签选择器可以选出所有相同的标签，比如<p></p>不能差异化选择较多p {color: red;}
类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav{color: red;}
id选择器一次只能选择1个标签id属性只能在每个HTML文档中出现一次一般和js搭配#nav{color: red;}
通配符选择器选择所有的标签选择的太多，有部分不需要特殊情况使用* {color: red;}
  • 每个基础选择器都有使用场景，都需要掌握
  • 如果是修改样式，类选择器是使用场景的
avatar
文章
阅读
粉丝