1.1 基本语法规范
每个CSS语法包含两个部分:选择器+应用的属性
1.2 引入方式
(1)内部样式表
通过style标签,来写CSS这种方法不太常见,如果是比较简单的CSS,这样写也可以
(2)内联样式
通过html标签中的style属性,来应用一些样式内联样式是一种比较特殊的用法(通常会搭配JS来使用)这种写法适合于样式特别简单的情况(如果样式比较复杂,这就会很乱)两种写法都可以
(3)外部样式(使用最多)
把css代码单独提取出来,放到一个.css文件中然后在html代码中,通过link标签,来引入该css文件(一般link标签放在head中)这种方法好处是,可以让多个HTML,复用同一份样式
2.CSS基础选择器
css选择器的作用:(选择标签用的)
根据不同需求选择不同标签,这就是选择器的作用,比如:选对人,做对事。
选择器分类:基础选择器和复合选择器
基础选择器
(标签选择器、类选择器、id选择器和通配符选择器)
- 类选择器是使用最多的,需要特别掌握!
标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
- 作用
标签选择器可以把某一类标签全部选择出来,比如所有的<dⅳ>标签和所有的标签。
- 优点
能快速为页面中同类型的标签统一设置样式。
- 缺点
不能设计差异化样式,只是选择全部的当前标签。
类选择器 - 开发最常用
如果想要差异化选择不同的标签,单独选个或者某几个标签,可以使用类选择器。类选择器在HTML中以dass属性表示,在CSS中,类选择器以-个点“"号显示。
- 注意
①类选择器使用“"(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
②可以理解为给这个标签起了一个名字,来表示
③长名称或词组可以使用中横线来为选择器命名
④不要使用纯数字、中文等命名,尽量使用英文字母来表示
⑤命名要有意义,尽量使别人一眼就知道这个类名的目的
⑥命名规范:见附件(web前端开发规范手册,doc)
记忆口诀:样式点定义,结构类调用。一个或多个,开发最常用。
多类名
我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签。简而言之:一个标签有多个名字。
- 可以将相同部分写在同一个类里面,减少代码量和代码重复率。
id选择器(一次性)
id选择器为特定id的html元素指定特定样式。html元素用id属性来设置id选择器,CSS中id选择器用 “#” 号来定义。
- 设置某一个特定的元素的独特样式。
通配符选择器
在CSS中,通配符使用 "*"号定义,表示选取页面中所有的元素(标签)通配符不需要调用,自动给所有元素使用样式.
- 一般用于界面清除所有内外边距。
css复合选择器
后代选择器(重要)
后代选择器又称为包含选择器,可以选择父元素里面的子元素。写法:将外层的标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。格式:父级 子级{属性:属性值;属性:属性值;}
- 后代选择器可以在多层嵌套一直寻找后代下去