1.CSS是什么?
css(层叠样式表)英文全称:Cascading Style Sheets,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
2.CSS语言特点
1.丰富的样式定义
CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力。
2.易于使用和修改
CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用,外部样式表可以极大提高工作效率。
3.层叠
简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。
3.1层叠次序问题
1.浏览器缺省设置 2.外部样式表 3.内部样式表(位于 标签内部) 4.内联样式(在 HTML 元素内部) 层叠次序优先权依次提高,其中4.内联样式拥有最高优先权。
4.页面压缩
将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,
CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。
3.语言基础——属性和属性值
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
属性
属性的名字是一个合法的标识符,它们是CSS语法中的关键字。一种属性规定了格式修饰的一个方面。例如:color是文本的颜色属性。
属性值
属性值分为整数和实数、长度量、百分数量等
下面的示意图为您展示了上面这段代码的结构:
如果值为若干单词,则要给值加引号
p {font-family: "sans serif";}
1
4.CSS选择器
CSS选择器具体分为1.类型(上下文)选择器2.class选择器3.id选择器4.属性选择器,选择器可以用来选择被标记的某一模块,使其可以添加各种样式
4.1类型(上下文)选择器
CSS中的一种选择器是元素类型的名称。使用这种选择器,可以向这种元素类型的每个实例上应用声明
例:你希望列表中的 strong 元素变为斜体字
li strong {
font-style: italic; //css代码
font-weight: normal;
}
1
2
3
4
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
//HTML代码
1
2
4.2id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
例:定义段落文字为红色
#red {color:red;} //css代码
1
<p id="red">这个段落是红色。</p> //html代码
1
4.3class选择器
CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性,从本质上讲,可以使用CLASS属性来分类元素
例:拥有 center 类的 HTML 元素均为居中。
.center {text-align: center} //css代码
1
<h1 class="center">
This heading will be center-aligned
</h1> //html代码(h1 和 p 元素都有 center 类,这意味着两者都将遵守 ".center" 选择器中的规则)
<p class="center">
This paragraph will also be center-aligned.
</p>
1
2
3
4
5
6
4.4属性选择器
对带有指定属性的 HTML 元素设置样式。
例:带有 title 属性的所有元素设置样式。
[title]{color:red;} //css代码
1
<h2 title="Hello world">Hello world</h2> //html代码
<a title="W3School" href="http://w3school.com.cn">W3School</a>
1
2
4.5CSS 中的后代选择器
后代选择器(descendant selector)又称为包含选择器,后代选择器可以选择作为某元素后代的元素。
例:对 h1 元素中的 em 元素应用样式。
h1 em {color:red;} //css代码
1
注:有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。
如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深
4.6选择器分组(交集选择器)
假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明
h2, p {color:gray;} //css代码
1
4.7子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素
例:选择只作为 h1 元素子元素的 strong 元素
h1 > strong {color:red;} //css代码
1
4.8CSS 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
h1 + p {margin-top:50px;} //css代码(选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素。)
1
4.9选择器间的权重(优先级)问题
第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级:在html中给元素标签加style,即内联样式。该方法会造成css难以管理,所以不推荐使用。
第三优先级:由一个或多个id选择器来定义。例如,#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级:由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级:由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px;}
第六优先级:通配选择器,如*{marigin:6px;}
注:如果两个规则的特殊性相同,那么后定义的规则优先。
我们把特殊性分为4个等级,每一个等级代表一类选择器,每个等级的值相加得出选择器的权重。
4个等级的定义如下:
第一等级:代表内联样式,如style="",权值为 1000
第二等级:代表id选择器,如#content,权值为100
第三等级:代表类,伪类和属性选择器,如.content,权值为10
第四等级:代表标签选择器和伪元素选择器,如div p,权值为1
通用选择器(*),子选择器(>),和相邻同胞选择器(+)并不在这个等级中,所以他们的权值为0
4.10锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
1.注:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2.注:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
---------------------
【转载,仅作分享,侵删】
作者:- LYN ..
原文:https://blog.csdn.net/LlYyNn_king/article/details/88806474
版权声明:本文为博主原创文章,转载请附上博文链接!
|
|