您的位置：首页 > Web前端 > CSS

CSS——样式表；选择器；优先级

2015-09-17 23:01 645 查看

在HTML中加入样式表：

【type=”text/css”】将style对象的type属性设置为“text/css”是允许不支持这类型的浏览器忽略样式表单。

外部样式表：

【要求/推荐使用：方便后期维护以及修改，并可以重复使用在多个网页。】

有两种方式：

1、在Web文档的段使用<link>标记,讲一个外部样式表链接到文档中：

<head>
<link href="url(***.css)" rel="stylesheet" type="text/css" />
</head>
注虽然外部样式表可以使用任何有效的文件名，但还是【推荐使用.css】作为外部样式表的扩展名，以方便识别文件的内内容。

2、在内部样式表（嵌入样式表）中，使用@import倒入一个外部样式表：

<style type="text/css">
@import url(mystyles.css);
...其他嵌入式样式定义...
</style>

link方式——使用css1.0；加载此页面时同时加载css；JS可以动态改变；

@import方式——使用css2.0；文档加载完之后再加载css；JS不能动态改变。

内部样式表：

优点是样式规则和标记元素在一个页面，可以快速将两者拧在一起，方便测试。

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>
<style type="text/css">
</style>
</head>

内联样式表：

【不推荐使用：不方便二次修改，代码不能重复使用，增加工作量。】

<p style=""></p>

CSS（样式表）书写规则

选择器(如：p){属性：属性值；属性：属性值；}

注：

不要忘记每条属性的“；”结尾

如果属性值中包含了空格，该值必须用（”“）双引号; 例：p{font-family:”Times New Rome”;}

需要单位的值要加上单位，如：px(像素)——默认单位为PX

群组选择器——“逗号”隔开

属性简写——属性值之间用“逗号”隔开

css注释——/注释/

如果缺少符号或者书写错误则样式表失效

选择器

基本类型选择器

1、标签选择器

名称：<>内的关键词。选中：所有这一标签里面的内容

2、class(类)选择器

名称：以”.”开头的自定义名称。选中：所有class=“类名”的内容，可以重复使用。应用多个类时类名称之间以空格隔开，如：class=”名称a 名称b 名称c “

3、ID选择器

名称：以#开头的自定义名称。选中：所有id=“id名”的内容，不可以重复使用

【id、class命名：由字母、数字、下划线组合；不能以数字开头。】

<head>
<style>
“标签选择器”{
属性：属性名；
}
.“类名”{
属性：属性名；
}
#“id名”{
属性：属性名;
}
</style>
</head>

复合类型选择器（以基本类型组合的）

1、伪类选择器——以冒号隔开

:link 未点击（为未被访问的链接添加样式）

:hover 鼠标经过（当鼠标悬浮在元素上方时，向元素添加样式。）

:active 鼠标按下（向被激活的元素添加样式。）

:visited 已点击（为已被访问的链接添加样式）

:lang 向带有指定 lang 属性的元素添加样式。

:focus 获得焦点时(向拥有键盘输入焦点的元素添加样式。)

:first-child 向元素的第一个子元素添加样式。（选中元素作为父元素的第一个子元素时）

例如：

a:link {

color:#666;

}

a:hover {

color:#eee;

}

a:active {

color:#ccc;

}

a:visited {

color:#999;

}

由于有优先级，如果有冲突，将使用在样式表中最后出现的选择器，因此，对链接编写样式规则时必须按以下顺序编写代码【记忆方式： a Love or Hate】

2、伪元素选择器——以冒号隔开

:first-letter 向文本的第一个字母添加特殊样式。

:first-line 向文本的首行添加特殊样式。

:befor 在元素之前添加内容。

:after 在元素之后添加内容。

p:first-lerter {

color:blue;

}

p:first-line {

color:red;

}

p:befor {

content:”字符串”

}

p:after {

content:url(文件的url)

}

3、并集选择器（群组选择器）——以逗号隔开

选择一组内容

例如：

h1,p,a {
color:#231;font-family:'微软雅黑，宋体'；
}

4、交集选择器（标签指定选择器）——不以任何符号相隔

几个条件同时满足。

例如:p.123:选中class=”123”的p标签

p.123，h1.none {
color:#555;
}

5、后代选择器（包含选择器）——以空格隔开

可以理解为：什么什么里面的什么什么

<div id="abc">
<a></a>
<a></a>
</div>

#abc a {} —— 选择id为名为abc的元素里面的<a>标签

6.兄弟相连选择器——以＋号连接

选择相邻的内容——可用于文章。

例如：
h1+p（h1旁边的p标签）

7.属性选择器——以中括号隔开

p[align 】(有align属性的p标签)

8.通配符选择器：*

选择所有内容

优先级

当一个标签上应用多个层叠样式时，如果这些层叠样式的声明不一样的话，那么标签的最终样式等于样式的层叠总和。

如果这些样式中有相同的声明：

内联>内部>外部（必须选择器类型相同）
!important>内联>id>伪元素>伪类>类>元素
【选择的权重】：
!important   10000
内联         1000
id          100
类          10
元素        1

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航