CSS（红色标记：待练习效果）

一、CSS 概述

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到<style>中，而html只用关心提供什么样的内容就行了。 

二、设计使用

语法：selector {property: value} 
即 选择器{属性:值} 

选择所有的<p>标签：<style> p{ color:red; } </style>

直接在某一个元素上增加style属性即可达到css一样的效果<p style="color:red">红色的标签</p>

选择器：

元素选择器 ：(标签)通过标签名选择元素                                                                        p
id选择器 ：(id)通过id选择元素                                                                                         #p
注： 一个元素的id应该是唯一的。另一个元素不应该重复使用
类选择器：(class)当需要多个元素，都使用同样的css的时候，就会使用类选择器         .p

          混合选择器：同时根据元素名和class来选择                                                                   p.blue

注释style样式：/*  */ 

尺寸大小：属性width,height         值：可以是百分比或者像素

背景颜色：属性名background-color
颜色的值可以采用3种方式
1. 预定义的颜色名字
比如red,gray,white,black,pink，参考颜色速查手册
2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
3. 16进制的表示
#00ff00 等同于 rgb(0,255,0)

<style>

p.gray {background-color: gray;}

h1 {background-color: transparent}

h2 {background-color: rgb(250,0,255)}

h3 {background-color: #00ff00}

</style>

背景图片：

<style>
div#test
  {
    background-image:url(/study/background.jpg);
    width:200px;
    height:100px;
  }
</style>

背景重复：background-repeat属性 
值可以选 
repeat; 水平垂直方向都重复 
repeat-x; 只有水平方向重复 
repeat-y; 只有垂直方向重复 
no-repeat; 无重复

背景平铺：属性：background-size            背景平铺，通过拉伸实现，会有失真
                  值：contain

文本颜色：属性名color
颜色的值可以采用3种方式
1. 预定义的颜色名字
比如red,gray,white,black,pink
2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
3. 16进制的表示
#00ff00 等同于 rgb(0,255,0)

文本对齐：属性:text-align
值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。
但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经粑在其边框上了，对齐是看不出效果来的

文本修饰：属性：text-decoration 
                  值： overline上划线，line-througn删除线，underline下划线，blink闪烁效果，大部分浏览器已取消此效果，none（可用来去除超链接的下划线）

文本行间距：属性：line-height 
                     值：数字或者百分比

字符间距：属性：letter-spacing 
                  值： 数字

单词间距：属性：word-spacing 
                  值： 数字

首行缩进：属性：text-indent 
                  值： 数字

大小写：属性：text-transform 
              值： 
                    uppercase 全部大写 
                    capitalize 首字母大写 
                    lowercase 全部小写 

空白格：属性：white-space
              值：
                    normal 默认。多个空白格或者换行符会被合并成一个空白格
                    pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
                    pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
                    nowrap 一直不换行，直到使用br

字体尺寸：属性：font-size 
                  值：数字或者百分比

<style>
p.big{
  font-size:30px;
}
 
p.small{
  font-size:50%;
}
   
p.small2{
  font-size:0.5em;
} 
</style>
 
<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同于 50%比例的文字</p>

字体风格：font-style: 
                  normal 标准字体 
                  italic 斜体

字体粗细：属性 font-weight 
                  normal 标准粗细 
                  bold 粗一点

字体库：属性font-family

<style>
p.f1{
  font-family:"Times New Roman";
}
 
p.f2{
  font-family:Arial;
}
p.f3{
  font-family:宋体;
}
p.f4{
  font-family:黑体;
}
p.f5{
  font-family:楷体;
}
p.f6{
  font-family:微软雅黑;
}
</style>
 
<p >默认字库 font family:default </p>
<p class="f1">设置字库 font-family: Times New Roman</p>
<p class="f2">设置字库 font-family: Arial</p>
<p class="f3">设置字库 font-family: 宋体, 这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family: 黑体</p>
<p class="f5">设置字库 font-family: 楷体</p>
<p class="f6">设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体</p>

字体样式混合设置：font

<style>
p.all{
   font:italic bold 30px "Times New Roman";
}
 
</style>
 
<p>默认字体</p>
 
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>

鼠标样式：属性 cursor     鼠标光标属性值一览表http://www.w3school.com.cn/cssref/pr_class_cursor.asp

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。

 表格布局：属性:table-layout 
                   automatic; 单元格的大小由td的内容宽度决定 
                   fixed; 单元格的大小由td上设置的宽度决定 
注：只对连续的英文字母起作用，如果使用中文就看不到效果

表格边框：属性：border-collapse
                  值：
                        separate:边框分隔
                        collapse:边框合并

边框风格：属性： border-style 
                  solid: 实线 
                  dotted:点状 
                  dashed:虚线 
                  double:双线

边框颜色：属性：border-color 
                  值：red,#ff0000,rgb(255,0,0)

 边框宽度：属性：border-width 
                   值：数字

边框样式：属性：border
                  值：颜色 风格 宽度

边框分设：只有一个方向有边框        通过制定位置，可以只给一个方向设置边框风格，颜色和宽度

top,bottom,left,right 分别对应上下左右

<style>
 div{
   width:150px;
   height:150px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 50px;
   background-color:lightgray;  
  }
</style>
 
<div>
只有上面有边框
</div>

边框交界：当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线

<style>
 div.lefttop{
   width:150px;
   height:150px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 50px;
   border-left-style:solid;
   border-left-color:blue;
   border-left-width: 50px;  
   background-color:lightgray;  
  }
   
  div.alldirection{
   width:150px;
   height:150px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 50px;
   border-left-style:solid;
   border-left-color:blue;
   border-left-width: 50px;  
   border-bottom-style:solid;
   border-bottom-color:green;
   border-bottom-width: 50px;
   border-right-style:solid;
   border-right-color:yellow;
   border-right-width: 50px;     
   background-color:lightgray;  
  }
</style>
  
<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框　
</div>

块级元素和内联元素的边框区别：

块级元素div默认是占用100%的宽度

常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等

<style>
.red{
   border:1px solid red;
}
 
</style>
 
<div> 默认无边框div </div>
 
<div class="red"> 实线红色细边框  </div><br/>
<span class="red"> 实线红色细边框  </span><br/>

待练习：表格斑马线，美人尖（倒三角），间断下划线

元素内边距：指的是元素里的内容与边框之间的距离 
属性： 
padding-left: 左内边距 
padding-right: 右内边距 
padding-top: 上内边距 
padding-bottom: 下内边距 
padding: 上 右 下 左

属性：padding
值：如果只写一个，即四个方向的值
值：如果写四个，即四个方向的值
上 右 下 左,依顺时针的方向依次赋值

如果缺少左内边距的值，则使用右内边距的值。
如果缺少下内边距的值，则使用上内边距的值。
如果缺少右内边距的值，则使用上内边距的值

元素外边距：指的是元素边框和元素边框之间的距离 
属性： 
margin-left: 左外边距 
margin-right: 右外边距 
margin-top: 上外边距 
margin-bottom: 下外边距 

像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。 为了观察上下外边距的效果，可以采用块级元素

边框模型：真正决定一个元素的表现形式，是由其边框模型决定的
由图所示
蓝色框即为内容
width:70px 表示内容的大小
红色框即为边框
内容到边框之间的距离，即为内边距 5px
灰色框，是指边框与其他元素之间的距离，即为外边距：10px

 
.box{
    width:70px;
    padding:5px;
    margin: 10px;
}

超链接状态：超链状态有4种 （去除超链接的下划线：text-decoration:none)
link - 初始状态，从未被访问过 
visited - 已访问过 
hover - 鼠标悬停于超链的上方 
active - 鼠标左键点击下去，但是尚未弹起的时候

需要使用到伪类选择器（http://www.w3school.com.cn/css/css_pseudo_classes.asp）

<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
  
<a href="http://www.12306.com">超链的不同状态</a>

待练习：下拉菜单风格

元素隐藏：有两种方式 
display:none; 
visibility:hidden;

使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见” 

CSS文件：如果把所有的css都写在html文件里面，一旦样式比较多的时候，就会显得不易维护 
这个时候就会选择把所有的css内容，放在一个独立文件里 
然后在html中引用该文件 
通常这个文件会被命名为style.css

在测试的时候，大家写的css文件都是放在本地的，比如d:/style.css 
这时就应该写成 
href="file://d:/style.css"

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

 样式优先级：就近原则

style属性>style标签>外部css样式属性

如果样式上增加了!important，则优先级最高，甚至高于style属性

<style>
.p1{
  color:green !important;
}
</style>
<p class="p1" style="color:red">p1 颜色是绿色，优先使用!important样式</p>

绝对定位：属性：position 
                  值： absolute 
通过指定left,top绝对定位一个元素 

设置了绝对定位的元素，相当于该元素被从原文档中删除了        不影响后续文本的显示

绝对定位是基于最近的一个定位了的父容器

.absdiv{
  position: absolute;
  left: 150px;
  top: 50px; 
  width:215px;
  border: 1px solid blue;
}

如果没有定位了的父容器，它的”最近的一个定位了的父容器” 即body

定位覆盖：通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。

重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用

z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。 

<style>
img#i1{
  position: absolute;
  left: 60px;
  top: 20px;
  z-index:1;
}
   
  img#i2{
  position: absolute;
  left: 60px;
  top: 120px;
  z-index:-1;
}
  
</style>

相对定位：属性：position 
                  值：relative

与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离

待练习：相对定位，但是又不占用位置，结合相对定位和绝对定位实现 

浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 
属性：float 
值： left,right 

文字向右浮动
浮动后，原来的“坑”就让出来了
并且是在原来的高度的基础上，向右浮动

文字向左浮动 
首先，向左浮动后，会把“坑”让出来，这个时候"正常的文字4“ 就会过来试图占这个坑，但是，发现 “浮动的文字”并没有走，结果，就只好排在它后面了

文字围绕图片：当图片不浮动时，文字就会换行出现在下面 
当图片浮动时，文字围绕着图片 ，当图片浮动的时候，就会让出这个“坑”出来，这个时候文字就试图去填补这个“坑”，结果发现，**，图片没走，那就只好围绕图片摆放了

文字不围绕图片：不允许出现浮动元素 
属性:clear 
值: left right both none 

设置clear:left 即达到不允许浮动元素出现在左边的效果

水平排列div：默认的div排列是会换行的 
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方 
如果超出了父容器，还会有自动换行的效果

留意：div#floatingDiv div{                                后代选择器

<style>
div#floatingDiv{
  width:200px;
}
div#floatingDiv div{
   float:left;
}
</style>
默认的div排列是会换行的
 
 <div>
       菜单1
 </div>
 <div>
       菜单2
 </div>
 <div>
       菜单3
 </div>
 
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
 
如果超出了父容器，还会有自动换行的效果
 
<div id="floatingDiv">
  <div>
       菜单1
 </div>
 <div>
       菜单2
 </div>
 <div>
       菜单3
 </div>
 <div>
       菜单4
 </div>
 <div>
       菜单5
 </div>
 <div>
       菜单6
 </div>
</div>

元素显示方式：元素的display显示方式有多种，隐藏none、块级block、内联inline、内联-块级inline-block

元素隐藏：display:none; 使得被选择的元素隐藏，并且不占用原来的位置

块级元素：display:block; 表示块级元素
块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效

div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)

内联元素：display:inline; 表示内联元素
内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定

内联-块级：display: inline-block;             元素处于同一行，同时还能指定大小

内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行

内容居中：通过设置属性align="center" 居中

                  通过样式style="text-align:center" 居中

元素居中：

<style>
  div{
     border: solid 1px lightgray;
     margin: 10px;
  }
  span{
     border: solid 1px lightskyblue;
  }
</style>
<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>
 
<div style="width:300px;margin:0 auto">
  设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>
 
<span style="width:300px;margin:0 auto">
  span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中</span>
 
<div style="text-align:center">
  <span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>

左侧固定，右边自动占满：

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>
 
<div class="left">左边固定宽度</div>
 
<div class="right">右边自动填满</div>

垂直居中：

line-height方式    ：#d { line-height: 100px; }                  适合单独一行垂直居中

内边距方式    ： #d { padding: 30px 0;}                               借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上
table方式    ：首先通过display: table-cell;把div用单元格的形式显示，后借用单元格的垂直居中vertical-align: middle; 达到效果。
                       这样对图片也可以居中，上一步 line-height就不能对图片居中。

<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
 
div{
  border:solid 1px lightskyblue;
}
</style>
  
<div id="d">
<img src="a.gif">
</div>

左右固定，中间自适应的布局：

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
   width:200px;
   float:right;
   background-color:pink
  }
  .center {margin:0 200px;   background-color:lightblue}
</style>
 
<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
 <div class="center">中间自适应</div>

</head>

<body>

</html>

一个div始终贴在下方：

首先把蓝色div设置为相对定位
然后把内部的绿色div设置为绝对定位， bottom: 0表示贴在下面

<style>
#div1
        {
            position: relative;
            height: 300px;
            width: 90%;
            background-color: skyblue;
        }
        #div2
        {
            position: absolute;
            bottom: 0;
            height: 30px;
            width: 100%;
            background-color: lightgreen;
        }
    </style>
 
<div id="div1">
    <div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
    </div>
</div>

块之间有空格：

使用float来解决。
float使用完毕之后，记得在下面加上 <div style="clear:both"></div> 用于使得后续的元素，不会和这些span重复在一起

<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
  float:left;
}
</style>
  
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
 
<div style="clear:both"></div>
 
<div>后续的内容</div>