CSS

1、Web工作原理

    Html、CSS和Javascript就是主要的客户端技术，其中Html负责网页结构、CSS负责网页样式、Javascrpt负责行为。

2、CSS介绍

2.1、CSS是什么

    Html中的某些标签比如<font>标签、文本修饰标签，以及标签的某些属性也具有调整网页样式的功能，但是调整功能非常少，效果很差；特别是Html的布局只能是从左往右，从上往下，水平方向的布局就无法控制，CSS的浮动布局正是解决这个问题；而且通过Html标签调整样式也违背了Web布局中结构与样式相分离的原则。于是CSS就应用而生了，该技术能够对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精准的控制；另一个好处就是采用div+css布局的网站对于搜索引擎很是友好，其避免了Table布局中嵌套层次过多而无法被搜索引擎抓取的问题。和HTML语言一样也是由浏览器内核进行渲染，因此会加重浏览器兼容的问题。

2.2、CSS的发展历程

版本	发布时间	说明
CSS 1	1996 年12月 17 日	W3C组织发布CSS的第一个版本
CSS 2	1998年5月	与CSS1有大改动，制定了样式与结构相分离的标准
CSS 3	2001 年5月23日	继承CSS2的风格，增加了更多的CSS选择器

 

3、CSS在Html文档中如何使用

3.1、作为Html标签的style属性的值

3.2、作为Htm标签<style></style>的内部元素

 

3.3、利用Html的<link>标签链接外部.css文件

4、CSS的三种选择器(3.2和3.3会用到)定义方法

4.1、用标签名作为选择器名

4.2、用自定义类名作为选择器名

4.3、用Html的标签id定义选择器名

5、CSS的常用属性

5.1、普通属性

属性名	属性作用	补充
color	文本的颜色	有3种赋值形式，red;  #00ff00;  rgb(0,0,255);
font-size	文本的字号	有2种赋值形式，16px;  300%;
font-family	文本的字体	"Times New Roman",Georgia,Serif; "微软雅黑";
line-height	文本的行高	一行文本的高度，通常用于文本的垂直居中
letter-spacing	文本的字符间距	单位是px，可正可负
text-decoration	文本的修饰	常用于增删文本的的下/中/上划线等
font-weight	文本的文字粗细	:bold就是加粗；:normal就是正常粗细
text-indent	文本的首行缩进	一段文本的第一行，有2种赋值形式;
width	容器的宽度	有2种赋值形式，72px;  50%;
height	容器的高度	一般不给容器设高度，而是用子级撑起来
border	容器的边框	在原容器上往外部添加(3属性)，共5个。
list-style	列表项的样式	专门用于<li>标签，可以自定义列表项目标记
display	规定Html元素应该生成的框的类型	如果赋值block就是按块级标签显示； 如果赋值inline就是按内联标签显示。
background-image	指定容器的背景图	在容器内部，通过url(路径)指定一张背景图
background-repeat	背景图的重复设置	指定在容器内部的x方向重复或y方向重复
background-position	指定背景图的坐标	可以指定背景图在容器内的具体位置

5.2、边距和填充

属性名	属性作用	补充
margin	在原容器和borde r的基础上往外添加，添加的部分不属于该容器，故称“外边距”	同级别的俩容器（默认布局）如果下上都设置了边距，只有一个边界是有效的，不会叠加； 同级别的俩容器（浮动布局）如果下上右左都设置了边距，是会叠加的。
margin-top
margin-buttom
margin-left
margin-right

 

属性名	属性作用	补充
padding	在原容器的基础上往内排斥，添加的部分仍属于该容器，故称“内填充”
padding -top
padding -buttom
padding -left
padding -right

5.3、溢出

属性名	可取值	作用（当子级内容超过父级容器时该如何呈现）
overflow	atuo	由Web自动判断，超出部分会出现滚动条
	hidden	隐藏溢出部分
	visible	超过父级容器，显示溢出部分，
	scroll	无论是否溢出，都显示滚动条

5.4、布局级别

5.4.1、默认布局级

     就是在Html标签的CSS属性中不使用float属性，完全按照从上往下、从左往右的规则进行Web布局。

5.4.2、浮动布局级

    就是在Html标签的CSS属性中使用float属性，可以通过left浮动或者right浮动控制水平方向的布局。如果俩容器不在一个布局级上，就会发生遮掩的情况，这是正常的。

6、浏览器内核兼容案例及解决

6.1、为何会有兼容问题

        浏览器的兼容可以分为两个方面，一是内核兼容：内核负责解析html和css语言，

     渲染页面，如果不同浏览器使用的内核不一样，在打开同一个HTML网页时就可能出

     现页面显示不一致的问题，主要体现在CSS样式方面；二是JS引擎兼容：JS引擎负责

     解释JavaScript程序，提供交互功能，如果不同浏览器使用的JS引擎不一样，在通过

     HTML页面解释同一个Java Script程序时就可能出现交互效果不一致的问题。

6.2、内核兼容的案例及及解决方案

案例一

         某些HTML标签默认的margin和padding差异很大。解决方案：在CSS中设置*{margin:0;padding:0; }先清除标签的默认内填充和外边距，然后在单独设置。

案例二

    在通过容器高度和文本字号实现文本垂直居中的效果时，会因为同一字号在不同内核浏览器下的大小不一样，导致不能在所有的浏览器中都能垂直居中。解决方案：通过需要设定line-height实现垂直居中，而不是通过容器高度和文本字号

案例三

   当父级容器的子级容器是浮动级别时，子级容器和父级容器就不在一个布局级别中，而基本都是不给父级容器设高度仅给子级容器设高度的。这种情况下，有些浏览器里子级能撑起父级容器的宽度正常显示父级内容，而有些浏览器中子级无法无法撑起父级的高度不显示父级内容。解决方案：给父级容器的CSS样式设置overflow: hidden; 属性。

  ...................