j2ee:css样式

 1. html:实现用户ui，提供用户界面
 2.css:层叠样式表
  作用：将html实现的用户ui美化，定义网页显示的效果
  3.样式选择器{
       属性：属性值；
       属性：属性值；
       属性：属性值；
  }
  标签选择器，类选择器，id选择器  选择器能够修饰：文本属性，背景属性，边框属性
  font-style:italic斜体
  针对最开始的h3标签：大小，颜色，隶书，斜体，加粗，文本居中，去下划线，缩进。
 4. <div>和<span>是容器标签或者说是块标签，这两个标签的作用是放其他标签。
  这两个标签的区别是span不会换行
 5.伪类样式：就是超链接的时候
  link是超链接的初始状态。
  当超链接被访问过的时候就是hover，是鼠标悬停时候
  当鼠标点击的时候active(活动状态)
  visited是访问之后的样式
6  border：颜色，样式（虚线实线等），宽度
  border:#FFFFFF solid,5px
  border-collapse:是合并两个挨着的边框
7.外部样式：将css内容和html内容分离了
  内部样式：嵌套在html中的样式
  行内样式：每个标签都有style属性

 

------------------------------------------------------------------------

注意：css优化html，通过三种样式用来实现
行内样式：style。（因此，任何标签都能用style）
内部样式：在上面写，定义选择器
外部样式：在外面写好然后引入这个外部文件

css样式：cascade级联 style样式 sheet表
1.为什么用css样式：
   a.有利于对网站的所有页面进行统一的样式管理（也就是使用了选择器）
   b.可以更加精确的确立页面中每个元素的显示样式
2.样式的使用形式：
  a.行内样式：<style=>属性
  b.内部样式：在文档的头部嵌入<style type="text/css"></stype>。<style=>标签
  c。外部样式(链接样式)：把内容单独放一个文件，然后调用,<link>  rel表明当前文档和href文档的关系
3.选择器：定义样式(例如颜色)，匹配元素（匹配以下三种）
    a.类选择器：.a     <p class='a'></p>
    b.元素（标签）选择器：直接用标签名（什么也不加）。标签选择器和类选择器同时存在，看谁离的近
    c.id选择器：#a     <p id='a'></p>

二：盒子模型：padding:内边距（填充）   border:边框  margin边距（外边距）
padding:是一个物体之间的关系，例如tableB表中的单元格。body设置了padding，也就是说body里有填充，就会出现空白
border:是一条线
margin是两个实体之间的关系，两个物体之间差多少。或者是说跟body相差多少
宽度和高度还在padding里面呢，是针对的内容来说的
如果内容多就溢出了，overflow溢出。overflow="hidden"
北京颜色是：内容+填充+边框
遵循的原则是：border:边框宽度      边框样式       边框颜色
  第一边框：
    1.定义样式的时候是上右下左（顺时针）,如果写了上右，也就知道下左了。因为上下一样，左右一样
    2.所有标签都有盒子模型（border-style）
    3.collapse：单元格与单元格之间的关系
  第二边距：

 三：宽度高度
img{float:right},相当于右环绕

四：位置与浮动
 绝对定位：absolute
  bottom是距离下面
 top
  left
  right
浮动：img{float:right},相当于右浮动

五：页面元素的类型
   1.块级元素：div自动换行，设置宽度高度  （display：block，把行内元素变成块级元素）
   2.行内元素：span不换行，设置宽度高度不起作用（因为在一行），但可以设置填充 (display：inline行内，可以让div不换行)
   3.使用display相互转化

六：字体（都是在选择器中）
    text-align:文本对齐方式
   文本装饰：text-decoration.下划线等
   word-spacing:单词的距离
  letter-spacing：字母（中文）之间的间距
  text-transform:文本的变化（首字母大写，全小写等）
  text-indent:文本的缩进（也就是每段的开头是不是缩进，默认是对齐的）：面试
  行高：line-hight(控制行与行之间的间距)
  clore:设置颜色

七：背景：
   背景颜色background-clore，背景图片background：平铺repeat-x是水平平铺
   图片固定：及时下拉滚动条图片也不会动了 attachment:field