Css及Css3

参考网址：

http://www.runoob.com/css

1 CSS概述及发展历程

CSS(Cascading Style Sheet) 层叠样式表:控制布局和显示效果。

布局选择CSS

div css 内容和显示分离 与其他标签元素兼容性好 尺寸小速度快 更有利于响应式布局

ul li css适合列表项目 菜单项目的布局

摒弃table布局，table可用来展示表格数据。

CSS1.0

1997年 W3C 颁布 HTML4 标准的同时也发布了有关样式单的第一个标准 CSS1.0。主要涉及选择器、样式属性、伪类 / 对象几个大的部分。

选择器分为派生选择器、ID 选择器和类选择器几种。样式属性主要包括 Font 字体、Text 文本、Background 背景、Position 定位、Dimensions 尺寸、Layout 布局、Margins 外边距、Border 边框、Padding 内边距、List 列表、Table 表格、Scrollbar 滚动条、a 的 link、hover、active、visited 等。

"."用来匹配类属性

"#"用来匹配ID属性

body div a 等用来匹配节点对象

CSS2.0/2.1

1998年 W3C 发布了 CSS 的第二个版本，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。

2007年W3C 根据各大浏览器支持和实现情况，最终修订 CSS2 为 CSS2.1。

增加的内容：

"*"用来匹配任何标签

">"用于指定父子节点关系

空格用来匹配下级节点

" "用于表示在同级节点关系

属性值过滤，input[text="kl"] 

增强了Position功能，增加了 relative、absolute、fixed 几个值

扩充display 属性，用该属性指定元素是否会显示以及如何显示

增加了伪类 :focus、:first-child

增加了 cursor 属性

CSS3

 2001 年 5 月，W3C 着手开始准备开发 CSS 第三版规范。然后持续到2014年3月20，分模块陆续发布。

Grid布局 body{columns:3;column-gap:0.5in;} img{float:pagetopright;width:3gr;}

Flexbox(伸缩布局盒)  元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器

圆角边框，属性：border-radius

text-shadow:文字投影

text -overflow:当文字溢出时，用“…”提示。包括ellipsis、clip、ellipsis-word、inherit

RGBA colors 三色加了个不透明度 rgba（100,100,100,0.5）alpha透明度为0.5

transform: rotate | scale | skew | translate |matrix; //旋转 缩放 扭曲 移动 矩阵变形

[att^=val]:表示开始字符是val的att属性[att$=val]:表示结束字符是val的att属性

[att*=val]:表示包含至少有一个val的att属性

multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值

2 CSS三种实现方式

2.1行内样式（不推荐使用）

直接写在标签里面，使用style属性提供的样式

style属性的语法   style = "样式属性1:值1;样式属性2...;样式属性n:值n";

2.2 内嵌样式（页面内复用）

在head标签中使用style 的样式,直接作用所有标签（或所有类或Id元素）里面的样式。

<style type="text/css">

    样式名1{样式属性1:值1;样式属性2...;样式属性n:值n}

    样式名2{样式属性1:值1;样式属性2...;样式属性n:值n}

</style>

2.3 外部样式（推荐使用，复用性高）

可以将样式单独的写在一个style.css中

使用link将其链接过来

<link type = "text/css" rel = "stylesheet" href = "./style.css" />

3 CSS常用样式解析

3.1 border边框

方向：top、right、bottom、left

属性：style、color、weight

3.1.1 border

border: solid 1px #ddd;

三个值依次为：样式border-style粗细border-weight 颜色border-color。

3.1.2 border-方向

border-top: solid 1px #ddd;

border-bottom: solid 1px red;

border-left: solid 1px green;

border-right: solid 1px blue;

3.1.3 border-方向-属性

border-top-width: 1px;

border-top-style: dashed;

border-left-color: #cccccc;

3.1.4 表格细边框样式

table,tr,td

{

border-collapse:collapse;

}

3.2 margin 元素外边距

完整margin:10px 20px 30px 顺序为上、右、下、左

三个值margin:10px 20px 30px 表示上10px，右20px，下30px，左（缺）取右10px

两个值margin:10px 20px 上下外边距10px，左右外边距20px

单值 margin:10px 表示上下左右的外边距都为10px

自动居中：

margin:0 auto; 表示上下的距离值是0，而左右自动适应，自动居中。

margin:auto; 表示上下左右都自动适应

3.3 padding 元素内边距

方向规则同margin。

3.4 float

.float-left{

float:left;

}

.float-right{

float:right;

}

浮动会使元素向左或向右移动，其周围的元素也会重新排列。

浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边。

3.5 clear

.clear {

     clear: both;

}

在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;

该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

 

当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

 

在网页设计时还有一种很普遍的情况：

<style type="text/css">

#main {background-color: #3399CC;width: 600px;padding: 20px;}

#sidebar {background-color: #FF6600; float: left;width: 130px;}

#container {float: right;width: 420px;background-color: #FFFF33;}

.clear {clear: both;}

</style>

<div id="main">

<div id="sidebar">第一段内容 第一段内容 第一段内容</div>

<div id="container">第二段内容 第二段内容 第二段内容</div>

</div>

<p class="clear ">第三段内容</p>

 

火狐浏览器下这个清除没有达到效果，必须在浮动元素所在标签闭合之前及时进行“清除”。

<div id="main">

<div id="sidebar">第一段内容 第一段内容 第一段内容</div>

<div id="container">第二段内容 第二段内容 第二段内容</div>

<div class="clear"></div>

</div>

<p>第三段内容</p>

 

如果多加的<div class="clear"></div>标签引起IE和FF高度变化，通过如下方法解决：

.clear {

     clear: both;

     height:1px;

     margin-top:-1px;

     overflow:hidden;

}

3.6 文字样式

font-style 设定字体风格，比如 font-style: italic;

font-weight设定文字粗细，比如 font-weight: bold;

font-size设定文字大小，比如font-size: 12px;

line-height设定行距，比如line-height: 150%;

color设定文字颜色，比如color: red;

font-family设定字体，比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

3.7 背景图片样式

背景图片语法

background-image:url() 引入背景图片

background-repeat:no-repeat 设置背景图片是否重复平铺

background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上

简写背景图片语法：

background:url(图片地址) no-repeat left top

不重复平铺

背景图片左上角

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 }

背景图片横向居中

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat center top}

背景图片纵向居中

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat left 50%}

背景图片页面居中

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat center 50%}

 

如果需要背景图铺满容器大小，加上background-size: cover;

 background-size: cover;//100%

 -webkit-background-size: cover;

 -moz-background-size: cover;

 -o-background-size: cover;

重复平铺

全网页背景图片重复平铺

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)}

背景图片横向重复平铺

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-x}

背景图片纵向重复平铺

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-y}

3.8页面排版样式

//英文自动换行

.word-break{

    word-wrap:break-word;

    word-break:break-all;

    white-space:moz-pre-wrap;

    overflow:hidden;

}

//div 内容超出省略号

.omitted {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;  

}

//div 两行省略号  要设置width最大值

.omitted-2-line{

   text-overflow: -o-ellipsis-lastline;

   text-overflow: ellipsis;

   display: -webkit-box;

   -webkit-line-clamp: 3;

   -webkit-box-orient: vertical;

}

//文字方向 writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左

p{ 　　writing-mode: tb-rl;}

//段落首行缩进

p{

 text-indent:2em;

}

//首字下沉

p:first-letter{ 　　padding: 6px;　  font-size: 32pt;　　float: left;}

//汉字注音

<ruby>注音<rt style="font-size: 11px;">zhu yin</rt></ruby>

//固定宽度折行

.word-break{

   word-break:keep-all

}

4 样式选择器

4.1 标签选择器

作用于整个页面中的所有该名称的标签

标签名 { 样式名 : 值; }

4.2 id选择器

规范id唯一性

#id名 { 样式名 : 值; }

4.3 类选择器

规定一个类型名的样式，使用处添加属性class="类名"

.类名 { 样式名 : 值; }

4.4 伪选择器

设定标签样式的时候，根据状态设置不同的样式（字体，颜色，大小等）

<style>
　　　　a:link{
　　　　　　color:blue;
　　　　　　font-size:16px
　　　　}
　　　　a:hover{
　　　　　　color:yellow;
　　　　　　font-size:24px
　　　　}
　　　　a:active{
　　　　　　color:red;
　　　　　　font-size:36px
　　　　}
　　　　a:visited{
　　　　　　color:#9f365f;
　　　　}
　　　　tr:hover{
　　　　   background-color:yellow;
　　　　}
　　　</style>

5 文档流

文档流就是堆砌，如果需要控制其位置，需要考虑position属性设置其定位方式

5.1 position为static（文档流堆砌）

默认情况的值，即正常自左而右，自上而下的堆砌的文档流。

这种情况样式中top和left等定位属性无效。

5.2 position为relative（文档流堆砌 偏离）

相对定位：原来所在文档流中的位置一直保持占据着。

设定left、top等参数的时候，相当于在原有文档流的位置基础之上偏移。    

5.3 position为absolute（脱离文档流）

元素设置绝对定位以后，那么该元素就脱离了文档流，可以设置其绝对位置。

position属性其实是指本体对上级的定位，absolute其left、top、right、bottom等是相对于设置了relative定位的上级的，如果父元素没有设置relative，则一级一级往上找relative的容器，如果都没找到，最后相对body定位。

如果需要针对某一个容器的悬浮效果，而不是针对窗口的。只要把其上一级的样式属性position设置为relative就可以了。

如果有滚动条，滚动条值发生变化时，absolute定位的元素会跟着body或者relative的父级容器一起滚动。

5.4 position为fixed（脱离文档流）

设置fixed定位后，该元素就脱离了文档流，可以设置其绝对位置。

浏览器窗口大小变化时，fixed定位元素的位置会重新调整，以适应样式中定义的位置。

如果有滚动条，滚动条值发生变化时，fixed定位元素的位置始终相对浏览器窗口不变。

fixed定位案例

1、右下角固定广告，广告位始终固定在窗体的某个位置，不受内容和滚动条变化的影响。

2、当浏览器窗体不断缩小，最后导致元素位置会重叠，位置互换等情形的发生。当可视区过小，元素可能"消失"。

#ads{

width:300px;

height:250px;

position:fixed;

right:0;

bottom:0;

border:1px solid red;

}