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

html-css015

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为红色字体。

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