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>