css

CSS

1. CSS简介：级联样式表用于搭建页面的整体布局和对页面标签组件的样式渲染
2. CSS代码的组成部分：
   
   1. css选择器 选出当前页面的一个或多个标签
   2. css样式属性：当使用选择器选出标签后，在{}中使用样式属性渲染这些标签
3. CSS选择器：选出当前页面的一个或多个标签
   
   1. 通配符选择器：*{…}选出当前页面中的一个或者多个标签
   2. 标签选择器：选出当前页面中标签符合要求的所有标签 li{…}.h3{…}
   3. id选择器：#li2{…},id选择器的优先级是最高的
   4. class选择器：先定义一些样式，如果页面中的某些标签需要这一类样式，只需要设计这些标签的class属性即可，.c1 {width:100px}
   5. 组合选择器：同时定义多个选择器，所有符合要求的标签都会呗引入
   6. 派生选择器：通过父标签找到子标签，然后给这些子标签添加样式
4. CSS代码的基本写法：
   
   1. 创建外部css文件，后缀需要是.css，在该文档中编写css代码
   2. 在html页面中使用link标签把外部的css文档引入html页面
5. css样式属性：当使用选择器选出标签后，在{}中使用样式属性渲染这些标签
   
   1. 布局属性：盒子模型BOX：div width:200,heigth:200;padding:200px;
      
      1. width属性
      2. height属性
      3. margin外边距属性：margin属性后面可跟多个参数，一个参数则代表上下左右属性值都是这个参数，两个参数就分别为上下和左右，0px auto代表居中，四个属性代表上右下左，同时也可以使用-left形式来指定单个方向的值
      4. padding内边距属性，参照margin
   2. 背景属性：background
      
      1. background-color：背景颜色，有多种表示方式，具体见文档
      2. background-image：背景图片，url（图片路径），注意图片路径是绝对路径还是相对路径
      3. background-repeat:北京图片的平铺方式，repeat默认值，repeat-x沿x轴平铺，repeat-y沿y轴平铺，no-repeat不平铺
      4. background-position：背景图像的定位
   3. 字体属性：font
      
      1. font-size:字体大小
      2. font-family：字体
      3. font-style：字体样式
      4. font-weight：字体磅值，100-900值越大字体越粗，lighter细的，normal普通，bold加粗，bolder更粗
   4. 文本属性：text
      
      1. color：文本颜色
      2. text-align：文本的对齐方式
      3. line-height:行高
      4. text-decoration：文本的装饰，none，underline，overline，line-through
   5. 边框属性：border
      
      1. border: 1px solid black;
      2. border-width: 边框宽度，border-top-width:border-bottom-width:border-left-width:border-right-width:
      3. border-style:边框样式，border-top-style:border-bottom-style:border-left-style:border-right-style:
      4. border-color: 边框颜色，border-top-color:border-bottom-color:border-left-color:border-right-color:
   6. 列表属性：list-style：控制列表想的显示方式
6. CSS复杂属性：
   
   1. display：控制组件的显示方式，none把组件隐藏，block把组件按照块级标记的方式显示
      
      1. 块级标记：div，ul，li，p，h1,h2,h3一个标签占用一整行
      2. i,u,s,a,img一行中可以输出多个行级标记
      3. 很多情况下，需要把块级标记按照块级标记来显示。因为只有块级标记才可以设置width和height的属性
   2. float：浮动
      
      1. 可以实现块级标记横向排列：left，right，其实浮动将标记向子标签移动了
   3. position：控制标签子啊页面中的输出方式及位置：static默认值，absolute，relative，fixed
      
      1. 如果把某个标签的position设置为absolute，那么这个标签将会脱离默认文档刘，单独称为一层。覆盖在默认文档流之上。我们可以通过z-index控制层标。z-index值越大越靠上层
      2. 我们可以通过top/left/right/bottom控制层的位置，设置这些属性时需要有相对参照位置，该标签将会先寻找父标签，看一下父标签是否含有属性： position:relative/abslute/fixed. 如果有，那么相对参照物则为该父标签，若没有，继续寻找祖先标记。直到找到body。
      3. fixed用于控制标签相对于窗口定位