共计 1767 个字符,预计需要花费 5 分钟才能阅读完成。
第一章,CSS 简介
内联样式(不推荐使用)
可以将 css 样式编写到元素的 style 属性当中 将样式直接编写到 style 属性中,这种样式我们称为内联样式 内联样式只对当前的元素中的内容起作用,内联样式不方便复用 内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用的
样式选择器(强烈推荐)
也可以将 CSS 样式编写到 head 中的 style 标签里将样式表编写的 style 标签中,然后通过 css 选择器选中指定元素 然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用将样式表编写到 style 标签中,也可以使表现和结构进一步分离,它也是我们推荐的使用方式
第二章,外部样式表
还可以将样式表编写到外部的 css 文件中, 然后通过 link 标签来将外部的 css 文件引入到当前页面中,这样外部文件中的 css 样式表将会应用到当前页面中。
将 css 样式统一编写到外部的样式表中,完全结构和表现分离, 可以使样式表可以在不同的页面中使用,最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过 link 标签引入,可以利用浏览器的缓存加快用户访问的速度提高了用户体验, 所以在开发中我们最推荐使用的方式就是外部的 css 文件
语法:
<link rel="stylesheet" type="text/css" href="style.css">
第三章,CSS 基本语法
css 的注释,作用和 HTML 注释类似,只不过它必须编写在 style 标签中,或者是 css 文件中
css 语法:
选择器 声明块
选择器:
通过选择器可以选中页面中的指定元素,
并且将声明块中的样式应用到选择器对应的元素上
声明块:
生命块紧跟在选择器的后面,使用一对 {} 括起来,
声明块中实际上就是一组一组的名值对结构,
这一组一组的名值对我们称为声明
在一个声明块中可以写多个声明,多个声明之间使用; 隔开
声明的样式名和样式值之间使用: 来连接
第四章, 内联和块元素
块元素和内联元素
div 就是一个块元素
所谓的块元素就是会独占一行的元素, 无论他的内容有多少,都会独占一整行
p,h1-h6,br 都属于块元素
div 这个标签没有任何语义,就是一个纯粹的块元素,并且不会为它里面的元素设置任何默认的样式
div 元素主要用来对页面进行布局
内联元素:
span 是一个内联元素(行内元素)
所谓行内元素,指的是只占自身大小的元素,不会占用一行
常见内联元素:
a img iframe span
span 没有任何的语义,span 标签专门用来选中文字,然后为文字来设置样式
块元素主要用来做页面的布局,内联元素主要用来选中文本设置样式
一般情况下只使用块元素去包含内联元素,而不会使用内联元素包含块元素
a 可以包含任何元素,除了其本身
p 元素不可以包含其他的块元素
第五章,Css 常用选择器
CssCommonSelector:Css 常用选择器
为页面中所有的 P 元素,设置一个字体颜色为红色
元素选择器
作用: 通过元素选择器可以选择页面中所有指定的元素
语法:
标签名{}
id 选择器
- 通过元素的 id 属性值选中唯一的一个元素
- 语法:
#id 属性值{}
类选择器
- 通过元素的 class 属性值选中一组元素
- 语法:
.class 属性值{}
选择器分组(并集选择器)
- 通过选择器分组可以同时选中多个选择器对应的元素
- 语法: 选择器 1,选择器 2,选择器 N{}
通配选择器
- 可以用来选中页面中所有的元素
语法:
*{}
为拥有 class p3 span 元素设置一个背景颜色为黄色的颜色
复合选择器(交集选择器)
- 作用:
- 可以选中同时满足多个选择器的元素
- 语法
- 选择器 1 选择器 2 选择器 N{}
我们可以为元素设置 class 属性
class 属性和 id 属性类似,只不过 class 属性可以重复
拥有 class 属性值的元素,我们说他们是一组元素
可以同时为一个元素设置多个 class 属性值,多个值之间用空格隔开