1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Web前端基础——层叠样式表(CSS)

Web前端基础——层叠样式表(CSS)

时间:2019-11-25 05:23:40

相关推荐

Web前端基础——层叠样式表(CSS)

目录

一、CSS介绍

二、CSS使用方式

2.1、行内样式

2.2、内嵌样式

2.3、外链式

2.4、导入式

三、CSS3基本语法

四、盒子模型

一、CSS介绍

CSS全称为层叠样式表,是用来做到网页和内容分离的样式语言,与HTML语言共同用作网页开发方面。CSS既可以构建静态web界面,也可以构造动态web界面。

二、CSS使用方式

2.1、行内样式

通过style标签属性,为当前标签添加声明,其中样式声明由CSS属性和值组成

<标签名 style=”样式声明”>

2.2、内嵌样式

借助style标签,将该CSS代码嵌入到HTML文档中,可以实现将CSS样式与HTML标签之间的分离作用。此时是通过CSS选择器将CSS代码嵌入到HTML代码中。

CSS选择器:通过标签名选取对应HTML代码中对应标签,为其应用样式。

2.3、外链式

将CSS文件单独放入.css文件中,通过link标签引用(rel------声明关系类型、href-----指向连接文件)

格式:<link rel=”stylesheet”href=”1.css”>

2.4、导入式

导入式是将单独的.css文件引入到style中,存在较大的缺点,页面会先加载html后再加载css样式文件,所以会存在时延。

三、CSS3基本语法

一共有三种基本设置方法:选择器通过标签名直接进行设置;选择器通过徐州呢class属性值进行设置;选择器通过id属性值进行设置,具体使用方法如下图所示:

还有三种较复杂的用法,我们统称为复合选择器:后代选择器/交集选择器/并集选择器

四、盒子模型

我们可以将HTML盒子简要看做一个盒子。这个盒子从内到外分别存在content(内容),padding(内边距),Border(边框)和margin(外边框)构成。

书写格式:

选择器{

width: 300px;

border: 25px solid green;

padding: 25px;

margin: 25px;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。