揭秘CSS入门知识的神秘面纱！

发表时间: 2016-06-14 10:57

一：首先谈谈html控制样式的弊端

1.相同的样式效果，通过不同的属性来完成的

例如颜色：<body text=""> <font color="">

2.程序的可维护性不高。少的工作完成更多的事情就可称之为可维护性高

通过css就能解决上述问题。

可以让各个元素都使用同一的样式声明，从而提高程序的可重用性和可维护性。

二：了解什么是css

css：cascading style sheet，中文层叠样式表，级联样式表，简称样式表

作用：为html元素去定义样式，可以实现内容与表现相分离。提高程序的可重用性和可维护性。

可重用性：多个元素可以使用相同的样式

可维护性：一个位置的样式改变，其他元素也可以跟着变

三：知道HTML与CSS之间的关系

HTML主要负责显示内容

CSS主要负责样式的定义

一个完整的页面=HTML+CSS

因为有些样式在html和css中都能实现，W3C建议尽量使用CSS样式取代HTML

四：学懂CSS样式表的使用方式

1.将样式定义在HTML元素中，直接写在html，不能实现内容和表现相分离，有称之为内联样式或者行内样式。

特点：只能控制某一个元素的显示效果。

语法：<标记 style="样式属性:值;样式属性：值......"></标记>

常用属性：

color：文本颜色，取值：表示颜色的英文单词

style="color:red;"

红色

style="background-color:green;"

背景绿色

style="color:red;background-color:green;"

文本红色，背景绿色

font-size:字体大小，取值为px为单位

style="font-size:20px"

2.内部样式表

将所有样式内容放在头部<head></head>中的<style></style>元素内

样式规则：对一套样式的完整描述。主要包含两部分：

1.1.哪些标记允许使用定义好的样式，叫做选择器

1.2.样式内容：若干样式声明。(样式属性和值）

样式规则语法：

选择器{样式属性:值;}

选择器的分类

1.标记选择器：通过标记的名称来表示，定义这个标记是什么样式。

div{

color:red;

font-size:48px;

}

特点：

能够实现内容与表现相分离

提升了样式的可重用性和可维护性

只能在一个页面中做通用样式定义（控制一个页面的样式）

3.外部样式表

将样式规则保存在独立的样式文件中，由页面对样式文件进行引用

特点：

能够实现内容与表现相分离

完美的体现样式的可重用性和可维护性

所有的页面的样式都能统一控制，在整个网站乃至于互联网中做通用的样式定义。

用法

1.创建一个样式表文件，以css结尾，该文件中只能包含样式规则

2.在页面中，对样式表文件进行引用

<head></head>中增加以下代码

此文为看点钟震说事儿原创内容，特此声明

揭秘CSS入门知识的神秘面纱！

热门阅读

推荐阅读