上节内容中提到了 前端三剑客 —— HTML 超文本标记语言,这节内容 跟大家讲述三剑客中的第二个 CSS。
CSS
什么是CSS
Cascading Style Sheel,简称CSS,中文叫层叠样式表,也叫级联样式表。主要作用是来修饰HTML页面的一种技术。
CSS的几种写法:
1.行内样式
2.内嵌样式
3.外链样式
4.@import
行内样式
我们要某个HTML标签中去书写样式,它需要使用style属性来指定。
弊端:不利于我们的代码维护。
那如何解决这个问题呢??? ———— 使用内嵌样式
内嵌样式
内嵌样式又叫页面样式,它的作用是对当前整个页面有效。使用它需要把样式写在一个叫style的标签,一般这个标签会放在head部分。
弊端:若存在很多文件需要这个样式,如:阿里、京东商城,那么我们仍然需要在各个文件中来编写一次。
如何解决这个问题??? ———— 采用外链样式
外链样式
我们需要把公共的样式编写在一个单独的文件,这个文件的后缀是 .css ,然后在需要引入的文件中通过link标签来使用这个外部样式文件。
首先定义外部样式:通常我们需要把外部样式放到一个名为css的目录下
然后编辑页面,并使用外部样式:
通过link标签来使用外部样式,在link标签中需要指定rel属性,它的值是stylesheel,并通过href属性来引入外部的样式文件地址。
弊端:有可能会造成浪费内存空间。
@import
还可以使用 @import 语句来引入外部样式,它需要放到style标签中。
加载顺序
假设我们的页面既用到外部,也用到内嵌,还用到行内样式,那么谁起作用?
1.外部样式编写
2.编写页面
通过上面的案例我们发现,当几个样式有相同部分时,行内样式优先于页面样式,而页面样式优先于外部样式。 简单来说,就近原则、就近原则、就近原则。
CSS选择器***
在CSS中,对于元素的修饰是通过选择器来获取到的,它有很多选择器。
---基本选择器
---包含选择器
---属性选择器
---伪类选择器
基本选择器
基本选择器使用的频率是最高的,它分为以下几种:
---ID选择器
---标签选择器
---类选择器
---通用选择器
ID选择器
ID选择器的优先级是最高的,因为页面中的ID是不能重复的,即是唯一的。
标签选择器
前面ID 选择器 在 style 中是 div1 它是唯一的, 而现在 标签选择器 是div 这一大类 只要是运用div的 都可被同时修饰修改
类选择器
特点是 点 加上 class 后面的名称 即 . container
注意:
1.使用类样式是通过class的属性来指定
2.在编写样式时,需要前面有个小圆
通用选择器
通过选择器是使用 *号来表示匹配所有页面的元素,padding表示内边距,margin表示外边距。