LOFTER-网易轻博

概念：css  cascading style sheets---层叠样式表

        专门负责对网页的美化

特点：丰富的样式定义  易于使用和修改   多页面应用   层叠   页面压缩

三种使用方式：1页面head标签中添加style标签，标签里面专门写css代码(推荐)   

                        2在HTML标签通过style属性里书写，所有标签都支持，优先级最高    

                        3通过head标签中添加link标签来引入外部css文件

行业选择器>id选择器>类选择器    选择器相同以书写顺序后面的样式为准

CSS选择器:

1标签选择器:根据HTML元素标签进行关联   标签名{  }

2ID选择器:根据某个元素的ID属性进行关联，同一个页面不允许出现相同id   #ID{   }

3Class类选择器:根据某个元素的class属性进行关联     .class{  }

4组合选择器:结合id，类，标签选择器一起使用的选择器，用于层次较深的HTML元素设置样式 

5伪类选择器:对鼠标发生指定动作时设置的样式    a:link 打开页面超链接默认的样式   a:hover当鼠标悬停到超链接上时的样子   a:visited在超链接被点击后设置的样式    a:active当鼠标点击超链接不释放时设置的样式   :hover支持大多数html标签

文本类CSS属性:

color：red 设置文本颜色

text-align：center 设置文本对齐方式

font-size：px  设置文本大写  px为单位

font-weight：bold或者数字      设置文本粗细

font-family：'字体名'      设置文本字体类型

font-style：italic  设置字体的风格  比如斜体

容器类CSS属性:

width：px   设置HTML元素的宽度

height：px   设置HTML元素的高度

boder：px color solid   设置HTML元素的边框，包括大小，颜色和边框样式

backgroud-color：颜色    设置HTML元素的背景颜色

backgroud-image：url('图片地址');   设置HTML元素的背景图片

line-height：px    设置HTML元素的行高

text-decoration：none    设置超链接下划线的样式

margin：0 auto   设置HTML元素和其他周围HTML元素之间的距离

盒模型DIV：外边距(margin),边框(border),内间距(padding),内容(centent)四个属性组成

浮动：本质是一个css属性:float,值为left或者right ,盒模型标签专属特性，使用浮动的元素可以和其他浮动元素显示在同一行

四个核心属性使用:margin: 0px 0px 0px 0px  上右下左    padding和border-width一样

    margin: 0px  auto  上下间距0  左右自动对齐即水平居中 其他两个属性一样

    margin:100px    即上下左右边距均为100px    其他两个属性一样

    margin-top,margin-right,margin-bottom,margin-left.   其他两个属性一样

盒模型定位: 

    static静态定位：默认值，没有定位

    absolute绝对定位：绝对定位的元素的位置相对于static定位以外的第一个父元素进行定位 通过left top right bottom进行移动

    relative相对定位：相对于其正常位置进行定位 通过left top right bottom进行移动

    fixed固定定位：相对于浏览器窗口body进行定位,通过left top right bottom进行移动