Java Web_07从入门到精通(CSS)

**

一、css样式概述

Cascading Style Sheet(层叠样式表) 缩写为CSS,主要用于网页风格设计，包括字体大小，颜色 以及元素的精确定位等。
HTML5规范推荐把页面外观交给CSS去控制，而HTML标签则负责标签、语义部分。HTML5删除了传统的 big strike等专门控制页面外观的标签，而把页面外观的控制工作交给CSS负责。目前的最新规范是CSS3.
1.1 CSS历史和作用
CSS是一种专门描述结构文档表现方式的文档，它即可以描述这些文档如果在屏幕上显示，也可以描述它们的打印效果，甚至声音效果，CSS不单可以包含在文档的内部，而且可以独立的文档方式存在。CSS有很多优点：
表达效果丰富 ：样式单可以支持文字和图像的精确定位，三维层技术以及交互操作等，对于文档的表现力远远超过了HTML中的标记。更重要的是，CSS的标准规范独立于其他结构的文档，当需要实现更丰富的表达效果时，仅需修改CSS即可，无需修改原始的页面。

文档体积小：在实际应用中，如果相同的标记下的内容有相同的表现方式，使用传统的方法需要为每个标记分别定义显示格式，造成大量的重复定义。而在CSS中，对于同一类标记只需进行一次格式定义即可。
便于信息检索：样式单的显示逻辑与数据逻辑分离，显示细节的描述并不影响文档中数据的内在结构，因此，网络引擎对文档进行检索，更容易检索到有用的信息。
可读性好：CSS对各种标记的显示进行集中定义，且定义方式直观易读。
W3C已经该出了两种样式单语言的推荐标准：一种是CSS 美化html一种是可扩展样式单语言
XSL（eXtensible Stylesheet language）美化 XML
目前,CSS3的最新版本是CSS3.0
CSS1.0 1996年12月 CSS1.0作为第一个正式规范面世。
CSS2.0 1998年5月 CSS2.0也是使用最广泛的CSS版本
CSS2.1 2004年2月 CSS2.1对原来的CSS2.0做了小范围的修改。
CSS3.0 2010年CSS3规范推出，增加了变形和动画还有就是3D效果
CSS3.0的致命弱点就是对浏览器的版本要求高，IE对CSS3的支持不理想。
chrome webkit

1.2 CSS样式的基本使用
链接外部样式 这种方式将样式文件彻底与HTML文档分离 样式文件需要额外引入
导入外部样式文件 这种方式与上一种方式相同 只是使用@import来引入样式文件
使用内部样式定义 这种方式是通过在HTML文档头定义样式单部分来实现的。这个样式只能供一个页面使用
使用行内样式 通过HTML标签的Style属性来定义样式。

table{
background: #003366;
width:400px;
border-style: solid;
border-width:3px;

}
td{
background-color: #fff;
font-family: “楷体_GB2312”;
font-size:20pt;
text-shadow: -8px 6px 2px #333;
}
通常不建议使用内部CSS样式，因为这种做法需要在HTML文档内嵌入CSS样式定义，这种内部CSS样式主要有三大劣势：
如果此CSS样式需要被其他HTML文档使用，那么这些CSS样式必须在其他HTML文档中重复定义
大量CSS嵌套在HTML文档中，必将导致HTML文档过大，大量的重复下载，导致网络负载加重。
如果需要修改整站风格时，必须依次打开每个页面重复修改，不利于软件工程化管理。
但内部样式定义也并非一无是处，如果想让某些CSS样式仅对某个页面，而不影响整个站点，则应该选择使用内部CSS样式定义。

table{background: #003366;}
td{
background: #fff;
font-family:“楷体_GB2312”;
font-size:20pt;
text-shadow: -8px 6px 2px #333;}
.title{
font-size:18px;
color:red;
height: 30px;
width:200px;
border-top: 3px solid #ccc;
border-left: 3px solid #ccc;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
}

<div class="title">前端技术:</div>
    <table>
        <tr>
            <td>HTML超文本标记语言</td>
        </tr>
        <tr>
            <td>CSS层叠样式表</td>
        </tr>
        <tr>
            <td>javascript脚本语言</td>
        </tr>
    </table>

行内CSS样式只对单个标签有效，它甚至不会影响整个文件，行内样式定义可以精确控制某个HTML元素的外观表现，并且允许通过Javascript动态修改HTML标签的CSS样式。
为了使用行内样式，CSS扩展了HTML标签，几乎所有HTML标签都增加了一个style通用属性。style=“property:vlaue；property:value;”

2.属性选择器
从广义的角度来看，元素选择器 其实是属性选择器的特例。属性选择器一共有如下几种语法格式:
E{} 指定该CSS样式对所有的E元素起作用。
E[attr]{};指定该CSS样式对具有attr属性的E元素起作用
E[attr=value]:指定该CSS样式对所有包含attr属性，且attr属性值为value的E元素起作用
E[attr~=value]:指定该CSS样式对所有包含attr属性,且attr属性的值以空格隔开的系列值，其中某个值为value的E元素起作用
E{attr|=value}指定该CSS样式对所有包含attr属性，且Attr属性的值以连字符分隔的系列值。其中第一值为value的Tag元素起作用。
选择器的详细用法见CSS3手册

**

1.3CSS选择器

定义CSS样式的语法总遵循如下格式：
Selector{
property1:value;
property2:value;
}
第一部分： selector选择器
第二部分：{property:value}属性定义
CSS的内容分为两部分:选择器 属性
1.元素选择器 ID选择器 类选择器
元素选择器是最简单的选择器 其语法格式如下:
E{…} 其中E代表标签的名字
*{}
div{
background: grey;
font:italic bold 20pt 楷体_GB2312; }
p{background: #444;color: #fff;font:bold 20pt 宋体; }
3.关系选择符
包含选择符 （E F）
子选择符(E>F)
相邻选择符(E+F)
兄弟选择符(E~F)
4.伪类选择符
内容过多参见CSS手册
5.伪类对象选择器
选择器的详细用法见CSS3手册
二、文本 字体属性
2.1字体相关属性
CSS为控制文本的字体提供了大量属性，这些字体相关属性主要用于控制文本的字体、颜色、修饰等外观。字体相关属性如下：
font:这是一个复合属性，其属性值为： font-style font-variant font-weight font-size line-height font-family的复合属性。使用font属性可同时控制文字的样式、字体粗体、字体大小、字体等属性。
color:该属性用于控制文字颜色。该属性的值可以是任何有效的颜色值，包括字符串
类型的颜色名、十六进制的颜色值、或使用rgb()函数设置的RGB值等,甚至包括CSS3.0提供的HSL颜色值等。
div {
border: 10px solid;
color: red;
}
font-family:设置文字的字体，因为字体需要浏览器内嵌字体的支持，该属性可以设置多个显示字体，浏览器按该属性指定的多个字体依次搜索，以优先找到的字体来显示文字。多个属性值之间以英文逗号(，)隔开。

body { font-family: helvetica, verdana, sans-serif; }

font-size:该属性用于设置文字的字体大小。此处的字体大小既可以是相对的字体大小也可以是绝对的字体大小。
font-size-adjust:该属性用于控制对不同字体的字体尺寸进行微调。
font-stretch:该属性用于改变文字横向的拉伸，该属性的默认值为normal,即不拉伸。还有两个属性值:即narrower和wider,前者是横向压缩，后者为横向拉伸。
font-style：该属性用于设置文字风格，是否采用斜体等。该属性的常用属性值为:normal、italic、oblique,该属性依次表示设置文字正常、斜体、倾斜字体。

font-weight:该属性用来设置字体是否加粗。该属性的值表示粗的程度，加粗的程度用lighter、normal、bold、bolder等常用属性值表示。
text-decoation:该属性用来控制文字是否有修饰线如下划线等。
font-varient:该属性用于设置文字的大写字母的格式。
text-shadow:该属性用于设置文字是否有阴影效果。
text-transform:该属性用于设置文字的大小写。
line-height:该属性用于设置字体的行高。
letter-spacing:该属性用于设置字符之间的间隔。
word-spacing:该属性用于设置单词之间的间隔。
text-shadow:该属性在css2.0中被引入，CSS2.1删除了该属性，CSS3.0再次引入了该属性，该属性的值形如：color xoffset yoffset length 或 xoffset yoffset radius color
 color:指定该阴影的颜色.
 xoffset:指定阴影在横向上的偏移。
yoffset:指定阴影在纵向上的偏移。
radius:指定阴影的模糊半径，模糊半径越大，阴影看上去越模糊。

textshadow: red 5px 5px 2px
   <p style="text-shadow: red 5px 5px 2px">测试文字</p>
  textshadow:  5px 5px 2px 省略阴影色
   <p style="text-shadow:  5px 5px 2px">测试文字</p>
    textshadow:  5px 5px 2px 向左上角投影
   <p style="text-shadow:  -5px -5px 2px gray ">测试文字</p>
     textshadow:  5px 5px 2px 向左下角投影
   <p style="text-shadow:  -5px 5px 2px gray ">测试文字</p>
     textshadow:  5px -5px 2px 向右上角投影
   <p style="text-shadow:  5px -5px 2px gray ">测试文字</p>
     textshadow:  5px 5px 2px 向右下角投影
   <p style="text-shadow:  5px 5px 2px gray ">测试文字</p>
     textshadow:  15px 15px 2px 向右下角投影 更大的偏移量
   <p style="text-shadow:  15px 15px 2px gray ">测试文字</p>
    textshadow:  15px 15px 2px (模糊半径增加,模糊程度加深)
   <p style="text-shadow:  15px 15px 10px gray ">测试文字</p>

添加多个阴影 如果希望为文字添加多个阴影，则可以为text-shadow属性多设置几组阴影，多组阴影之间使用逗号隔开
span{ font-size: xx-large;
text-shadow: 5px 5px 2px red,30px 30px 2px green,
50px 50px 2px blue;}
使用font-size-adjust属性微调字体大小 对于西方文字来说,相同字号，不同字体的字母大小也是不同的。

  #div1, #div2,#div3 {
        font-size: 20px;}
   #div1 {
        font-family: "Courier New";
        font-size-adjust: 0.44;
    }
 #div2 {
        font-family: "Roma";
        font-size-adjust: 0.66;
    }
    #div3 {
        font-family: "Impact";
        font-size-adjust: 0.93;
    }

CSS3支持的颜色表示方法
CSS2已经提供了多种颜色表示方法，如果字符串形式的颜色名、十六进制的颜色值等。但CSS2不允许为颜色设置透明度，因此显得有些不够完善，CSS3则提供了更多的颜色表示方法，从而完善了颜色的表示方法。
CSS2，CSS3 一共支持如下几种颜色表示方法：
用颜色名表示，例如white(白色)、红色（red）、greenyellow(黄绿色)、gold(金色)等。这种方式简单、易用，但它能表示的颜色数量有限——不可能为所有颜色都指定一个名称。
用十六进制的颜色值表示，这就是典型的三原色混合原理，例如#FF0000 其中前两位FF表示红光的值 ——也就是把红光分成0~255个色阶，其中00表示没有红光，FF（就是255）表示红光值最大；中间两位表示绿光的值，为0；后面两位表示蓝光的值 为0；三种光混合成红色。实际上，也可以把红、绿、蓝只分为0~15个色阶，这样使用3位十六进制数即可表示，例如#0F0 其中第一位表示红光的值为 0 第二位表示绿光的值为F(就是15) 表示绿光的值最大。最后一位表示蓝光的值为0，三种光混合成绿色。

用rgb(r,g,b)函数表示，这也是三原色混合原理。例如rgb(255,255,0)红光的值为255(最大值) 绿光的值也是255(最大值) 蓝光的值为 0，混合出来的颜色就是黄色。
用HSL(Hue,Staturation,Lightness)函数表示，这是用色调、饱和度、亮度控制的颜色。例如HSL(120,100%,100%)，其中色调为120,也就是绿色（色调0代表红色、色调120代表绿色 色调240代表蓝色）饱和度，亮色都是100%，因此这就是绿色。
用rgba(r,g,b,a)这还是三原色混合原理，与rgb(r,g,b)函数相似，只是多了一个a参数，用于指定该颜色的透明度。
a 参数可以是 0~1之间的任意数，其中0代表完全透明。
用hsla(Hue,Staturation,Lightness,alpha)函数表示，这也是色调、饱和度、亮度控制的颜色，与hsl相比就多了一个alpha参数，用于指定该颜色的透明度，alpha参数可以是0~1之间的任意数，其中0代表完全透明 。

<div style="background: gray;">测试文字</div>
<div style="background: #aaa;">测试文字</div>
<div style="background: #ffff00">测试文字</div>  <p style="text-shadow:  15px 15px 10px gray ">测试文字</p>
<div style="background: rgb(255,0,255);">测试文字</div>
<div style="background: rgba(255,0,255,0.5);">测试文字</div>
<div style="background: hsl(120,80%,50%);">测试文字</div>
 <div style="background: hsla(120,80%,50%,0.5);">测试文字</div>

文本相关属性
text-ident:用于设置段落文本的缩进
text-overflow:用于控制文本溢出的方法
clip:如果该元素指定了overflow:hidden属性值，当该元素中文本溢出时，clip指定只是简单地裁切溢出的文本
ellipsis:如果该元素指定了overflow:hidden属性值，当该元素中文本溢出时，ellipsis指定裁切溢出的文本，并显示溢出标记（…）
vertical-align:用于设置目标元素里内容的垂直对齐方式，通常有顶端对齐，底对齐等方式。
属性参见文档。
text-align:用于设置目标元素中文本的对齐方式。
direction：用于设置文本流入的方式
white-space,word-break,word-wrap

div{border:1px solid #000;
      	width:200px;} 
 <div style="text-indent: 20pt;">测试文字</div>
     <div style="text-indent: 40pt;">测试文字</div>
     <div style="text-align: center;">测试文字</div>
     <div style="text-align: right;">测试文字</div>
     <div style="direction: rtl;color:red;">测试文字</div>
     <div style="direction: ltr;color:green;">测试文字</div>
     <div style="text-overflow: clip;overflow: hidden;white-space: nowrap;">测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
     <div style="text-overflow: ellipsis; overflow:hidden;white-space: nowrap;">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>

white-space：用于控制HTML元素对元素内文本中空白的处理方式。
word-break:文本自动换行
word-wrap控制长单词或url地址换行。

div {
        border: 1px solid #000;
        height: 80px;
        width: 240px;
    }
<!-- 忽略 文本中的空白、换行符-->
        white-space：normal
        <div style="white-space: normal;">
            the root interface in 
            the collection hierarchy.
        </div>
         <!-- 保留 文本中的空白、换行符-->
        <div style="white-space: pre;">
        	 the root interface in 
            the collection hierarchy.
        </div>
<!-- 忽略 文本中空白 换行符 强制不换行-->
        <div style="white-space:nowrap;">
        	 the root interface in 
            the collection hierarchy.
        </div>
         <div style="white-space:pre-wrap;">
        	 the root interface in 
            the collection hierarchy.
        </div>
         <div style="white-space:pre-line;">
        	 the root interface in 
            the collection hierarchy.
        </div>
<div style="word-break: keep-all;">
        	 the root interface in the collection hierarchy.
        </div>
 <div style="word-break:break-all;">
        	 the root interface in the collection hierarchy.
 </div>

CSS3新增服务器字体
在CSS3之前，前端开发者开发页面时只能使用最普通的字体，有些网页甚至根本不会设置字体这是因为在网页上设置使用某种字体后，如果客户端希望正常显示该网页，则必须在客户端已安装这种字体（开发者无法确定客户端是否安装了相应的字体）否则该网页字体设置在客户端就不会起作用。
CSS3的出现了改变了这种现状，CSS3允许使用服务器字体，如果客户端没有安装这种字体，客户端就会自动下载这种字体。
使用服务端字体
参考CSS3手册，建议优先使用客户端字体。这样能提高网页渲染的性能。

**

三、背景、边框和边距相关属性

3.1 盒模型
CSS的一个重要概念就是盒模型（box model）.对于一个HTML标签而言，它会占据页面的一个区域，这块区域就是该标签占据的“盒子”（形状像一个盒子）
HTML 标签占据的矩形区域由内容区（content）、内填充区（padding）边框区（border）和外边框区（margin）组成。HTML元素的盒模型中有两个部分是可见的：元素内容和元素的边框;也有两部分时不可见的：内填充区和外边距区，这两个不可见的区域依然会占据空间。理解HTML元素的盒模型的4个部分至关重要,CSS的重要作用之一就是控制内容区、内填充区、外框区、外边距区等。
背景相关属性
背景相关属性用于控制背景色、背景图片等属性。在控制背景图片的同时，还可控制背景图片的排列方式。
background:设置对象的背景样式。该属性是一个复合属性，可用于同时设置背景色、背景图片、背景重复模式等属性
background-color:用于设置背景色
background-image:用于设置背景图片
background-repeat:适用于css1,用于设置对象的背景图片是否平铺。
background-attachment:用于设置图片是随着对象内容滚动还是固定的。
scroll:指定背景图片会随着元素里的内容的滚动而滚动。
fixed:背景图片固定的，不会随着元素的内容滚动而滚动。
background-position:用于设置对象的背景图片位置，该属性需要横坐标和纵坐标两个值，它们都支持两种属性——既可使用实际的长度值，也可使用百分比。
css3新增background-clip属性
background-clip:用于设置背景覆盖的范围
background-origin:用于设置背景覆盖的起点
background-size:用于设置背景图片的大小