HTML网页怎么使用CSS样式？

html-css015

HTML网页怎么使用CSS样式？,第1张

在制作一个网页的时候，Css样式的添加一共有四种方式，一起来看看这四种方式：

一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。

<元件(标签) STYLE="性质(属性)1: 设定值1性质(属性)2: 设定值2...}

例如：

<TD STYLE="COLOR:BLUEfont-size:9ptfont-family:"标楷体"line-height:150%>

这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签： 将样式规则写在<STYLE>...</STYLE>标签之中。

通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD></HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以<LINK>标签引入。

假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入

<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">

即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入： 跟LINK用法很像，但必　放在<STYLE>...</STYLE>中。

要注意的是，行末的分号是绝对不可少的！这种方式也可以把

1

新建一个html文件，命名为test.html，用于讲解html中如何导入css。

请点击输入图片描述

2

在test.html文件内，使用div创建一个模块，下面将对该div进行css样式的定义。

请点击输入图片描述

3

在test.html文件内，设置div的class属性为mydiv，主要用于css文件对该类名进行样式定义。

请点击输入图片描述

4

新建一个css文件夹，在文件夹内创建一个css文件，命名为test.css，用于编写css样式。

请点击输入图片描述

5

在test.css文件内，使用div的类名进行样式定义，设置div的宽度、高度均为200px，背景颜色为黄色。

请点击输入图片描述

6

在test.html文件内，使用link标签导入test.css样式文件，href为css路径。

请点击输入图片描述

7

在浏览器打开test.html文件，查看实现的效果。

HTML、CSS、JavaScript是前端学习非常重要的内容，三者为有机整体，需要一同学习：

1、HTML：

作为网页内容的载体，HTML包含了用户需要浏览的内容，包括图文、视频，即构成网页的基本元素。HTML是网页的结构（Structure），需要有多种框架和布局，比如frameset框架集、iframe内联框架、div+css布局、table布局等，同时支持表单提交（HTML Form），包括基础表单、input输入框、输入框类型、文本域、列表、label等。当前，大家通用的是HTML5，其中还有一些新增元素，比如footer、header等，总之，HTML的功能越来越强大，作为初学者还是要把握主干，有重点地去学习。

2、CSS：

CSS的作用是效果，或者说是表现（Presentation），比如网页上的动态文字、文字的色彩、字体、动画效果。正是因为CSS的存在使得HTML变得丰富多样。学习CSS，可以从版本CSS3开始，要了解CSS3的动画效果，如2D变换、过渡、特殊图形的绘制，雪碧图、滑动门等等都是常见的效果；除此之外，CSS3还有媒体查询（Media Queries）、grid，以及多列布局、用户界面等。CSS部分需要配合HTML，并结合实例来加以学习，这样效果会跟好。

3、JavaScript：

如果说一个网页只有“结构”和“表现”，而缺少了用户与网页的交互，即行为（Behavior），那么这样的网页就如一潭死水，无法形成良好的用户体验。好的用户体验不仅可以让用户鼠标放在哪里、哪里就会产生人性化的效果，而且可以增强用户的可操作性，例如购物网站用户的订购，网页会实时显示用户的购物动态。这样一来，JavaScript就有了编程的意味。和其他编程语言一样，JavaScript也有数据类型、条件语句、分支语句、字符串详解、数组详解、对象、函数、数值、Math函数、作用域。如果这一部分可以学会，便可以往更深的内容去发展。