在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;
}
网友评论