一、今日学习内容1.CSS概念：层叠样式表（Cascading Style Sheet）的简称，CSS也是一种标记语言，可以给HTML书写出来的网页设置不同的样式
2.语法规范
eg：h1 {color:red; font-size:14px;}
h1是选择器；color是属性；red是属性值
注意1、选择器是用于指定CSS样式的HTML标签，{}里面是对该选择器设置的具体样式
2、属性和属性值是以“键值对”的形式出现
3、属性是一种特定的样式属性，例如：字体颜色，字体大小等等
4、属性和属性值之间要用英文的“:”隔开
5、多个“键值对”之间要用英文的";"来隔开
6、在<head>标签中的<style>标签中
3.CSS基础选择器
3.1标签选择器（元素选择器）
概念：用HTML标签名作为选择器，对页面中所有的符合条件的一类标签来指定统一的CSS样式。
语法：eg：
div {
color：blue；
}
优点：能快速设置页面中的一类标签的样式
缺点：不能差异化设置样式
3.2类选择器
概念：差异化选择不同的标签，可以使用类选择器
语法：eg：
.red {
color:red;
}
<div class="red">哈哈哈哈</div>
注意：1.类选择器用英文“.”进行定义，后面跟类
2.长类名一般可以用横线来进行链接
3.不要使用纯数字、中文等命名，要使用英文来命名
4.类命名要有意义，尽量让别人知道类名的目的
多类名使用
1、在标签class属性中写多个类名可以进行多类名调用
2、多个类名之间要用空格隔开
3、调用完后就会显示所有被调用类名所声明的样式
3.3ID选择器
概念：id是唯一标识，所以id选择器主要是为了唯一的id的HTML元素来指定特定的样式,用#定义，id调用
ID选择器和类选择器之间的区别
1、类选择器可设置多个名字，同一个名字可被多标签使用
2、id选择器相当于身份证号码，全国唯一，不得重复
3、id选择器在一个网页中只能使用一次，类选择器可以使用多次
4、类选择器在修改样式中使用的频率最高，id选择器一般用于页面的唯一性的元素上，经常搭配JS来使用
3.4通配符选择器
概念：在CSS中，通配符选择器用“*”来定义，它表示选择页面中的所有元素。
注意：通配符选择器不需要进行调用，可以直接给所有的元素设置样式
4.CSS的字体属性
4.1font-family（字体外观）
常用：font-family：“Microsoft Yahei”（微软雅黑），Arial（宋体），Helvetica（西文字体），sans-serif（黑体）；
注意：1.各个字体之间用英文逗号隔开；
2.一般情况使用默认字体，保证在任何用户浏览器上可以正常显示
3.如果字体的名字有空格，用“ ”将名字引起来
表现字体外观的方法
1.font-family：‘宋体’；
2.font-family：英文；
3.font-family：Unicode字体；
4.2font-size（字体大小）
1、一般设置字体的时候采用的单位是px（像素值）
2、谷歌浏览器的默认字体大小是16px
3、可以给body标签中指定文字大小样式，来改变整个页面的文字大小
4、不同的浏览器可能默认显示的字体大小不一样，我们尽量设置一个明确的字体大小，不要使用默认大小
4.3font-style（字体样式）
常用属性值：
normal 默认值
italic 斜体
4.4font-weight（字体粗细）
常用数值：
400代表正常的字体粗细
700代表加粗的字体粗细
注意数值后面不要px单位
4.5line-height（行高）
line-height：40px/2（40px的2倍）
具体的像素值设置和倍数设置都可以
4.6字体复合属性（对字体属性样式综合书写）
注意：
1.使用font属性时，必须按照严格的语法格式中属性值的顺序来进行书写，不可以随便更换顺序，各个属性要用空格隔开
2.可以省略的值：font-style 和 font-weight 不可省略的值：font-size 和 font-family
5.CSS文字属性
5.1文字颜色
color：英文单词；
color：#16进制码；
color：RGB（ ， ， ）；
5.2文字对齐
text-align：center/right/left
5.3文本装饰
text-decoration：none；（无文本装饰）
text-decoration：underline；（下划线）/overline（上划线）;
text-decoration：line-through（删除线）
5.4文字缩进
text-indent：___ px（像素值，不够灵活）/___ em（文本缩进单位）
6.CSS三种引入方式
6.1行内样式表（行内式）:实现元素标签内部的style属性中来设置CSS样式 ，适合于简单的样式修改
注意：
1、行内样式书写的时候要符合css的书写规范
2、样式要写在style属性中，要用双引号来引起来
3、书写繁琐，没有实现结构样式分离的思想
6.2内部样式表（嵌入式）:写到html页面内部的，将所有的CSS代码都写到style标签中
注意：
1、内部样式表也没实现结构和样式分离
2、练习的时候可以使用这种形式
6.3外部样式表（链接式）:外部样式表是我们实际开发中最常用的方式，首先创建一个css文件中，放入我们所需要的样式，然后再html文件中引入样式文件即可
步骤：
1、创建后缀名为.css的样式文件
2、在HTML文件中，使用<link>标签来进行引入
link属性
1.rel：定义当前文档与被链接文档的关系，这里直接写成stylesheet即可，表示被链接的文档是一个样式表文件
2.href：定义引入文件的路径
整合多个外部样式表集中导入：
1.建立每个样式表
2.将所有样式表集中在一个CSS文件中，输入@import URL（）导入到html文件中
7.Emment语法
7.1直接输入标签名按tab键可以直接补全标签
7.2可以一次性生成多个标签 div*5可以直接生成5个div标签
7.3生成父子级标签 div>p
7.4生成兄弟级的标签 div+p
7.5生成带id属性的标签 #one 来生成如下结果
7.6生成带类名的标签 .red生成如下标签
7.7可以用$来实现自增 p.demo$*5可以实现如下结果
7.8可以使用{}来给标签内写内容 div{我是个超级好的人，是不是呢？是}*5 实现如下结果
7.9快速生成css代码 tac 生成如下代码
二、今日问题
今日没有遇到问题，老师讲解细致到位，优秀！
三、解决方案
今日没有遇到问题，老师讲解很细致到位，优秀！
|
