CSS层叠样式表-Part1
模块目标:
一 CSS简介:
CSS也是一种标记语言
定位:美化网页,布局页面—网页美容师
作用:设置文字样式,图片的样式,版面布局,外观显示。
html只关心显示主要结构(一般不做样式,因为比较繁琐,因此比较丑)
CSS存在的价值:使html专注结构,样式交给CSS样式和结构相互独立
二 CSS语法规范:
构成:选择器+声明(属性+属性值)
声明就是键值对:
CSS标记书写位置:
style双标签写在head双标签中
CSS标签写在style双标签中
三 CSS代码风格:
非强制性,但是好习惯(实际开发中的样式)
1 样式格式:
(1)紧凑格式:写在一行
(2)展开格式:键值对写在多行,每行一个键值对,更直观,更推荐
2 样式大小写:一般写成小写
3 空格规范:
(1)属性值前面冒号后面有个空格
(2)选择器和{ }之间也得有个空格
四 CSS选择器:基础选择器和复合选择器
这里只介绍基础选择器
选择器的作用:
实际开发中,不同需求需要不同的选择的,选择器用来选择标签的
选择器分类:
基础选择器(由单个选择器组成):标签选择器,类选择器,id选择器,通配符选择器
复合选择器:#
CSS基础选择器:
4.1标签选择器:
标签名作为选择器
作用:某一类标签全都选出来,是优点同时也是缺点
4.2类选择器:
作用:单独选择一个或者多个标签
语法:
利用class属性来调用类选择器
类选择器口诀:样式点定义,结构类调用,一个或多个,开发最常用
注意:
(1)类选择器使用.进行标识,后紧跟类名(自定义)
(2)自定义类选择器自定义名字不能使用关键字,尽量有意义
(3)长的名称可以用短横线给类选择器命名
(4)有约定俗成的类命名规则手册(英文单词)
类选择器—多类名:
一个标签可以指定多个类名(同时调用多个类)
1 多类名的使用:
(1)在标签class属性写入多个类名
(2)多个类名需要空格隔开
2 多类名在开发中的应用:
(1)可以把公共的样式写到同一个类选择器中
(2)这些标签都可以调用公共的类,再调用其独有的类
(3)减少代码量,并且更方便后期对相同样式进行修改
4.3id选择器:
也用于选择标签,对特定html标签指定样式
html元素以id属性来设置选择器,CSS中id选择器以#定义
语法:
id选择器使用类似于类选择器???
区别:
(1)类选择器:像是人的名字,可以是多个人叫同一个名
(2)id选择器:像是人的身份证号,唯一,不能重复使用
并且一般配合js配合使用
4.4通配符选择器:
作用:选择页面中所有的标签
语法:
注意:
-
通配符不需要调用,自动选择所有的元素使用样式
-
特殊情况才使用
基础选择器总结:
CSS复合选择器:作用也是选择标签
什么是复合选择器:基础选择器的组合
作用:更高效,由两个以上的基础选择器组合而成
常用的复合选择器:后代选择器,子选择器,并集选择器,伪类选择器
4.5 后代选择器(包含选择器):
语法规范:
注意:
1 表示的选择元素1里面的所有元素2(体现出选择后代的效果)
2 可以选择儿子,也可以选择儿子的儿子(选择孙子),重孙子…
4.6子选择器:
选距离最近的一级子元素(只选亲儿子)
语法:元素1和元素2之间使用>号,选择的是元素2
使用例子:
4.7并集选择器:
作用:选择多组标签,用逗号分隔开 表示和
语法:
注意:任何形式的选择器都可以是并集选择器中的一部分
约定的语法规范是竖着书写并集选择器,最后一个选择器不用加逗号
4.8 伪类选择器:
作用:
特点: 书写时用冒号
包含链接伪类选择器和焦点伪类选择器
(1)链接伪类选择器
a:link----->选中没有未被访问的的链接
a:visited------>选中已经被访问过的链接
a:hover------->选中鼠标经过时的链接
a:active------>选中鼠标正在按下但是未弹起的链接
链接伪类的注意事项:
1 必须有序:按照LVHA的顺序书写(记忆方法:lv包hao)
2 链接在浏览器有默认样式,链接要单独指定样式
链接伪类实际写法:
实际开发中一般只设置a(鼠标未选中),和a:hover(鼠标经过)
(2)focus伪类选择器:
作用:选中获得焦点(光标)的表单元素,针对input表单元素
语法格式: