1. CSS 介绍
层叠样式表(CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
1.1 CSS的使用
使用CSS可以让结构(HTML)与表现(CSS)分离,方便维护。
过去我们写网站都用table来布局,然后样式都直接加在table上面,这样一来页面显得特别的臃肿,然后想修改一下也显得非常困难。
后来w3c推出了css,把结构和样式分离,html只负责结构,样式交给css来实现。这样一来开发者工作量和效率大大提升了,页面也变得更加容易维护,想要修改某个字体或者样式,直接在css文件中修改,不需要修改html结构。
1.2 基本语法
CSS语法有三个部分组成:选择器、属性、属性值。
selector { property: value }
selector 选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性(property)和一个属性值(value)组成。
属性(property)是希望设置的样式属性(style attribute)。
每个属性有一个属性值(value)。
属性和属性值被冒号分开。
1.3 CSS的四种引用方式
在html样式中有四种css引用方式:行间样式、内部样式、外部样式、导入外部样式
· 行间样式:应用内嵌样式到各个网页元素
·
这是P标签
· 内部样式表:在网页上创建嵌入的样式表
·
· 链入外部样式表:将网页链接到外部样式表
·
· 导入外部样式表:
· css通过@import引入其它的css文件
· @import url("a.css");@import url("b.css");
· html链接一个css可以使用多个css中的样式
·
1.3 CSS选择器
1.3.1 通配符选择器
通配符选择器匹配html中所以元素。
*{color: red; }
1.3.2 标签选择器
标签选择器为HTML元素指定特定的样式。
p { color: red; }
1.3.3 类选择器
类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以"."来定义。
.red { color: red; }
1.3.4 id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。#red { color: red; }
1.3.5 派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
/* 指定p标签下的所有span标签颜色为红色 */p span { color: red; }/* 指定p标签下的子元素span标签颜色为红色 */p > span { color: red; }
1.3.6 选择器分组
对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
h1, h2, h3, h4, h5, h6 { font-size: 12px; }
1.3.6 选择器继承
CSS继承是指被包在内部的标签拥有外部标签的样式性质。CSS的一个主要特征就是继承,它依赖于祖先-后代关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以用于它的后代。
1.3.7 优先级
多重样式:如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况 一般情况下,优先级如下:(外部样式)
优先权值:
我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。
· 内联样表的权值最高为1000 。
· ID选择器的权值为100 。
· 类选择器的权值为10 。
· 元素选择器的权值为1。
![8b317bdea18b27353137221fc63ae8c6.png](https://i-blog.csdnimg.cn/blog_migrate/ed4f8d77b5040bc48a67a3777f51890c.jpeg)
图1-1 优先权值
CSS 优先级法则:
· 选择器都有一个权值,权值越大越优先。
· 当权值相等时,后出现的样式表设置要优于先出现的样式表设置。
· 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
· 继承的CSS 样式不如后来指定的CSS 样式。
· 在同一组属性设置中标有"!important"规则的优先级最大。
2. CSS 字体
2.1 font-size
font-size: 设置文本大小
· 属性值
· {number+px}:固定值尺寸像素
· {number+%}:其百分比取值是基于父对象中字体的尺寸大小
· 示例
· p { font-size: 20px; }p { font-size: 100%; }
2.2 font-family
font-family: 设置文本字体
· 属性值
· name: 字体名称 ,按优先顺序排列,以逗号隔开.如果字体名称包含空格,则应使用引号括起
· 示例
· p { font-family: Courier, "Courier New