css介绍
CSS包含样式规则，这些样式规则由浏览器解析，然后应用于HTML的相应元素。相当于美化页面。
css样式引用的方式
新建css文件夹和style.css文件
@charset "utf-8";
/* 引入其他的css样式
引@import url(""./base.css); */
h1 {
font-size: 50px;
}
div{
font-size: 20px;
color: red;
background-color: aqua;
}
h1,p,a{
color: black;
}
.red{
color: brown;
}
使用link引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<!-- 使用link引用 -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div>
<h1>hahah</h1>
<p>sjsjsjs</p>
</div>
<p>哈哈啊哈</p>
</body>
</html>
使用@import引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<!-- @import -->
<style>
@import url(./css/style.css)
</style>
</head>
<body>
<div>
<h1>hahah</h1>
<p>sjsjsjs</p>
</div>
<p>哈哈啊哈</p>
</body>
</html>
CSS选择器
css选择器语法
- Selector - 选择器是将应用样式的HTML标签。 这可以是任何标签，例如<h1>或<table>等。
- Property - 属性是HTML标签的一种属性，简而言之，所有HTML属性都将转换为CSS属性，它可能是颜色(color)，边框(border)等。
- Value - 将值分配给属性。例如， color 属性可以具有 red 或#F1F1F1 等值。
selector {
property: value }
定义表格边框：
table{
border :1px solid #C00; }
这里的table是一个选项器，border是一个属性，给定值 1px solid#C00 是该属性的值。您可以根据自己的喜好以各种简单的方式定义选择器。
类型选择器
h1 {
color: #36CFFF;
}
通用选择器
通用选择器不选择特定类型的元素，而是简单地匹配任何元素类型的名称，此时body里面的元素都会应用这个配置
* {
color: #000000;
}
该规则将文档中每个元素的内容显示为黑色。
元素选择器
head中代码:
div{
color:pink;
}
p{
color:red;
}
body中代码：
<p >啊哈哈哈</p>
<div >啊哈哈哈</div >
Class选择器
基于元素的class属性定义样式规则。具有该类的所有元素将根据定义的规则进行格式化。一个元素可以有多个class值，多个class用空格分隔。
.black {
color: #000000;
}
body中代码：
<p class="black">
This para will be styled by the classes center and bold.
</p>
对于我们文档中class属性设置为 black 的每个元素，此规则均将其内容呈现为黑色。
id选择器
通过id选中元素，需要#加上id名。id的名称在同一个内容中不要重复。
head中代码
#pu{
color: #000000;
}
#header.title{
color: #000000;
}
body中代码
<div id="pu"> 哈哈哈 </div>
<div id="header">
<div class="title"> 哈哈哈 </div>
</div>
聚合选择器
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}