携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

CSS

CSS简介

HTML的局限性

（1）HTML 是网友的骨架，只关注内容的语义。例如<h1>表示大标题，<p>表示段落

（2）早期的时候，HTML 只能做一些简单的样式，网页非常丑，而且使 HTML 代码臃肿

CSS作用

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

（2）CSS 也是一种标记语言

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

（4）HTML 呈现结构，CSS 决定样式，结构与样式分离

CSS语法规范

CSS 规则由两个部分组成：选择器和一条或多条声明

CSS代码风格

（1）展开式

（2）选择器，属性名，属性关键字全部小写

（3）空格规范

CSS基础选择器

选择器的作用

选择器就是根据不同需求把不同标签选择出来

选择器分类

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

（1）基础选择器由单个选择器组成

（2）基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

（1）直接用 HTML 标签名作为选择器，按标签名称分类，为页面某一类标签指定统一的 CSS 样式。

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

优点

标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式

缺点

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

类选择器

差异化选择不同标签，单独选一个或者某个标签

使用 class 属性来调用 class 类，样式点定义，结构类调用，一个或多个，开发最常用

类选择器用 . 号显示

（1）类选择器用 . 标识，紧跟类名

（2）小写，使用 - 连接单词

（3）不要用纯数字、中文

（4）命名有意义

类选择器——多类名

类名间用空格分开

<p class="class-name1 class-name2"></p>

id选择器

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

HTML 元素以 id 属性来设置 id 选择器，用 # 来定义

#id名 {
    属性1: 属性值1;
    ...
}

样式 # 定义，结构 id 调用，别人切勿使用

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

（1）选择器可以被多个元素调用

（2）id 选择器只能允许一个标签调用

（3）类选择器使用的较多，id 选择器用于唯一特性的标签

通配符选择器

* {
    属性1: 属性值1;
    ...
}Copy to clipboardErrorCopied

（1） * 定义通配符选择器，选取页面中所有标签。

（2）不需要调用，自动给所有标签。

（3）特殊情况使用

* {
    margin: 0;
    padding: 0;
}

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	选中所有相同标签	不能差异化选择	较多	`p{color:red;}`
类选择器	选出一个或多个标签	可以根据需求选择	较多	`.nav {color: red;}`
id 选择器	一次只能选出一个标签	一个 id 属性在页面中只能出现一次	一般配合 js 使用	`#nav {color: red;}`
通配符选择器	选择所有标签元素	选择的太多，有部分不需要	特殊情况使用	`* {color: red; }`

（1）每个选择器都有自己的使用场景，都要掌握

（2）如果是修改样式，类选择器是使用最多的

CSS基础理解（1）

CSS