3、CSS基本介绍

1.1 CSS基本介绍
一、web 标准
所谓的web标准指的就是一系列规范网页书写的要求，它是由W3C组织制定，在它里面要求网页的结构、样式、行为三者相分离。
二、名词解释
1.结构：就是通过HTML标签搭建的网页的结构。
2.样式：就是通过CSS对当前的网页结构进行修饰和美化
3.行为：通过Js让网页可以理解用户的一些操作。从而用户与网页之间产生交互。

1.2 CSS基本使用
一、定义
Css在国内被称之为级联样式表、层叠样式表、样式表，它的作用就是修饰当前网页中的HTML元素。
二、基本使用步骤
1.CSS与HTML可以看做是二门互相独立的语言，此时如果想用CSS来操作HTML那么就需要先将二者建立关系。
2.此时在HTML当中就准备了一个叫style的标签（它是一个双标签）.在这个标签对之间就可以用来书写我们的CSS代码。常见的存放位置可以是head 标签里title标签下。
3.通过CSS的选择器找到我们想要操作的元素然给它设置样式（写在style标签之中）

1.3 体验CSS
1.常见的CSS元素属性：width定义元素宽度单位是px，height定义高度，background-color 设置背景颜色。
2.CSS代码书写的固定语法：

选择器{CSS代码}

3.建议大家在开发阶段将CSS样式分行写，且每行的结尾用；结束。

1.4 CSS选择器
一、定义
所谓的CSS选择器就是CSS中已经定义好的用来选中某些元素的固定语法。它的作用
就是选中我们想要设置样式的元素。
二、CS5选择器的分类
在CSS中有很多种选择器。我们人为的分成二大类：简单选择器+复合选择器。
三、简单选择器：
1.标签名选择器：通过具体的HTML标签名称来选择元素。【会将当前网页中所有叫该名字的标签都选中】
2.类名选择器：通过标签类名来选择元素
3.id 选择器：通过id名称选择元素。

1.5 类名选择器

一、为什么需要类名选择器
一个完整的网页需要很多标签组合在一起进行编写实现，因为HTML标签的种类有限，所以同名的一个标签有可以会在一个网页中出现多次。此时如果想对这些同名的标签分别设置不相同的样式。那么直接使用标签名选择器就没有办法实现。这种情况下我们就可以使用类名选择器。
二、类名选择器的基本使用步骤
1.定义HTML网页结构.然后在我们想选中的元素身上设置class 属性。
2.将我们想要一起选中的元素们身上设置相同的class 属性值（类名）
3.此时我们只需要在style标签中按着固定的语法来调用我们的类名：类名

1.6  ld 选择器
一、为什么需要id选择器
如果我们只想从一堆元素当中选中其中的某一个元素，那么就可以使用id选择器。这个id就和人的身份证号是一样的。
二、Id 选择器使用
1.在我们想要选中的元素身上设置一个id属性。
2.给这个id属性设置一个值，我称为d名。
3.在style当中通过固定的语法来进行调用：#id名
4.注：要求在一个网页当中不能出现同名的id值【虽然有效果但也不能这么做】

1.7 简单选择器总结
1.标签名选择器和类名选择器默认可以一次性选中多个元素，id名选择器一次只能选中一个元素。
2.一个标签的身上可以既具有类名又具有id名，且这二个属性值是可以相同的。
3.允许一个标签的身上同时设置多个类名，要求多个类名之间用空格隔开。
4.关于id选择器要求一个页面当中同一个id名称只能出现一次。

1.8 id名与类名命名规则
1.名称不能是纯数字或者以数字开头（但是我们经常会以数字结尾）
2.名称不能使用中文
3.名称包含特殊字符（- _）
4.起名字时要做到见名知意

1.9 元素展示类型
在HTML当中本身定义了很多的元素，这些元素默认在网页上展示的时候会存在自已默认的状态，例如有些元素默认情况下宽高属性不起作用，有些元素默认情况下都独占一行显示。这种现象我们就称之为元素展示类型，为了记忆我们人为的将元素展示类型分为三种：块元素、行内元素、行内块元素。
1.块元素：当同时存在多个块元素的时候，每个块元素都会独占一行显示，且默认情况下它的宽高属性可以起作用。
2.行内元素：当同时存在多个行内元素的时候，这些元素都会显示在一行，如果一行放不下自动折行。默认情况下它的宽高属性不起作用
3.行内块元素：当同时存多个行内块元素的时候，这些元素会显示在一行，默认情况下它的宽高属性起作用。
4.注：不需要去死记哪些元素是行内，哪些是块，哪些是行内块。

1.10 布局标签补充
1.div标签，它是HTML当中定义好的一个双标签（div+css)。我们人为的认为它是一个体积最大的标签。
2.span标签，它也是一个双标签，主要用来放文字，我们人为的认为这体积很小。
3.段落标签里不能包裹标题.因为浏览器不能正常解析。

1.11 元素展示类型转换
在我们进行网页布局过程中往往会遇到一些特殊的模块”，对于这种模块来说我们之前的一些常见标签在使用的时候就会显示“语义”有些不对应.所以我们可以使用相应的标签进行强制的类型转换，从而让它可以展示成设计稿上的样子。在CSS当中有一个display属性，可以设置不同的值来完成元素类型的转换。
1.转成块元素：display:block；
2.转成行内块：display.inline-block;
3.转成行内元素：display:inline；

4.不显示任何效果：display:none ;

1.12 简单选择器权重
权重：我们就可以理解为是不同类型的CSS选择器在对同一个元素进行样式设置的时候.出现的控制能力不同的现象。
对于简单选择器来说：id选择器》类名选择器》标签名选择器

1.13 CSS特性
1.在权重相同的情况下，同一个元素后写的CSS样式会覆盖先写的CSS样式。【覆盖性】
2.CSS的定义存在继承的特点，子元素会继承父元素的一些样式【继素性】
（1)不是所有的CSS属性都可以被继承。
（2）不是所有类型的元素都会去继承祖先元素的样式（继承一般发生在块元素的身上）
（3）继承指的就是子元素可以使用祖先元素的一些样式
3.不同选择器对同一个元素的CSS控制能力存在着强弱。【优先级】

1.14 复合选择器
一、为什么需要复合选择器
在实际的网而制做过程中往往会出现很多结构层级嵌套很深的现象，而这种结构模块又很多，大家使用的标签名称又一样。所以此时我们就可以通过复合选择器，将这些简单选择器进行组合。从而让我们选择元素变得简单。
二、常见的复合选择器：
1.后代选择器：这种选择器就是以某一个元素为起点，将它做为祖先然后不停的向下进行穿透查找.去选择它下面的后代元素。

起点元素  后代元素……{ 设置样式 }

注：
01.后代选择器当中的每个部分都可以采用任意的简单选择器代替。
02.不同的部分之间要用空格隔开。
03. ....就表示以不停的向下层查找。

1.15 选择器权重总结

1.简单选择器：id名》class名》element名
2.复合选择器：需要在大家明白的就是复合选择器由多个其它类型选择器组合而成，为了方便比较，我们人为的给每个简单选择器都定义了一个数值，分别是：ld(100) class(10) element(1) ,这三个数值我们也称之为权重值，有了它们之后只需要将当前选择器中出现的权重值进行相加求和，最终的结果就是该选择器的权重。数值越大的权重越大
3.切记权重比的就是不同选择器对同一个元素的控制力比较（区别继承的影响）

1.16 CSS文件存放位置
CSS代码可以被我们放在很多的地方，习惯性的有三种写法：内嵌CSS、外链CSS、行内CSS。
1.内嵌CSS指的就是将CSS代码写在html网页中。
2.外链CSS指的就是就将CSS代码写在外部的独立CSS文件中。
3.行内CSS指的就是将CSS代码写在具体的HTML标签身上。
注：
01.依据浏览器渲染页面原理，我们选将CSS代码写在HTML文件靠前的位置。
02.使用外链CSS写法的时候，外部独立的CSS文件当中不需要写style标签，同时还需通过link标签将某个CSS文件引入到具体的HTML文件当中。【rel属性对不要省略】

<link href=”目录CSS文件路径" type="text/sss" rel="stylesheet"/>

03.对于上述的三种CSS文件存放位置来说，行内CSS的权重是最高，但是外链与内嵌并不存在谁一定大于谁的现象（权重）.它的控制能力完全取决于各自所使用的选择器权重。
04.如果想要直接将某一个样式的权提至最高，我们只需要在该句CSS代码的最后设

P{ color:pinkl important ;}

<audio autoplay controls loop>
降级的说明性文字
<source src=”格式1路径"/>
........
</audio>I

注：
01.audio是一个双标签，用来定义一个声音资源模块。
02.autoplay用来设置自动播放。
03.controls 调用当前设备的播放控制。
04.loop设置当前音频循环播放。
05.默认audio里的文字不显示，只有在当前浏览器不支持这个标签的时候会显示文字。

1.17 常见的文字样式
1.行高：line-height，当我们将行高的大小设置成当前元素的高度时.可以实现单行文本在当前元素中垂直方向居中显示的效果。
2.水平对齐方式：text-align:left  center right.分别表示设置文字在当前盒子当中水平的对齐。
3.字体大小：font-size，单位是px，一般情况下浏览器都会有一个最小的显示字体。
4.字体粗细：font-weight，可以设置关键字，或者数值（100-900）.关键字有normal表示正常，还有bold表示加粗。
5.字体名称：font-family.一般常用的就是“微软雅黑”黑体
6.字体颜色：color.可以设置颜色单词，还可以是十六进制的

1.18 文字阴影
一、字体样缩写

font：文字粗细大小/行高字体名称；
font:bold 20px/200px微软雅黑；

二、CSS3中的文字阴影

text-shadow:x y r color;
text-shadow:0px 0px 0px red;

注：
01.x表示阴影在水平方向的偏移量，可以设置负值，正负不表示大小，只表示方向。水平向右为正，向左为负。单位是px
02.y表示阴影在垂直方向的偏移量，垂直向上为负，向下为正
03.r表示阴影的模糊程度，数值越大阴影越模糊，单位px
04.color表示阴影的颜色
05.CSS3允许一段文字有多层阴影，多层之间用逗号隔开，每一层内.不同参数之间用空格隔开。|

1.19 过渡属性
过渡属性的作用就是在元素的默认样式与最终样式变化之间产生一个过程。在C3中新增了一个属性叫 transition

transition:all 1s linear 0s;

注：
01.第一个参数的作用是设置元素身上的哪些属性产生过渡，一般用all 表示所有的属性都过渡。
02.第二个参数的作用设置过渡需要时长，单位是s不要省略
03.第三个参数的作用设置过渡的动画形式，linear表示匀速
04.第四个参数设置当前过渡等待多久之后才会执行（延时）。即使为0，单位也不能省。
05.:hover选择某个元素被鼠标移上时的状态。
06.transition这个属性既可以添加在元素默认状态，也可以添加在鼠标移上状态，区别就是第二种做法在鼠标离开的时候不会在有过渡变化。|