<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
*
标签名选择器
给页面所有同名的标签定义样式的选择器
语法 标签名{样式}
* */
span{
background-color: skyblue;
font-size: 40px;
font-family: "楷体";
color: orangered;
}
/*
id选择器
一般body中的任何一个标签都有id属性
id属性的值一般在同一个网页上是不允许有重复值
id属性一般用于帮助我们定位到页面上唯一的一个标签
id属性值命名有规则
不能有空格和一些特殊符号
特殊符号中仅可以使用_ 不推荐 $ 会和jquery命名冲突
不能以数字为开头
推荐写法 应为字母开头 数字放在后面
语法: #id值{样式}
*/
#p1{
border: 1px dotted blue;
background-color: gray;
color: red;
width: 100px;
height: 100px;
}
/*
类选择器
一般body中的所有标签都有class属性
多个不同的标签可以有相同的class属性值
通过标签的class属性确定样式的作用范围
语法 .class属性值{样式}
*/
.c1{
background-color: cadetblue;
font-size: 50px;
font-family: "微软雅黑";
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<span id="s1">今天是2020年3月5日</span>
<br />
<span id="s2">今天是2020年3月5日</span>
<p id="p1">今天是2020年3月5日</p>
<p id="p2">今天是2020年3月5日</p>
<p id="p3" class="c1">今天是2020年3月5日</p>
<h1 id="ha" class="c1">今天是2020年3月5日</h1>
<a href="#" class="c1">百度</a>
</body>
</html>
