(一)css简介及基本语法
什么是CSS:Cascading Style Sheet层叠样式表,用于修饰和美化HTML标签的一种计算机语言,能够实现结构表现的分离。
CSS基本语法
选择器{
属性:属性值;
属性:属性值;
……
}
选择器:选择器也叫作选择符,作用是告诉浏览器,样式的应用对象
选择器的种类:标签选择器(元素选择器)、类选择器、id选择器、全局选择器(通配符选择器)、群组选择器、子集选择器、后代选择器、属性选择器、动态伪类选择器…..
a. 标签选择器(元素选择器):拿HTML标签做选择器,作用是使文档中的相同标签应用相同样式
b. 类选择器:作用是对某个元素单独设置样式,进行修饰
第一步:设置名称<p class="类名"></p>
第二步:设置样式/类名{样式}
类选择器的注意事项
1.类的名称的命名规则
由字母、数字、下划线构成
不可以有汉字
不可以以数字开头
不可以是关键字
2.一个文档中类名可以相同
3.一个类可以有多个名
c. id选择器:作用是对某个元素单独设置样式,进行修饰
第一步:设置名称
第二步:设置样式 #id名{样式}
注意:类选择器和id选择器的区别是
1.一个文档中,类名可以相同,但是id名不可以重复
2.id的权重大于类的权重,换句话id的样式优先于类的样式
d. 全局选择器(通配符选择器):使用*号作为选择器,作用是使所有元素应用同种样式
e. 群组选择器:就是指用逗号将多个选择器分隔开,是它们形成一个组,应用同种样式
f. 动态伪类选择器
:link 默认样式(应用对象是超级链接)
:visited 访问过后的样式(应用对象是超级链接)
:hover 鼠标滑过元素时的样式(应用对象可以是超级链接,也可以是其它元素)
:active 鼠标激活时的样式(应用对象可以是超级链接,也可以是其它元素)
在使用四个动态伪类时一定要注意顺序问题:LVHA
:focus 获得焦点时的样式
(二)css样式表
样式表的应用:行内样式表、内部样式表、外部样式表、导入样式表
a. 行内样式表:指将样式表写在HTML标签的开始标签中,用style做关键字,行内样式表通常用来修饰个别的局部元素,弊端是没有实现结构和表现的分离,所以行内样式使用的频率并不高
b. 内部样式表(内嵌样式表),通常写在HTML文档的标签中,格式如下
<head>
<style type="text/css">
样式
</style>
</head>
注意:当对一个文档做样式的修饰时,可以选用内部样式表,弊端也没有真正实现结构和表现的分离
c. 外部样式表:所谓外部样式表是指将CSS样式写在一个单独的CSS文件中,然后使用标签将CSS文件和HTML文件关联起来,该种样式表真正实现了结构和表现的分离,是我们学习和工作中最为常用的一种样式表
格式:
<head>
<link rel="stylesheet" type="text/css" href="CSS文件的路径" />
</head>
d. 导入样式表:只做了解
<head>
<style type="text/css">
@import "样式表的路径";
</style>
</head>
样式表的优先级
行内样式表的优先级>内部样式表的优先级
内部样式表和外部样式表的优先级取决于样式表的加载顺序,后加载的样式表优先显示
就近原则
样式表的特性:样式表的继承、样式表的覆盖
继承:后代元素会从祖先元素那里继承样式
覆盖:如果选择器的权重相同,那么同种属性,后设置的样式会覆盖先设置的样式
CSS样式的注释
HTML文档的注释:<!--注释内容-->
CSS文档的注释:/*注释内容*/
注释的好处
结构清晰,方便维护
有利于代码调错