初识CSS与文本背景样式

初识CSS样式 与 文本背景样式

什么是CSS(层叠样式表)

html -- 写东西出来给别人看
css -- 找到html写出来的东西,加特效
	1.怎么找
	2.加什么

css -- 层叠样式表 -- 对网页进行排版,美化外观,优化性能
	文本 -- 字体,大小,颜色,缩进
	图片 -- 宽高,边框,颜色,透明度
	页面 -- 布局,性能优化(懒加载)

html : 身体  css: 化妆品/衣服
	网页文件后缀: .html
	样式表文件: .css

css注释写法:
	/* 注释内容 */
	/*  
		注意保暖
		多喝热水
		多行注释
	*/

css选择器

css的工作氛围两步: 1.找到元素 2.添加样式
选择器就是用来找元素的一种方式. 可以通过选择器找到对应的标签

1.标签选择器 : 选中一个标签(网页里的所有该标签) 主要是用来清除/设置默认样式
	标签名{
		属性:值;
		属性:值;
	}
	p{
		color:#096;
		font-size:20px;
	}

2.id选择器: 给标签设置id名,通过#id名的方式找到该标签. id相当于身份证,唯一的.不要给标签设置重复id
	#id名{
		属性:值;
		属性:值;
	}
	<标签名 id="x">
	#x{
        属性:值;
		属性:值;
    }

3.class选择器(类): 给标签设置类名,通过.class名的方式找到标签
	class为类型,可以有多个. id只能有一个
	<标签名 class='xx'>

	.class名{
		属性:值;
		属性:值;
	}

	.xx{
		属性:值;
		属性:值;
	}

	可以给标签设置多个class.属性会同时生效
		<标签名 class='类名1 类名2'>
		<标签名 class='money fs70'>

4.通配符选择器(*): 通配符选择器用*号来表示.选中网页里的所有元素 (正式开发一般不会)
	*{
		属性:值;
		属性:值;
	}

	*{
		color: #6cf;
	}

相对来说class选择器是用的最多.
标签选择器一般是用来清除样式/设置默认样式
	有个网站,想取消a标签的下划线 , 所有正文内容都为20px. 这种情况才用标签选择器. 
	如果是要添加特有样式,用id/class

css样式的三种写法

1.内部样式表 -- 把css代码写在style标签中,style写在head里
	<style>
		css代码
	</style>

2.外部样式表 -- 把css代码写在专门的css文件里,使用时,通过link标签导入,方便重复使用
	写好css文件后,在head里用link标签读取样式
	<link rel='stylesheet' href='css文件地址'>

3.行内样式表 -- 通过标签属性style. 直接把样式写在标签里
	<标签名 style='属性:值; 属性:值;'>

样式表的优先级是基于就近原则:  行内样式 > 内部样式/外部样式 (谁离标签近,就听谁的)

样式表总结:
	1.行内样式表:
		优点: 权重很高,写起来很方便
		缺点: 不够灵活
		频率: 较少
		范围: 单个标签
	2.内部样式表:
		优点: 写起来方便 / 只写一个页面很灵活
		缺点: 不可复用
		频率: 较高(学习阶段)
		范围: 单个页面
	3.外部样式表:
		优点: 可以反复使用
		缺点: 需要导入
		频率: 最高(在开发中)
		范围: 整个网站
学习阶段,掌握内部样式表即可.

div盒子标签(division)

div主要是用来布局使用. 它本身没有含义/属性/样式. 很单纯,可塑性强
适合作为容器使用. 因此管它叫盒子. 把对应内容放到盒子里,再对盒子进行布局
	div本身没有属性 / 宽高 /颜色这些样式
width: 宽度
height: 高度

<div>内容</div>

快捷键:
	快速生成一个id为xx的盒子   #id名   #box
	快速生成一个class为xx的盒子 .class名   .box

文本样式(font)

span标签是文本标签.它因为没有样式/属性. 很单纯,适合用来加文本样式
1.color: 设置字体颜色,有三种设置方式 (1.颜色单词pink red blue 2.用十六进制数据 #096原谅绿 #6cf蓝色  3.用rgb设置颜色 red green blue.范围0-255之间)
	颜色网站 -- https://www.sioe.cn/yingyong/yanse-rgb-16/
	color: blue;
	color: #096;
	color: rgb(123,77,66);
2.font-size: 字体大小  (px像素  em字符大小)
	font-size:70px;
	font-size:2em;    网页默认一个字14px. 2em,就是28
3.font-family: 字体
	font-family: '宋体';
4.font-weight: 字体粗细  范围100-900
	font-weight: 900;
5.font-style: 字体样式
	font-style: italic;   // 倾斜
6.text-indent: 字符缩进
	text-indent: 2em;
7.text-align: 内容对齐 left左 center中 right右
	text-align: center;
8.text-decoration : 文字样式 下划线,删除下
	text-decoration : none;  清除样式
	text-decoration : underline;  下划线
9.line-height: 行高,用于调整文字上下位置
	line-height:70px;

背景样式(background)

1.background-color : 背景颜色
	background-color: #096;   # 颜色设置方式和color一样
2.background-image : 背景图片
	background-image : url(图片路径);
3.background-position : 背景位置
	background-position: center;
							0 0; 从左上角开始
4.background-size: 背景大小
	background-size : cover;
5.background-repeat: 背景重复
	background-repeat : no-repeat;

tips:

1.写样式时,要做到高内聚,低耦合.尽量不要把一堆样式都写在一个选择器里
2.样式不要死记硬背,要用的时候查笔记,百度即可 -- 多敲多练就熟练了
3.颜色除了有rgb外,还有rgba.  a表示透明度
4.写选择器时,注意顺序规范:  通配符 > 标签 > id > class
5.标签选择器一般不是用来加特定样式的,而是清空/设置默认样式
6.css属性记得加分号
7.学习阶段熟练内部样式即可
8.取名要见名知意,不要乱取

拓展

直播的两小时不是最重要的.影响学习效果的是下课后持续投入的时间
	看笔记/看录播/写案例/做思考 -- 不要想着一节课下来就能学明白
	下课之后,先看笔记,做思考. 哪里不清楚再翻看录播加强理解

bug在it圈子里,指的是报错. 但它的原意其实是 <小虫子>
早期电脑和现在电脑长得完全不一样,第一台电脑叫埃尼亚克
当时的电脑都是通过晶体管实现相关运算/计算. 有电/1  没电/0  二进制

二进制.只用0和1就能表示好几种情况

上学,好朋友. 放学了,来我家打游戏.  暗号 01表示
00  家里没人,可以来
01  家里有人,别来
11  家里白天有人,你吃完晚饭过来玩
10  家里晚上有人, 玩到6点你就走
110 我不确定,等我下课告诉
111 今天我家不行,去你家吧

练习:

写3个p标签内容分别为: 老师 / 多喝热水 / #096
用三种css样式写法(行内,内部,外部).给p标签分别添加样式(自行发挥)

完成图片<css练习>效果