CSS的三种使用方法。 行内样式： 内嵌式： 外部式：

html-css028

CSS的三种使用方法。 行内样式： 内嵌式： 外部式：,第1张

三中的使用方法的简单实例如下：

行内样式：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>css行内样式</title>

</head>

<body>

<div style="width:100pxheight:100pxbackground:red"></div>>

</body>

</html>

内嵌样式：

!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>css内嵌样式</title>

</head>

<body>

<style type="text/css">

#div{width:100pxheight:100pxbackground:red}

</style>

<div id="div"></div>>

</body>

</html>

外部式：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>css内嵌样式</title>

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

</head>

<body>

<div id="div"></div>>

</body>

</html>

css文件

#div{width:100pxheight:100pxbackground:red}

拓展资料：

三中的使用方法的简单实例如下：

行内样式：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>css行内样式</title>

</head>

<body>

<div style="width:100pxheight:100pxbackground:red"></div>>

</body>

</html>

内嵌样式：

!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>css内嵌样式</title>

</head>

<body>

<style type="text/css">

#div{width:100pxheight:100pxbackground:red}

</style>

<div id="div"></div>>

</body>

</html>

外部式：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>css内嵌样式</title>

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

</head>

<body>

<div id="div"></div>>

</body>

</html>

css文件

#div{width:100pxheight:100pxbackground:red}

简言之：

行内样式：就是代码写在具体网页中的一个元素内；比如：<div style="color:#f00"></div>

内嵌式：就是在</head>前面写；比如：<style type="text/css">.div{color:#F00}</style>

外部式：就是引用外部css文件；比如：<link href="css.css" type="text/css" rel="stylesheet" />

类、标签、ID：

类(class)：样式表里写的时候以点开头"."如(.aa{text-align:center})使用的时候给标签的class付值如:(<div class="aa">show</div>)DIV就会遵循aa的样式在中间显示show。

标签:样式表里直接写标签名，如(table{border:1px #ff0000 solid}),网页中的<table></table>就会遵循table的样式 边框都是1像素的实线。

高级:按ID来选择样式。写的时候以#开头，如(#show{color:red}),使用时直接付值给标签的ID，

如(<div id="show">aaa</div>),DIV遵循show的样式 aaa为红色字体。

注意：子类的样式会覆盖父类的样式，同名的样式最后执行的会覆盖前边执行的。