混合式APP开发的前提基础学习——CSS1

1、 CSS概述

1.1 CSS的作用

早期，依靠HTML元素的属性设置样式，比如：border/align；而每个元素的属性不尽相同，所以样式设置比较混乱；因此，W3C推出了一套标准：使用某种样式声明后，所有的元素通用，即CSS产生，它是对页面的样式进行统一的定义（声明）的。

1.2什么是CSS

1）CSS（Cascading Style Sheets）：层叠样式表，又叫级联样式表，简称样式表。

2）用于HTML文档中元素的样式定义。

3）实现了将内容与表现分离。

4）提高了代码的可重用性和可维护性。

1.3 CSS的基础语法

1）样式表由多个样式规则组成，每个样式规则有两个部分：选择器和声明。

2）选择器：决定哪些元素使用这些规则。

3）声明：由一个或者多个属性/值对组成，用于设置元素的外观表现。

2 如何使用CSS样式表

一共有三种使用方式：内联样式、内部样式表、外部样式表。

2.1内联样式

样式定义在单个的HTML元素中。

1）样式定义在HTML元素的标准属性style里。

2）不需要定义选择器，也不需要大括号。

3）只需要将分号隔开的一个或者多个属性/值对，作为元素的style属性的值。

例如：<h1 style="background-color:silver;color:blue">文本</h1>

2.2内部样式表

样式定义在HTML页的头元素中。

1）样式表规则位于文档头元素的<style>元素内。

2）在文档的<head>元素内添加<style>元素，在<style>元素中添加样式规则。

例如：<head><style type="text/css">

h1{ color:green; }

</style></head>

u 注意事项：<style>元素中的属性type="text/css"可省略。且<style>元素里的注释要用CSS规定的注释/*注释*/，而不是HTML里的注释。

2.3外部样式表

将样式定义在一个外部的CSS文件中（.css文件），由HTML页面引用样式表文件。

1）首先需要创建一个单独的样式表文件，用来保存样式规则。

①一个纯文本文件。②该文件中只能包含CSS样式规则。③文件后缀为.css。

2）然后在需要使用该样式表文件的页面上，使用<link>元素链接需要的外部样式表文件。

例如：myStyle.css文件：

h1{ color:green; }

p{ background-color;silver;color:blue; }

html文件里的<head>元素：

<head>

</head>

u 注意事项：rel：代表做什么用；href：代表引如的文件在哪；type：代表引入的文件是什么类型的；text/css：代表纯文本类型的CSS代码。

2.4三种用法的区别

1）内联样式：将样式定义在元素的style属性里；但没有重用性。

2）内部样式表：将样式定义在<head>元素里的<style>里；但仅限于当前文档范围重用。

3）外部样式表：将样式定义在单独的.css文件里，有页面引入它；但可维护性和可重用性高，同时实现了数据（内容）和表现的分离。

2.5 CSS样式表特征和优先级

1）继承性：大多数CSS的样式规则可以被继承（子元素继承父元素的样式）。

2）层叠性：可以定义多个样式表；不冲突时，多个样式表中的样式可层叠为一个，即不不冲突时采用并集方式。

3）优先级：即冲突时采用优先级

内联 > 内部或者外部。

内部和外部：优先级相同的情况下，采取就近原则，以最后一次定义的为优先。

所以，当修改时，不想去找，就在CSS中最后的位置重新写一遍新的样式。这也是CSS文件越来越大的原因。

u 注意事项：还应注意浏览器的缺省设置。

4）所以级联（层叠）样式表CSS的特点是：继承+并集+优先级。