HTML网页怎么使用CSS样式?

html-css037

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>中。

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

你是不是用的chrome浏览器啊?如果是的话那这个就是他浏览器的问题,因为谷歌浏览器规定了最小的字体是12px,任何小于12px的字体都会默认的修改为12px的。在之前的chrome版本中还有一句代码能使这个规则失效(-webkit-text-size-adjust:none),但是在最新的几个版本用这个也不行了,如果没解决请追问,解决了请采纳。

1,直接在html标签元素内嵌入css样式,如<div style="font-size:14pxcolor:#FF0000">

2,在html头部head部分内style声明插入代码如下:

<style type="text/css">

<!-- 这里是设置CSS的样式内容*/ -->

</style>

3,使用@import引用外部CSS文件方法

<style type="text/css">

<!-- @import url(wacss.css)/*这里是通过@import引用CSS的样式内容,必须要有wacss.css这个文件*/ -->

</style>

4、使用link来调用外部的css文件

在head放置<link rel="stylesheet" href="wacss.css" type="text/css" />来调用外部的wacss.css文件来实现html引用css文件

第三种很少用到,实际的开发中常用的是1跟4,具体用哪种看你自己的需要