您现在的位置是：课程教程文章

css中四种页面编写样式

2023-12-13 23:45课程教程文章人已围观

课程介绍: 1、 css中四种页面编写样式课程推荐; 2、 css中四种页面编写样式课程专题

说明

1、行内样式，编写css代码。

即直接在 html中的style属性里编写css代码。

2、内嵌样式，编写class。

即在 html h中的style标签内编写class，提供给当前页面使用。

3、导入样式，在内联样式中通过@import方法导入。

提供给当前页面使用。

4、外部样式，使用html中的link标签加载样式，提供给当前页面使用。

实例

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>案例</title>
<styletype="text/css">
/*p{
font-size:24px;
}*/
</style>
<linkrel="stylesheet"type="text/css"href="案例.css"/>
<styletype="text/css">
p{
font-size:24px;
}
</style>
</head>
<body>
<div>
<h1style="font-size:24px;font-family:楷体;text-align:center">望月怀远</h1>
<pid="text1">海上升明月，天涯共此时.</p>
<p>情人怨遥夜,竟夕起相思.</p>
<p>灭烛怜光满,披衣觉露.</p>
<p>不堪盈手赠,还寝梦佳期.</p>
<pstyle="text-decoration:underline;">123456</p>
<pstyle="text-decoration:line-through;">123456</p>
<pstyle="text-decoration:overline;">123456</p>
<pstyle="text-direction:rtl;">6789</p>
<pstyle="text-direction:ltr;">9876</p>
<pstyle="text=transform:none;">WelcomeToJiaxing</p>
<pstyle="text=transform:capitaliza;">WelcomeToJiaxing</p>
<pstyle="text=transform:uppercase;">welcometojiaxings</p>
<pstyle="text=transform:lowercase;">WelcomeToJiaxing</p>
<pstyle="line-height:normal;">
正常行高<br>
正常行高<br>
正常行高
</p>

<pstyle="line-height:42px">
42行高<br>
42行高<br>
42行高
</p>
<pstype="letter-spacing:normal;">welcome</p>
<pstype="letter-spacing:10px">welcome</p>
<pstype="letter-spacing:10px">66666</p>
<pstype="word-spacing:500px">行高</p>
<pstype="word-spacing:normal">行高</p>
</div>
</body>
</html>

以上就是css中四种页面编写样式的介绍，希望对大家有所帮助。更多css学习指路：css教程

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

课程教程：css中四种页面编写样式