0x00 选择器介绍
选择器：查找页面元素的一种方式方法
{}：规定了选择器查找到的元素(标签)实现统一的样式规定
样式规则里面放置的是属性和属性值
需要注意的是：属性和属性值需要使用冒号：连接
每一组属性和属性值结束后需要使用分号结尾
如果是最后一组，则不用写分号
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
网站的组成部分
1、HTML的结构层======标签
结构===完毕
2、CSS的样式层=======对标签结构的修饰
样式修饰
语法：
选择器{
样式规则
}
选择器：查找页面元素的一种方式方法
{}：规定了选择器查找到的元素(标签)实现统一的样式规定
男生{
发型:3mm;
T恤:大红色;
短裤:正绿色;
}
样式规则里面放置的是属性和属性值
注意：属性和属性值需要使用冒号：连接
每一组属性和属性值结束后需要使用分号结尾
如果你的属性和属性值是最后一组，则不需要使用分号
如果后面继续填写，则需要使用分号
3、JS的行为交互层====动态的效果
-->
</body>
</html>
0x01标签、类选择器
CSS的选择器有 标签选择器、类选择器、id选择器等 通常配合style标签使用
如果开发比较大的项目，则最好单独创建css文件，用类似
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
这样的语句进行链接
基本语法：
标签{样式规则}
.类名{样式规则}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
background-color: red;
}
h2{
background-color: deeppink;
}
h3{
background-color: orange;
}
p{
background-color: yellow;
}
.p1{
background-color: aqua;
}
#love{
background-color: pink;
}
</style>
</head>
<body>
<!--
选择器：页面元素的查找方式方法，不止一种
有哪些选择器：
标签选择器：通过标签的名字查找页面中的元素
通过标签选择器查找页面元素的时候，查找的范围太大了
类选择器
给元素起一个类名，通过类名去查找页面元素
基本语法：
HTML: <div class = "box1"></div>
CSS : .box1{样式规则}
注意:.不能省略
id选择器
CSS基本语法的使用
一定要配合style标签使用;并且style标签需要放在head标签里面
-->
<p class="p1">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<h1 id="love">不管我是什么，我都是爱壮壮的宝宝♥</h1>
<div class="p1">我是第一个div</div>
<div>我是第二个div</div>
<div>我是第三个div</div>
<div>我是第四个div
<p>我是div里面的p标签</p>
</div>
<h1>我是一个一级标题</h1>
<h2>我是一个二级标题</h2>
<h3>我是一个三级标题</h3>
<h4>我是一个四级标题</h4>
</body>
</html>
0x02-id选择器
给元素起一个id的名字，CSS里面通过这个id的名字查找页面的元素，实现对应的修饰
每一个id的取值不能一致，只能出现一次(从JS的角度考虑问题)
起名字的规范：
1、见名知意
2、不能以数字开头
3、不能以汉字命名
4、能用字母、数字、下划线配合使用 eg:box1 / box_1
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#bob{
background-color: aquamarine;
}
</style>
</head>
<body>
<!--
id选择器
给元素起一个id的名字，CSS里面通过这个id的名字查找页面的元素，实现对应的修饰
每一个id的取值不能一致，只能出现一次(从JS的角度考虑问题)
基本语法：
HTML：<div id = "bob"></div>
CSS部分：
#bob{
样式规则
}
-->
<div class = "box" id="bob">
我是一个div，我有两个名字，一个类名 一个id名字
</div>
</body>
</html>
0x03-标签、类、id选择器的优先级
问题：
如果我使用不同的选择器修饰同一个元素，实现的效果是啥样的？
不同选择器修饰元素的时候，实现的效果与代码的顺序没有关系，跟选择器的权值大小有关
id选择器权值>类选择器权值>标签选择器权值
所以我们就有：
公式：id>类>标签>通配符选择器.
通配符选择器就干一件事：取消元素自带的内边距、外边距
即
*{
margin: 0;
padding: 0;
}
选择器对比示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*标签选择器*/
div{
200px;
height: 200px;
background-color: orange;
}
/*类选择器*/
.box{
300px;
height: 300px;
background-color: yellow;
}
/*id选择器*/
#bob{
400px;
height: 400px;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div class="box" id="bob">
</div>
</body>
</html>
执行之后发现，页面显示的属性是css中#bob的内容
0x04-通配符选择器
用来取消元素自带的外边距和内边距
外边距(margin)：外边框和另一个外边框的距离
内边距(padding): 内容和自己的外边框之间的间距
这里有一张图可以快速理解：
消除元素自带内边距外边距示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
如何取消元素自带的内边距和外边距
-->
<style type="text/css">
/* 通配符选择器 */
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<h1>我是一个h1标签</h1>
<h3>我是一个h3标签</h3>
<ul>
<li>XX工业大学（XX省科学院）</li>
<li>北京千锋教育</li>
</ul>
</body>
</html>
0x05-文本属性、各种(上中下)划线
1、文本加粗属性
font-weight:bold;
2、文本倾斜属性
font-style:italic;
3、下划线 == 删除线属性====修饰线
text-decoration :
underline ===== 下划线
line-through == 中划线
overline ====== 上划线
none ========== 取消文本修饰线(修饰线不够的时候)
一个示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
/* 文本加粗属性 */
font-weight: bold;
/* 实现倾斜效果 */
font-style: italic;
/* 文本修饰线 */
text-decoration: overline line-through underline;
}
/* u{
text-decoration: none;
}
s{
text-decoration: none;
}
a{
} */
</style>
</head>
<body>
<!--
CSS样式规则：
规定了页面中的标签实现什么样的样式
主要讲解内容：属性和属性值
属性：对元素的形容，对元素的修饰
属性值：就是属性的取值，修饰的取值
选择器{
属性:属性值;
}
eg：
男生{
发型:3mm;
}
-->
<p>今天是6月28日，来千锋实训的第一天，离家的第三天</p>
<u>我是一个下划线标签</u> <br>
<s>我是一个删除线标签</s> <br>
<u><s>我是一个下划线和一个中划线在一起的效果哟</s></u>
</body>
</html>
0x06-元素的宽度和高度、背景
元素的宽度和高度属性
元素的宽度
200px;
元素的高度
height:200px;
不是所有的元素都能直接设置宽度和高度的，因为元素的类型不同
块级元素可以直接设置宽高，但是行内就不行。
目前来看可以设置宽高的有：div,p,ul,li,ol,dl,dt,dd,h1-h6,
不能设置宽高的元素：a,b,u,s,sup,sub,span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div{
200px;height: 200px;background-color: turquoise;
}
p{
100px;height: 100px;background-color: mediumpurple;
}
b{
200px;height: 200px;background-color: yellow;
}
</style>
<body>
<div>我是一个div</div>
<p>我是一个p标签</p>
<b>我是一个b标签</b>
<i>我是一个倾斜i标签</i>
</body>
</html>
0x07-文本相关操作
调整文字大小
font-size:
10px其实已经是极限了，考虑到眼睛舒适度
默认浏览器字体大小：16px
文本颜色
color：
1.颜色
2.颜色的取值：可以为#配合六位十六进制
0-9A-F
#ee1234
3.rgb(red,green,blue);
0-255
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1{
/* 设置字体大小 */
font-size: 16px;
/* 设置文字颜色 */
color:rgb(123,234,234);
}
</style>
</head>
<body>
<!-- 文本的颜色和文本的大小 -->
<p class="p1">千锋教育联合齐鲁工业大学校内实训课程</p>
<p class="p2">千锋教育联合齐鲁工业大学校内实训课程</p>
</body>
</html>
0x08-END
