您现在的位置:首页 >> 前端 >> 内容

三.css语法、样式表

时间:2017/1/25 10:23:45 点击:

  核心提示:(一)css简介及基本语法什么是CSS:Cascading Style Sheet层叠样式表,用于修饰和美化HTML标签的一种计算机语言,能够实现结构表现的分离。CSS基本语法选择器{属性:属性值;属...

(一)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文档的注释:/*注释内容*/

注释的好处

结构清晰,方便维护

有利于代码调错

Tags:三C CS SS S语 
作者:网络 来源:亦琛的博客