0x00 选择器介绍

选择器：查找页面元素的一种方式方法
{}：规定了选择器查找到的元素(标签)实现统一的样式规定
样式规则里面放置的是属性和属性值
需要注意的是：属性和属性值需要使用冒号：连接
每一组属性和属性值结束后需要使用分号结尾
如果是最后一组，则不用写分号

示例：

0x01标签、类选择器

CSS的选择器有 标签选择器、类选择器、id选择器等 通常配合style标签使用
如果开发比较大的项目，则最好单独创建css文件，用类似

这样的语句进行链接

基本语法：
标签{样式规则}
.类名{样式规则}

示例：

	
		
		
		
		
	
	
		
		
		 
		 
我是一个p标签
		 
我是一个p标签
		 
我是一个p标签
		 
我是一个p标签
		 
我是一个p标签
		 
		 
不管我是什么，我都是爱壮壮的宝宝?
		 
我是第一个div
		 
我是第二个div
		 
我是第三个div
		 
我是第四个div
			
我是div里面的p标签
		 
		 
我是一个一级标题
		 
我是一个二级标题
		 
我是一个三级标题
		 
我是一个四级标题
	

0x02-id选择器

给元素起一个id的名字，CSS里面通过这个id的名字查找页面的元素，实现对应的修饰
每一个id的取值不能一致，只能出现一次(从JS的角度考虑问题)

起名字的规范：
1、见名知意
2、不能以数字开头
3、不能以汉字命名
4、能用字母、数字、下划线配合使用 eg:box1 / box_1

示例：

	
		
		
		
		
	
	
		
		
		 
		 

		 	我是一个div，我有两个名字，一个类名 一个id名字
		 
	

0x03-标签、类、id选择器的优先级

问题：
如果我使用不同的选择器修饰同一个元素，实现的效果是啥样的？

不同选择器修饰元素的时候，实现的效果与代码的顺序没有关系，跟选择器的权值大小有关
id选择器权值>类选择器权值>标签选择器权值
所以我们就有：
公式：id>类>标签>通配符选择器.

通配符选择器就干一件事：取消元素自带的内边距、外边距
即

*{
				margin: 0;
				padding: 0;
			}

选择器对比示例：

执行之后发现，页面显示的属性是css中#bob的内容

0x04-通配符选择器

用来取消元素自带的外边距和内边距
外边距(margin)：外边框和另一个外边框的距离
内边距(padding): 内容和自己的外边框之间的间距

这里有一张图可以快速理解：

消除元素自带内边距外边距示例：

	
		
		
		
		
	
	
		
我是一个p标签
		
我是一个h1标签
		
我是一个h3标签
		
		

			
XX工业大学（XX省科学院）
			
北京千锋教育
		
	

0x05-文本属性、各种(上中下)划线

1、文本加粗属性
font-weight:bold;
2、文本倾斜属性
font-style:italic;
3、下划线 == 删除线属性====修饰线
text-decoration :
underline ===== 下划线
line-through == 中划线
overline ====== 上划线
none ========== 取消文本修饰线(修饰线不够的时候)

一个示例

	
		
		
		
		
	
	
		
		 
		 
今天是6月28日，来千锋实训的第一天，离家的第三天
		 
		 我是一个下划线标签 

		 我是一个删除线标签 

		 我是一个下划线和一个中划线在一起的效果哟
	

0x06-元素的宽度和高度、背景

元素的宽度和高度属性
元素的宽度
width:200px;
元素的高度
height:200px;
不是所有的元素都能直接设置宽度和高度的，因为元素的类型不同
块级元素可以直接设置宽高，但是行内就不行。
目前来看可以设置宽高的有：div,p,ul,li,ol,dl,dt,dd,h1-h6,
不能设置宽高的元素：a,b,u,s,sup,sub,span

	
		
		
	
	
	
		
		
我是一个div
		
我是一个p标签
		我是一个b标签
		我是一个倾斜i标签
	

0x07-文本相关操作

调整文字大小
font-size:
10px其实已经是极限了，考虑到眼睛舒适度
默认浏览器字体大小：16px
文本颜色
color：
1.颜色
2.颜色的取值：可以为#配合六位十六进制
0-9A-F
#ee1234
3.rgb(red,green,blue);
0-255

示例：

	
		
		
		
	
	
		
		
		
千锋教育联合齐鲁工业大学校内实训课程
		
千锋教育联合齐鲁工业大学校内实训课程
	

0x08-END