目录
一. CSS概念
二. CSS语法
1. 基本语法规范
2. CSS的三种引入方式
(1) 行内样式
(2) 内部样式表
(3) 外部样式表
3. CSS选择器
(1) 标签选择器
(2) 类选择器
(3) id选择器
(4) 通配符选择器
(5) 复合选择器
<1> 空格
<2> 没有空格
<3> ","
<4> ">"
">" 表示父子关系 (不能隔代)
4. 常用CSS
一. CSS概念
什么是CSS? CSS, 全称 "Cascading Style Sheet" (层叠样式表). 用来控制页面的样式.
HTML描述了页面要显示什么内容, 而CSS就是要给这些内容加上不同的样式, 使其更加美观.
二. CSS语法
1. 基本语法规范
选择器 + n条声明
- 选择器说明对谁进行修改.
- 声明决定修改什么.
- 声明用键值对来表示. ( ":" 区分键和值)
下面我们来看一个例子:
首先需要注意的一点是, 样式的声明我们一般放到<head>标签内. 然后我们这里看到要对p标签进行修改, 把color改为red. 所以p标签内的内容将变成red. 我们来看效果:
2. CSS的三种引入方式
(1) 行内样式
这种方式直接将CSS写在HTML标签的style属性中. 这种方式简单直接, 但是会导致HTML文档变得冗长且难以维护.
(2) 内部样式表
内部样式表是将CSS代码写在HTML文档的<head>部分, 通过<style>标签定义. <style>标签内指定哪些标签分别有哪些样式. 上面"1.基本语法规范"哪里的代码就是内部样式表.
(3) 外部样式表
外部样式表是将CSS代码保存在一个独立的.css文件中, 然后在HTML文档的<head>部分通过<link>标签引入. 这种方式是开发中最常见的, 它可以将样式与HTML内容分离, 便于维护和复用.
3. CSS选择器
(1) 标签选择器
以标签作为标识来选中想要修饰的内容.
(2) 类选择器
以类作为标识来选中想要修饰的内容.
[注]: 以 class 作为选择器时, 要以 "." 开头.
(3) id选择器
以 id 作为标识来选中想要修饰的内容.
[注]: 以 id 作为选择器时, 要以 "#" 开头.
(4) 通配符选择器
通配符选择器, 顾名思义, 就是同时设置页面内所有元素.
(5) 复合选择器
<1> 空格
空格表示后代关系 (可以隔代)
如上图, 表示 ul 标签下的 a 标签.
<2> 没有空格
没有空格表示交集, 两个要同时具备.
如上图, 表示要同时满足 p标签 和 first类.
<3> ","
逗号 "," 表示并集, 两个满足一个即可.
如上图, 表示要同时满足 first类 和 second类.
<4> ">"
">" 表示父子关系 (不能隔代)
如上图, 表示 ul 下的 li 下的 a 标签.
4. 常用CSS
(1) color 设置字体颜色
(2) font-size 设置字体大小
(3) border 设置边框
(4) width/ height 设置 宽度/高度
(5) padding/ margin 设置 内边距/ 外边距
