🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| 💫个人格言:“没有罗马,那就自己创造罗马~”
CSS
👉CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离. |
---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>hello world</p>
<p>Aileen</p>
<h1>你好</h1>
</body>
</html>
选择器+{一条/N条声明}
selector{ property:value }
CSS引入方式
行内样式表
⚠ 行内样式表的优先级比内部样式表优先级高. |
---|
外部样式表
<link rel="stylesheet" href="/path/example.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./demo02.css">
</head>
<body>
<p>hello css</p>
</body>
</html>
p{
color:crimson;
font-size: 80px;
}
Summary