<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>体验css语法规范</title>
<style>
/* 以后css都style标签中 */
/* 选择器{样式} */
/* 给谁改样式{改什么样式} */
p {
color(属性): red(值);
/* 修改为12像素的文字 */
font-size: 12px;
/* 1.选择器是用于指定css样式HTML标签，花括号内是对对象设置的具体样式
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等
4.属性与属性值之间用英文":"分开
5.多个“键值对”之间用英文";"进行区分*/
}
/* css代码风格 */
/* 1.样式格式书写 */
1.紧凑格式h3 {
color: rgb(255, 20, 130);
font-size: 20px;
}
2.展开格式h3 {
color: pink;
font-size: 20px;
}
3.空格规范h3 {
color: pink;
/* 1属性值前面，冒号后面，保留一个空格
2.选择器(标签)和大括号中间保留空格*/
}
/* 选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器 */
/* 1.基础选择器是由单个选择器组成的
2.基础选择器又包括:标签选择器，类选择器，id选择器和通配符选择器 */
/* 1.1.1标签选择器 */
/* 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类指定统一的css样式 */
/* 作用 */
/* 标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签 */
/* 优点 */
/* 能快速为页面中同类型的标签统一设置样式 */
/* 缺点 */
/* 不能设计差异化样式，只能选择全部的当前标签 */
div {
color: pink;
}
/* 1.1.2类选择器 */
/* 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器 */
/* 类选择器口诀：样式点定义 .red .hah类似于这样 结构类(class)调用 一个或多个 开发最常用 */
.red {
color: red;
}
/* 1.1.3类选择器特殊使用 多命名规则*/
多类名使用方式
/* div class="red font20" 哈哈 div*/
/* 1.在标签class属性中写多个类名 */
/* 2.多个类名中间必须用空格分开 例如red font35*/
.red {
color: red;
}
.font35 {
font-size: 35px;
}
/* 看个高级点的 */
.box {
width: 150px;
height: 150px;
font-size: 30px;
}
.green {
background-color: red;
}
.pink {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<liclass="red font35">易雯琪</li>
</ul>
<divclass="red font35">王新桦</div>
<ahref="https://blog.csdn.net/wang414300980/article/details/79758008"target="_self">类命名规则</a>
<p>有点意思</p>
<div>女</div>
<div>女</div>
<h4>这里是高级点的</h4>
<divclass="box green">红</div>
<divclass="box pink">黄</div>
</body>
</html>
