css样式基础

1.CSS（ cascading style sheets）  层叠样式表
    样式定义如何显示 HTML 元素 
    多个样式定义可层叠为一 
2.创建样式
    1）内联样式
        style="display: inline;"
    2）外部样式（推荐）
        rel="stylesheet" type="text/css"固定不变，href指向自己的样式表
        <link rel="stylesheet" type="text/css" href="mystyle.css">
    3）内部样式表
    <style>
        选择器 {
            样式: 属性;
        样式: 属性;
        }
    </style>
    
3.html和css的关系
    html负责文本结构和内容
    css负责文本结构和内容的表现样子
    js 前端核心，控制页面逻辑和展示
    
4，选择器
    1.基础选择器
        *选择器（少用）  通配符选择器（不推荐使用）
        id选择器  HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
        class选择器  在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
        标签选择器      html中的标签，可以直接写到css中
    2.组合选择器
        相邻选择器（h1+p）
        子选择器（ul > li）
        后代选择器（li a）
        伪类选择器 CSS伪类是用来添加一些选择器的特殊效果
    3.选择器优先级
    内联样式>id选择器>class选择器>*选择器>伪类选择器>标签选择器
        
5、颜色表示方法
    1.rgb表示方法  rgb（红，绿，蓝），数值范围在0-255，或者使用百分比
    background-color: rgb(10%, 10%, 20%);
    background-color: rgb(255, 0, 0);
    2.颜色名字表示方法   （red blue yellowe  black orange pink  gold greeen）
    background-color: cornsilk；
    3.十六进制表示颜色，前面两位红色 中间两位绿色 最后两位蓝色。如果十六进制颜色只显示3位，则每一位代表一种颜色
    background-color: #ffff00;
    
6.常见css标签
    background-color：body的背景颜色
    background-image：body的背景图像
    color：设置文本颜色
    text-align：设置文字展示效果，居中、左对齐（默认）、右对齐
    text-decoration：设置文字下划线
    font-family：设置字体，字体用引号包括，不同字体用逗号分隔，默认先查找第一种字体，不存在则第二种，依次类推
    font-size:设置字体大小，单位为px或者em或者百分比，1em=16px
    font-style:设置字体样式，normal(默认)/italic（倾斜）/
    font-weight：设置字体粗细
    
    list-style-type:设置列表格式  square（正方形）、circle（小圆点）、none(不需要)
    list-style-image：设置列表格式图片
    链接样式：
    a:link - 正常，未访问过的链接 
    a:visited - 用户已访问过的链接 
    a:hover - 当用户鼠标放在链接上时 
    a:active - 链接被点击的那一刻 

    框模型：
    border:边框；border: 2px(border-width) solid（border-style） red(border-color)
    margin:外边距 
        margin:25px 50px 75px 100px; (上边距为25px 右边距为50px 下边距为75px 左边距为100px )
        margin:25px 50px 75px;(上边距为25px 左右边距为50px 下边距为75px )
        margin:25px 50px;(上下边距为25px 左右边距为50px )
        margin:25px;所有的4个边距都是25px
    padding:内边距（同margin写法基本一致）

    float:right/left，浮动  水平布局满父元素再往下布局    clear清除浮动
    display:inline(块元素转行元素)/block(行元素转块元素)/none（隐藏元素）
    position 指定元素的定位类型 absolute/fixed/relative/static（默认）/inherit 
        fixed 相对浏览器定位
        relative 相对元素定位
        absolute  相对已定位父元素定位
        通过 top bottom  left right 设置相对偏移

    对齐方式
        margin对齐   水平对齐 (左右居中) 
        float/position 水平对齐（左右）