CSS基础2--简单应用
2020-09-15 本文已影响0人
伊洛的小屋
应用CSS
CSS编写在扩展名为.css的单独文件中，并利用HTML 的<link>元素引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DEMO</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>微信搜索：伊洛的小屋</h1>
<p>凡是过去，皆为序章</p>
</body>
</html>
标记CSS文件
h1 {
color: blue;
background-color: cornflowerblue;
border: 1px solid black;
}
p {
color: darkviolet;
}
打开浏览器查看效果
<link>元素的href指向css文件的地址
内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DEMO</title>
<style>
h1 {
color: blue;
background-color: cornflowerblue;
border: 1px solid black;
}
p {
color: darkviolet;
}
</style>
</head>
<body>
<h1>微信搜索：伊洛的小屋</h1>
<p>凡是过去，皆为序章</p>
</body>
</html>
不使用外部CSS文件，而是将CSS放在HTML文件放在<style>标签中
内联样式
内联样式表存在于HTML元素的style属性之中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DEMO</title>
</head>
<body>
<h1 style="color: blue;background: cornflowerblue; border: 1px solid black">微信搜索：伊洛的小屋</h1>
<p style="color:red;">凡是过去，皆为序章</p>
</body>
</html>
选择器
每个CSS规则都以一个选择器或一组选择器为开始，选择器具有专一性且稍后的样式将覆盖以前的样式
属性和值
CSS由两部分组成：1.属性 2.值
与值配对的属性称为CSS声明，CSS声明放在CSS声明块中，属性和值都是区分大小写的，每对中的属性和值由冒号(：)分隔
规则
@rules
注释
CSS中的注释以/*开头，以*/结尾
/* 公众号：伊洛的小屋
个人主页：https://yiluotalk.com/
博客园：https://www.cnblogs.com/yiluotalk/ */
h1 {
color: blue;
background-color: cornflowerblue;
border: 1px solid black;
}
p {
color: darkviolet;
}
