如何在页面添加css

html-css09

如何在页面添加css,第1张

有四种方式,行内样式,内嵌式,链接和导入式

行内呢是在标签里直接写,比如<div

style="text-align:center

width:750px">

内嵌是写在<head></head>之间,例如:<style

type="text/css">

<!--

body

{margin:0

autopadding:0font-family:"宋体"font-size:12px

color:#000000text-align:center}

-->

</style>

链接和导入没有什么太大的区别,需要简历外部CSS文件,在GW中按ctrl+n有那选项

之后在页面<head></head>之间加入CSS文件所在路径调用,如下,<link

href="CSS/CSS1.css"

rel="stylesheet"

type="text/css"

/>

如果要在HTML文件中应用CSS样式,最常用的有三种方法:

1.内部引用

所谓内部引用就是运用style标签引用在同HTML页内<HEAD></HEAD>部分的css定义。如:

<html>

<head>

<style type="text/css">

.cssstyle { font:12px

color:#339966

border:1px #e1763d solid

}

<style/>

</head>

<body>

<div class="cssstyle">THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>

</body>

</html>

2.外部引用

外部引用就是用<link>标签引用外部CSS文件中的样式。如欲实现上述效果,可将CSS做成单独文件。

文件CSSSTYLE.CSS

.cssstyle { font:12px

color:#339966

border:1px #e1763d solid

}

然后在HTML引用它:

<html>

<head>

<link rel="stylesheet" type="text/css" href="cssstyle.css">

</head>

<body>

<div class="cssstyle">THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>

</body>

</html>

使用这种方法引用要确保CSS文件和HTML文件的相对路径完整无误,要不然HTML文档是不会找到CSS样式的。

3.内联引用

内联引用其实就是在应用CSS样式的HTML部分直接在所做用的标签上定义CSS样式,这种方法最直接,但是缺点也最明显,最大的问题就是代码繁冗,作用域也仅仅在定义的标签的作用范围。如:

<p style="color:#ccc">THIS TEXT IS GREY</p>

<p>I AM NOT GREY, WHAT COLOR AM I? :)</p>

据我个人经验看:

行间样式就是可以在 所需的位置随时调整,比如说,要修改一个文字的颜色,那么修改该处的行间样式即可,也就是修改的位置即是要显示的位置,马上可以看到。还有一个优点是可以直接控制该标签或者元素,优先级最高,修改即生效,缺点:这样的样式只能一个一个来,不能互相套用(copy不算套用。)

内部样式就是写在顶部的本页内定义的样式,这个的好处在于可以方便的修改本页内统一定义的样式,比如定义一个class,页面内所有涉及位置都会随之改变,方便页内统一管理,同时当需要修改的时候不需要到某一个元素或者标签的位置,在顶部统一修改即可,缺点在于:这样的样式要使用好,不然互相的父子元素之间的套用关系优点复杂,另外,这个样式也仅仅是对本页有效。

外部样式就是在顶部从外部引入的样式,该样式的定义与内部样式一样,只是由外部的css文件定义而已,优点在于同样的样式不需要重写每一页的代码,只要有使用需求,只需要都引入该相同的外部样式文件即可,这样避免了每个网页重写一遍的麻烦。缺点在于:修改的时候要修改单独的文件,如果外部样式css文件管理不好,会造成,想修改一个页面的样式,影响了很多不需要修改的页面样式,同时,在修改某一页某个标签样式的时刻,在复杂的css文件中很不容易定位找到,也就是不能“想改它,就改它”,需要到外面“找到它,再改它,回去再看它”。

三个各有优势,很多人认为外部最好,个人建议还是根据需要混合使用,尽量通用的,不需要频繁更改的尽量使用外部样式,单一页面样式统一但与其他页面区别的,用内部样式作为外部样式的补充,对于内部和外部样式都不好按照你的愿望修改的,可以用行间样式强行修改。

希望我大答案让你满意。