CSS简介

一:CSS概述css

(1)CSS是指层叠样式表,这些样式定义如何显示HTML元素。这是因为若是是一个大型的网页,全部代码都写在一个HTML文件里面的话,会很不容易管理,同时代码的简洁度也不够,因此讲HTML文件内相同的样式提取出来,写到专门的CSS文件内,在经过引用的方式得以展示,大大提升了代码的复用率,提升了总体开发的效率。html

(2)CSS语言的特色主要有这几个特色,丰富的样式定义,CSS提供了丰富的文档样式外观;易于使用和修改,CSS能够将样式定义在HTML元素的style属性中,也能够定义在HTML文档的header部分,还能够定义在专门的CSS文件中,供HTML文件引用。修改是只须要修改定义的那部分代码,不须要修改因此使用这个样式的标签。易于管理,CSS能够将相一样式的元素进行归类,使用同一个样式进行定义,也能够将某个样式应用到全部同名的HTML标签中,也能够将一个CSS样式指定到某个页面元素中。若是要修改样式,咱们只须要在样式列表中找到相应的样式声明进行修改。多页面应用,CSS样式能够供任何页面文件均可以将其引用。页面压缩,样式声明在CSS样式表中,能够大大的减小HTML页面的内容,减小页面加载的时间。浏览器

 

二:多重样式层叠为一个htm

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

主要有三种样式表:外部样式表、内部样式表、内嵌样式表,其中,内嵌样式表拥有最高的优先权文档

一、内嵌样式
内嵌样式是把css的代码嵌入到html标签中
<div style="color:red;font-size: 100px;">你好啊 小朋友</div>
语法:
(1)使用style属性将样式嵌入到html标签中
(2)属性的写法:属性:属性值
(3)多个属性之间使用分号;隔开

class

二、内部样式
在head标签中使用style标签进行css的引入
<style type="text/css">
div{color:red;font-size: 100px;}
</style>
语法:
(1)使用style标签进行css的引入
<style type="text/css">
属性:type:告知浏览器使用css解析器去解析
(2)属性的写法:属性:属性值
(3)多个属性之间使用分号;隔开

效率

 

三、外部样式
将css样式抽取成一个单独css文件 谁去使用谁就引用
<link rel="stylesheet" type="text/css" href="demo1.css"/>
语法:
(1)建立css文件 将css属性写在css文件中
(2)在head中使用link标签进行引入
<link rel="stylesheet" type="text/css" href="css文件地址"/>
rel:表明要引入的文件与html的关系
type:告知浏览器使用css解析器去解析
href:css文件地址
(3)属性的写法:属性:属性值语法

相关文章
相关标签/搜索