css

CSS

CSS简介：级联样式表用于搭建页面的整体布局和对页面标签组件的样式渲染

CSS代码的组成部分：

css选择器 选出当前页面的一个或多个标签

css样式属性：当使用选择器选出标签后，在{}中使用样式属性渲染这些标签

CSS选择器：选出当前页面的一个或多个标签

通配符选择器：*{…}选出当前页面中的一个或者多个标签

标签选择器：选出当前页面中标签符合要求的所有标签 li{…}.h3{…}

id选择器：#li2{…},id选择器的优先级是最高的

class选择器：先定义一些样式，如果页面中的某些标签需要这一类样式，只需要设计这些标签的class属性即可，.c1 {width:100px}

组合选择器：同时定义多个选择器，所有符合要求的标签都会呗引入

派生选择器：通过父标签找到子标签，然后给这些子标签添加样式

CSS代码的基本写法：

创建外部css文件，后缀需要是.css，在该文档中编写css代码

在html页面中使用link标签把外部的css文档引入html页面

css样式属性：当使用选择器选出标签后，在{}中使用样式属性渲染这些标签

布局属性：盒子模型BOX：div width:200,heigth:200;padding:200px;

width属性

height属性

margin外边距属性：margin属性后面可跟多个参数，一个参数则代表上下左右属性值都是这个参数，两个参数就分别为上下和左右，0px auto代表居中，四个属性代表上右下左，同时也可以使用-left形式来指定单个方向的值

padding内边距属性，参照margin

背景属性：background

background-color：背景颜色，有多种表示方式，具体见文档

background-image：背景图片，url（图片路径），注意图片路径是绝对路径还是相对路径

background-repeat:北京图片的平铺方式，repeat默认值，repeat-x沿x轴平铺，repeat-y沿y轴平铺，no-repeat不平铺

background-position：背景图像的定位

字体属性：font

font-size:字体大小

font-family：字体

font-style：字体样式

font-weight：字体磅值，100-900值越大字体越粗，lighter细的，normal普通，bold加粗，bolder更粗

文本属性：text

color：文本颜色

text-align：文本的对齐方式

line-height:行高

text-decoration：文本的装饰，none，underline，overline，line-through

边框属性：border

border: 1px solid black;

border-width: 边框宽度，border-top-width:border-bottom-width:border-left-width:border-right-width:

border-style:边框样式，border-top-style:border-bottom-style:border-left-style:border-right-style:

border-color: 边框颜色，border-top-color:border-bottom-color:border-left-color:border-right-color:

列表属性：list-style：控制列表想的显示方式

CSS复杂属性：

display：控制组件的显示方式，none把组件隐藏，block把组件按照块级标记的方式显示

块级标记：div，ul，li，p，h1,h2,h3一个标签占用一整行

i,u,s,a,img一行中可以输出多个行级标记

很多情况下，需要把块级标记按照块级标记来显示。因为只有块级标记才可以设置width和height的属性

float：浮动

可以实现块级标记横向排列：left，right，其实浮动将标记向子标签移动了

position：控制标签子啊页面中的输出方式及位置：static默认值，absolute，relative，fixed

如果把某个标签的position设置为absolute，那么这个标签将会脱离默认文档刘，单独称为一层。覆盖在默认文档流之上。我们可以通过z-index控制层标。z-index值越大越靠上层

我们可以通过top/left/right/bottom控制层的位置，设置这些属性时需要有相对参照位置，该标签将会先寻找父标签，看一下父标签是否含有属性： position:relative/abslute/fixed. 如果有，那么相对参照物则为该父标签，若没有，继续寻找祖先标记。直到找到body。

fixed用于控制标签相对于窗口定位