【CSS简介】
《css简介》
css指的是层叠样式表(cascading style sheets)，作用是负责网页的样式外观；
【体验css】
简介：我们学习css，主要分为两大部分：一部分是css属性（核心），一部分是css选择器
《css语法》
1、书写css需要准备一个环境，就是一对style标签，需要放到head内部；
2、css样式条的语法结构：选择器{属性：值}
选择器指的是选择标签的不同方式；
css属性重新定义键值对的基本格式：k:v；多个属性用分号隔开：例如：color:red;width:300px
《css文字控制三属性》
color --- 控制文字颜色；
font-size --- 控制文字的字号；单位px
font-family --- 控制文字的字体；
text-align --- 文字内容的水平对齐方式
注意事项：style标签有一个配合使用的标签属性：type="text/css"作用是保证浏览器的兼容性；
【盒子特性】
《盒子标签》
div --- 大盒子，它是一个可以存放任何内容的标签，就是一个容器，没有语义；经常用来给网页布局分区；
span --- 小盒子，也是一个容器，一般用来存放文字或者小图片；相对于div来说语义较轻；
《实体化标签》
实体化指的就是画盒子，给出一个标签的范围尺寸；
实体化三属性：
width --- 宽度；
height --- 高度；
background --- 背景
《盒子显示模式》
任何标签都会有良好总特点：一种是独占一行，可以认为指定宽高；另一种是多个排列在一起，不能认为指定宽高；
这两种特点专业的称之为盒子的显示模式（display）
所有的标签按照显示模式可以分为两类：
1.块级标签，典型代表：div ；特点独占一行，直接指定尺寸；不指定尺寸就充满父级标签宽度
1>.块级标签总结：
div,p,h,ol,ul,li
dl>dt+dd
table>tr>td
2.行内标签，典型代表：span；特点：多个排列在一起，不能直接指定尺寸；默认尺寸和内容一样
1>.行内标签
span,img,strong,input,a,textarea
为什么标签会有这两种特点，主要是所有的标签都默认带有一个display属性值：
块级标签：display:block;
行内标签：display:inline;
CSS中有一种显示模式具有块级和行内标签的特点：行内块标签，inline-block
行内块标签可以指定宽高而且可以多个排列在一起；如果不指定宽高，尺寸就是内容的尺寸
《知识点》
在实体化标签的过程中，如果一个标签没有实体化成功就是显示模式没有转换；
一般情况都是在块级和行内之间进行切换，很少用到行内块；
《CSS内外边距》
内边距：padding
外边距：margin
【边框属性】
《边框属性基础》
border: 线条宽度 | 线条类型 | 线条颜色 （属于外描边）
线条类型常用的有三种：sold：实线；dashed：虚线；dotted：点线
一个标签的边框由四部分组成，也可以单独设置某一个方向的值
例如：border-top、border-right、border-left、border-bottom。
【CSS的bui属性】
简介：在css中，css属性可以分为两大部分：一部分是文字控制属性；另外一部分是区块控制属性，例如：宽度、高度，间距等
《bui属性》
font-weight : bold(加粗效果) | normal(普通字体不加粗)
text-decoration : undeline(下划线) | line-through(管穿线 删除线) | overline(上划线) | none(无划线)
font-style : italic(斜体)
【选择器】
《类和id选择器》
简介：在css中，可以给标签两种名称：一种是类，一种是id
注意事项
1、类选择器：通过class属性命名；特点：可以重复使用，一个类名可以应用给多个标签；
2、id选择器：通过id属性命名；特点：唯一，同一个id名称只能应用给一个标签；
3、在css中，选择器命名不能以数字开头；
书写关系：
类选择器通过点语法：例如：.box{}
id选择器通过#书写：例如： #box{}
《通配符选择器》
简介：通配符选择器通过*（星号）表示，作用是将整个网页body中的标签（包括body本身）选中；
通配符选择器经常用来清空标签的默认间距；在html中很多标签都默认带有内外边距，但是在网页制作中，这些边距我们是不需要的，所以需要进行清空，方法就是通过通配符选择器选中；
清空的时候需要清空三个属性；padding，margin，border，都设置0即可；
通配符清除默认内外边距
《基础选择器的权重》
权重指的就是一个标签有多个选择器样式的时候谁生效；
基础选择器的权重：针对性越强权重越高！
id选择器 > 类选择器 > 标签选择器 > 通配符
【CSS的居中对齐】
简介：在css中，有文字内容的居中对齐，还有标签的居中对齐，其中标签的对齐方式价值更高;
实现一个标签的水平居中方式是：设置它的左右外边距都为auto即可 margin: 0 auto；
如果设置左边距为auto可实现盒子右对齐；
《内外边距的简写方式》
在css中，内外边距有1-4个值的简写方式：
一个值：表示 上右下左 都是一样的
两个值：表示 上下 和 左右 两个对应的值
三个值：表示 上 左右 下 三个对应的值
四个值：表示 上 右 下 左 四个对应的值
margin:10px 20px 30px 40px 。表示：上10px 右20px 下30px 左40px
margin:10px 20px 30px 。表示：上10px 左右20px 下30px
【背景属性】
简介：在css中，背景通过background控制，它也是一个复合属性；
《基本结构》
background: 背景颜色 | 背景图 | 平铺方式 | 水平位置 | 垂直位置 | 固定模式
background: pink(颜色) | url(图片) | no-repeat (平铺方式) | right(left、center、right) | bottom(top、center、bottom) | fixed(悬浮固定在左上角)
平铺方式：no-repeat不平铺；repeat-x横向平铺；repeat-y纵向平铺；
背景图定位坐标的书写方式；
1、方向特殊值：水平位置：left center right；垂直位置：top center bottom；
2、具体像素值：例如 100px 200px ；可以接受负值；
如果背景图固定模式设置为fixed，可实现背景图固定在屏幕
注意事项：应用背景图的标签左上角是坐标原点(0 0)
《知识点》
background-color --- 背景颜色
background-image --- 背景图片
background-repeat --- 背景平铺方式
background-position --- 背景定位
【复合选择器】
简介：在css中，常用的复合选择器有：后代选择器，并集选择器，交集选择器
《后代选择器》
通过一个空格表示后代关系，通过父级标签找到它的后代标签；
例如：.box span{} 表示选中 .box 里面的 span 标签
《并集选择器》
多个选择器用逗号隔开表示共同选中，作用是一起选中书写样式；
例如h1,div,.box span {}
《交集选择器(指定式)》
通过不同选择器连续书写，通过制定选择；作用是选中制定标签；
例如：p.box{} 表示带有box类名的那个p标签
【行高属性】
简介：从一行文本的中心基线向上和向下同时延伸组成的这个距离就是行高；也就是我们通常说说的行间距；
行高应用：如果想要实现一行文本在一个盒子里垂直居中，设置它的行高等于盒子的高度即可；
【网页布局】
简介：任何复杂的网页都是由标签堆砌而成；网页布局是什么？网页布局其实是指标签的不同排列方式；这些排列方式看起来复杂，其实只有两种：上下垂直排列和左右水平排列；而且水平排列是在垂直排列的基础上进行拆分排列
《浮动属性》
float表示浮动属性：它的值：left、right；（没有center）作用是实现盒子的水平排列，要么是左对齐要么是右对齐;
注意事项：
网页不居中，最稳定的排列方式就是块级标签上下垂直排列；
在网页布局中为了保证结构的稳定，同级标签中只能有一种排列方式，要么是上下垂直排列，要么就是左右水平排列
【超链接伪类】
简介:伪类是一种状态，并不是默认的样式，而是触发后的一种样式;
a:link表示超链接默认样式;
a:visited超链接访问过之后的样式;
a:hover鼠标移上的样式;
a:active鼠标选中(点击)的样式;
注意事项:实际项目中只写a和a:hover的样式
《清空列表样式属性》
list-style:none 作用是清空列表样式
【css网页制作的准备工作】
1、清空默认样式；
2、设置正文的默认样式；
3、设置超链接的默认样式；
《左右布局的制作步骤》
1、实体化标签
2、设置浮动水平对齐：一左一右、或者左对齐、右对齐
3、最后一步是定位，设置盒子的位置；
【css的继承性和层叠性】
《继承性》
继承性指的是给父级标签写的属性后代标签也可以生效；
哪些属性可以继承？
css属性可以分为两大类：文字控制属性和区块控制属性；
文字控制属性都是控制文字内容的，因此文字控制属性是可以继承的；
而区块控制属性只是控制标签本身，所以区块控制属性不会继承
注意事项：
超链接的颜色是需要单独针对修改的；不能继承
《层叠性》
css的层叠性是指：红藕写的属性会把前面写的属性覆盖掉；
css层叠性可以给后面维护工作提高很大便利性
【文本缩进和字词间距】
text-indent --- 文本缩进，一般写2em表示缩进两个文本大小，
letter-spacing --- 字间距；
word-spacing --- 词间距，只有在有空格的地方会生效
【复合选择器的权重】
简介：复合选择器是由基础选择器组成的一类复杂选择，由于网站结构复杂因此会产生复合选择器的权重问题；
注意事项：css的层叠性跟权重无关！层叠性只有在权重相同的时候才会发生，而权重不一样的情况下就是谁的权重高谁生效；
《权重的计算方式》
第一种：通过浏览器右键检查/查看原生，最上面的样式条，权重最高；
第二种：
一种重量比喻：
一个标签选择器 --- 1克
一个类选择器 --- 1斤
一个id选择器 --- 1吨
【溢出隐藏属性】
简介：溢出隐藏属性经常用来调试错误以及处理尺寸有误的时候；
over-flow:hidden 将超出范围的内容隐藏掉
over-flow:auto 在超出范围内的区域添加滚动条
注意事项：溢出隐藏效果只有在指定了尺寸才会生效；
【外边距塌陷】
简介：外边距存在着一个情况叫外边距塌陷，她是当两个盒子间的垂直外边距紧挨在一起的情况下发生，发生的时候外边距并不是相加，而是发生合并，以最大的外边距计算，这个是浏览器的一个bug；
《解决方法》
1、两个同级盒子发生塌陷，这种情况不会造成影响，不用解决，也解决不了
2、嵌套关系的盒子，在一个盒子内部，内部的盒子有margin-top,会将父级盒子直接带下去，发生外边距塌陷，解决方法就是给父级盒子添加over-flow:hidden（内部的盒子浮动也可以解决）
【自定义列表样式】
自定义列表样式的制作步骤；
1、清空列表样式
2、将列表样式图标设置li的背景，定位方式设置left center
3、通过padding-left挤出列表样式的占位尺寸；
注意事项：如果希望列表样式带有超链接，只需要将图标设置给a标签即可
《img插入图片和背景图片的区别》
背景图片只是装饰作用，因此是相当于不存在；而img是存在的内容；
两者的优缺点：
背景图片：只是修饰作用，控制更方便，有定位；所以小图片一般都是用背景图片
img图片：具有语义，可以被搜索引擎抓取，因此重要的图片建议用img插入图片
【盒子模型】
什么是盒子模型？
在css中，盒子模型指的是一个标签的占位尺寸由4部分组成：content内容、padding内边距、border边框、margin外边距，这4个部分组成了css的盒子模型；
在盒子模型中，无论是margin还是padding都会增加盒子的占位尺寸，区别在于，padding会增加盒子实体化尺寸，而margin不会影响；所以说padding也可以认为是实体化的一部分；
注意事项：
在网页制作中，给一个固定尺寸的盒子添加padding（相当于挖了一个坑），会增加这个盒子的尺寸，在原有的基础上减去padding的尺寸可以保证固定的尺寸不变
【网页布局方式】
简介：网页布局中主要的方式有：标准流、浮动流、定位流。流派指的是一种排列方式。
《标准流》
简介：标准里是W3C推出的一个用于网页布局中非常重要的概念，也称之为文档流；
标准流指的是块级标签上下垂直排列，行内标签左右水平排列的排列方式；
总结：标准流是网页布局中最稳定的一种排列方式；
《浮动流》
浮动流是脱离标准流的一种排列方式；
浮动流的排列方式是水平排列，要么左对齐要么是右对齐
注意事项：浮动流的这种脱离方式并不是完全脱离，是一种半脱离标准流，也就是说浮动流这种脱离方式会影响到标准流中的数据或内容；
清除浮动：
chear:both;给受影响的标签添加，作用是：清除标签受到浮动的影响；
《定位流》
简介：在网页制作中，定位方式有三种：相对定位、绝对定位、固定定位；定位流也是一种脱离标准流的方式，它是一种完全的脱离，所以定位流不会影响到标准流；
注意事项：定位流是设置了定位属性之后，可以通过坐标属性重新设置它的位置的一种排列
相对定位：
相对定位是一种相对标签原有的坐标进行定位，它是一种占位脱离，特点是保留原标签的位置；
相对定位属性：position: relative
坐标属性：left:0;top:0;right:0;bottom:0
绝对定位：
绝对定位是相对于窗口进行定位：它是一种完全脱离，不会保留原有位置；
绝对定位的属性：position: absolute
绝对定位的使用原则：子绝父相，子级标签绝对定位，父级标签相对定位，这种设置方式可以让子级标签相对于父级标签进行定位
固定定位：
固定定位属性：position:fixed;作用是将选中的标签固定于屏幕；
注意事项：
1、如果一个元素脱离了标准流，它的显示模式会自动转换为行内块：(除了相对定位)
2、脱离了标准流的元素，它就相当于删除了一样，不会占位；（除了相对定位）
3、同级标签中，标准流跟浮动流只能用其中一种，不能混用；
4、在网页布局中，优先考虑标准流，然后浮动流，最后是定位流；
《居中定位方式》
如何实现一个盒子在整个窗口中水平以及垂直居中：
设置盒子定位：坐标属性left和top都设置为50%，通过margin负值让盒子往左边和上边走盒子自身宽度和高度的一半即可；
居中定位方式.png
《图层顺序调整属性》
简介：进入了定位流的标签，它们会有图层先后顺序，这个顺序可以通过一个属性：z-index来调整;
注意事项：z-index属性的值是一个纯数字，表示等级，数值越大越靠上
【快速输入代码插件】
简介：这个插件的原名叫zencoding，现在改名为emmet；它是通过代码缩写+tab键快速生成代码片段的一个功能，作用是提高书写代码效率；
常用的缩写：
>表示嵌套；*表示数量；+表示同级关系；
生成类通过：. ; 生成id通过：#；生成标签属性通过：[]；
【滑动门技术】
简介：滑动门是用来制作圆角矩形；利用滑动门可以制作出根据宽度自适应的圆角矩形；
《制作步骤》
滑动门的制作要点在于将一个盒子分成三份：左中右；左右是固定尺寸存放左右圆角的盒子，中间是存放内容的盒子，重点在于这三个盒子都需要浮动；
注意事项：自适应的滑动门主要在于宽度不固定；
【css精灵】
简介：css精灵(css sprites) ，也称之为css雪碧，css图片整合技术；css精灵主要是将多张小图整合到一张大图的一个技术，作用是降低图片文件的整体尺寸，减少服务器请求次数；
背景定位属性；
background-positon: 水平 垂直；作用是设置背景图的坐标值
【行内元素的垂直间距】
行内元素的本质就是一个文字，所以它们的垂直间距是不受padding和margin的影响；行内元素的垂直间距只受行高的影响；
【浮动塌陷】
简介：因为浮动了的元素脱离了标椎流，因此在一个没有指定高度的盒子中，它内部的元素浮动之后，会导致这个父级盒子没有高度，这种情况称之为浮动塌陷；
解决方法：给塌陷的盒子添加 overflow:hidden;
注意事项：浮动塌陷是盒子没有指定高度的时候出现；
【css的书写位置】
简介：css可以写在网页中不同的位置，包括有：内嵌式、链接式、行内式；
《内嵌式》
内嵌式指的是将css的代码写在头部的style标签内部；
《链接式》
链接式指的是将css代码写在一个单独的css文件中，然后在网页头部中通过link标签将css文件引入即可使用；
link 标签的基本结构：
<link rel="stylesheet" href="style" type="text/css">
link标签三属性:
rel --- 表示与连接对象的关系；
type --- 表示链接对象的类型；
href --- 链接对象的相对路径
《行内式》
行内式指的是将css代码写在标签的style属性里面；它相当于直接在标签身上写css，因此权重最高，也是最不推荐的一种书写方式；
举例：
<div style="color: red">....</div>
网友评论