在HTML中如何使用css样式
1、内联方式（行内样式）
就是在HTML的标签中使用style属性来设置css样式
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<p style="border: 1px solid red;">Yu is a good man</p>
<p style="color: red; font-size: 40px;">Yu is a good man</p>
<p style="width: 100px;height: 100px;border: 1px solid red;border-radius: 50px;background-color: aqua"></p>
</body>
</html>
2、内部方式（内嵌样式）
就是在head标签中使用<style type="text/css">....</style>标签来设置css样式
格式：
<style type="text/css">
....css样式代码
</style>
特点：作用于当前整个页面
HTML选择器，也就是给标签名称即可，会给所有的p都设置此样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内嵌样式</title>
<style>
/*HTML选择器，也就是给标签名称即可，会给所有的p都设置此样式*/
p{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<p></p>
<p></p>
<h2></h2>
</body>
</html>
3、外部导入方式（外部链入）
（推荐）就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置
格式：
<link href="文件名.css" type="text/css" rel="stylesheet"/>
特点：作用于整个网站，可以进行整体修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内嵌样式</title>
<link rel="stylesheet" href="basicCSS.css">
</head>
<body>
<p></p>
<p></p>
<h2>Hello</h2>
</body>
</html>
basicCSS.css
h2 {
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50px;
background-color: aqua;
}
网友评论