html伪类选择器入门,HTML/CSS 02-css基础（语法和选择器）

有了HTML之后，我们下面就要学习CSS，使用 CSS 同时控制多重网页的样式和布局，通过CSS来提升工作效率！

目录：

一、CSS简介

二、CSS语法

三、样式的创建(内部样式 外部样式 内联样式)

四、CSS选择符(选择器)和基础属性

五、CSS选择符的权重

一、CSS简介

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

使用CSS的好处

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用

、

、

由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟(W3C)，这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式(Style)。

所有的主流浏览器均支持层叠样式表。

样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1、浏览器缺省设置

2、外部样式表

3、内部样式表(位于

标签内部)

4、内联样式(在 HTML 元素内部)

因此，内联样式(在 HTML 元素内部)拥有最高的优先权，这意味着它将优先于以下的样式声明：

标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明(缺省值)。

二、CSS的基础语法

1、导入样式表：

当想要将样式运用到整个网站而不是单张页面时，管理样式的更好的方法是将它们从网页中分离出来，放到称作样式表的独立文件中，以便在需要时导入。

(1).使用CSS的@immport指令导入样式表：

因为存在加载顺序的问题以及兼容问题，所以不推荐使用

(2).从HTML内部导入样式表：

(3).嵌入样式:

Hello there

2、CSS规则：

CSS规则是指一条或一系列语句，用以告诉网页浏览器怎样在页面上渲染某个或某些元素。CSS规则中的每条语句以选择器开始，指定施加规则的元素。规则中所有要修改的属性必须在选择器后面的"{"和"}"内出现。

例如，要将一号标题改为红色并放大24%：h1 { font-size:240%; color:red; }

三 、样式的创建(内部样式 外部样式 内联样式)

1、内部样式

写在head标签里，title标签下

小五的技术blog

body{background: red;}

2、外部样式

在head标签里，title标签下，引入外部css样式文件

小五的技术blog

3、内联样式

直接在html的标签里写css样式

小五的技术blog

四、CSS选择器

用于在页面上访问一个或多个元素的方法称为选择，在CSS规则中的这一部分被称为选择器。

(1) 类型选择器：类型选择器为HTML元素指定 类型，像

、

等：p { text-align:justify; }

(2) 后代选择器：允许将样式施加在那些包含在其他元素的元素之上：p b { color:red; }

(3) 子选择器：与后代选择器类似，但具有更具有强制性，仅选择那些作为其他元素的直接子元素：p > b { color:red; }

(4) 相邻选择器：对应于同一级上前后相邻的元素，在它们之间不存在别的元素，但可以有文本：i + b { color:red; }

(5) id选择器：如果给元素设置一个id(例如，id='mydiv')，就可以使用id直接从CSS访问它：#mydiv { font-style:italic; }

(6) 类选择器：当在一个页面中有许多元素要使用相同样式时，可以赋予它们相同的类名(例如，class='myclass')，然后创建一个规则来一次性改变所有这些元素：.myclass { margin-left:10px; }

此外，还可以通过明确元素类型的方式来缩小类的范围。例如，创建仅对使用main类的段落起作用的规则：p.main { text-indent:30px; }

(7) 属性选择器：许多HTML标记支持属性，使用这种选择器可以避免使用ID和类引用属性。例如，将属性为type="submit"的所有元素设置为100像素：[ type="submit" ] { width:100px; }

注：由'#'和'.'开头的id选择器和类选择器，可以视为属性选择器的简写，不过它们拥有更高的优先级。

(8) 通用选择器：“*”通配符或通用选择器可以匹配任何元素，“*”不会自身发挥作用，但是当它作为一条复合规则的一部分时却十分强大。例如，下面的语句只对所有段落中ID为boxout的元素的非直接子元素起作用：#boxout * p { border:1px solid green; }

(9) 分组选择:CSS可以同时将一个规则施加于用逗号分隔的多个元素、类或其他类型的选择器上：p, #idname, .classname { border-bottom:1px dotted orange }

4、

和 的区别

和 都是容器类型，不过有一些不同的性质。默认情况下，

元素具有无限的宽度，而 元素只有它所包含的文本的宽度。

5、CSS的单位

PX

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

REM

rem是CSS3新增的一个相对单位(root em，根em)，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

6、CSS字体和排版：

可以用CSS设置的四种主要的字体属性：family(字体族)、style(样式)、size(大小)和weight(粗细)。

1.字体族：指定要使用的字体p { font-family:Verdana, Arial, Helvetica, ans-serif, "Times New Roman"; }

注：在网页上使用最安全的字体是：Arial、Helvetica、Times New Roman、Times、Courier New和Courier，因为几乎所有浏览器和操作系统都支持它们。

2.字体样式：通过这个属性，可以选择正常(normal)、斜体(italic)和倾斜(oblique)(一种类似斜体的效果，通常用于sans-serif字体)显示字体。.normal { font-style:normal; }

.italic { font-style:italic; }oblique {font-style:oblique; }

3.字体大小：利用前面的度量单位，可以设置字体的固定大小或相对尺寸p { font-size:14pt; }

h3 { font-size:240%; }

4.字体粗细：制定字体的粗细，一般使用的主要是normal和bold这两个值.bold { font-weight:bold; }

此外，还可以通过改变文本的修饰、间距和对齐方式等来进一步修改文本的显示样式。

1.文本修饰：通过 text-decoration (文本修饰)属性，可以为文本设置下划线、删除线、上划线、闪烁等效果。

2.设置间距：通过 line-height (行高)属性改变行距、word-spacing(字间距)和 letter-spacing(字符间距)属性改变单词和字符间的距离。

3.对齐方式：通过使用 text-align 属性可设置文本的对齐方式，CSS可用的文本对齐方式有四种：左对齐(left)、右对齐(right)、居中(center)和两端对齐(justify)。

4.文本转换：通过使用 text-transform 属性进行文本转换，有四种属性来转换文本：无、首写字母大写、大写和小写。

5.文本缩进：通过使用 text-indent 属性可以将一段文本的首行缩进给定的大小。

七、CSS颜色

使用color和backgrounnd-color属性可以为文本和对象设置前景色和背景色。可以用颜色的名称、十六进制的RGB三原色和CSS的rgb函数设置颜色。

1.使用颜色名称：W3C标准化组织定义的标准的16中颜色的名称分别是：aqua(水蓝)、black(黑)、blue(蓝)、fuchsia(紫红)、gray(灰)、green(绿)、lime(绿黄)、maroon(酱紫)、navy(深蓝)、olive(橄榄绿)、ourple(紫)、red(红)、silver(银)、teal(青)、white(白)、和yellow(黄)

2.使用十六进制RGB：#ff0000、#00ff00、#0000ff等

3.使用rgb函数：rgb(0,255,255)

五、CSS选择符的权重

css中用四位数字表示权重，权重的表达方式如：0，0，0，0

① 标签选择符的权重为0001

② class选择符的权重为0010

③ id选择符的权重为0100

④ 属性选择符的权重为0010

⑤ 伪类选择符的权重为0010

⑥ 伪元素选择符的权重为0001

⑦ 包含选择符的权重：为包含选择符的权中之和 内联样式的权重为1000

扩展知识点：选择器特殊性是如何计算的？

通常，我们使用四个以逗号分隔的数字来表示特殊性，比如:

1. 每个元素或伪元素选择器贡献特殊性为 0，0，0，1

2. 每个类(class)、伪类或者属性选择器的特殊性为 0，0，1，0

3. 每个ID选择器的特殊性为 0，1，0，0

4. 结合符和通配符的对特殊性没有贡献

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。