这篇文章上次修改于 2083 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

选择器：

1）标签选择器
    结构中：<标签名></标签名>
    样式中：标签名{ 属性: 属性值; }
2)class选择器——类选择器
    结构中：<标签名 class="className"></标签名>
    样式中：.className{ css样式 }
    选择器命名规范：
        名称尽量做到见名知义
        名称必须以英文字母开头，可以包含英文字母、数字、下划线_、减号-
        除了减号和下划线之外的特殊符号都不允许使用——空格
        不能使用中文、纯数字、不能以数字开头
3）后代选择器——选择器之间用空格隔开
    选择器1 选择器2{ css样式 }选择器1中所有的选择器2都生效

4)群组选择器——分组选择器，选择器之间用逗号隔开
    在样式表中有很多的具有相同样式的元素，为了尽量减少代码
    选择器1,选择器2{ css样式 } 选择器1和选择器2都具有相同的样式

css文本相关的样式：

1、color属性：文字颜色
    1）英文关键词：red红色   green绿色  blue蓝色 yellow黄色  pink粉
    2)十六进制色值：由0~9 a~f组成，红色：#ff0000--f00   #334455--#345   #334545
    3)rgb(r,g,b):r-red,g-green,b-blue 取值范围0~255   红色：rgb(255,0,0)
    4)transparent透明

    1、background-color: 背景颜色
        2、background-image:背景图片
            background-image: url(图片的路径);
            1）背景图片不占位
            2）默认背景图片在水平方向和垂直方向重复平铺
            3）背景图片会铺满整个盒子
            4）背景图是装饰，只起美化作用
            5）背景图写在样式中
            6）背景图不会被搜索引擎搜索到
            7）图片名称可以是英文、英文与数字的混合，但不能是中文
        3、background-repeat：背景图是否重复
            background-repeat: no-repeat; 不重复
            background-repeat: repeat;  默认值，重复
            background-repeat: repeat-x; 沿着x轴重复
            background-repeat: repeat-y; 沿着y轴重复
        4、background-position: 背景图定位
            background-position: xpos ypos;
            属性值一般有两个：水平方向、垂直方向，两个值之间用空格隔开
            1）关键字：水平方向：left、right、center
                                    垂直方向：top、bottom、center
            2）长度值,数值后要加单位——正值向右、向下，负值向左，向上——负值向盒外走，正值向盒内走

        background: background-color background-image background-repeat background-position;
            background: rgb(255,255,0) url(images/bgxy.jpg) no-repeat 20px 100px;

css样式的引入方式：

    1、行内样式——内联样式
        <div style="width: 100px; height: 100px; background-color: red;"></div>
        适用于：单独的某个元素需要设置特殊样式时
        缺点：作用范围小，大量使用不利于后期维护，尽量不要使用
   2、内部样式——嵌入式
        <style type="text/css"></style>
        适用于：单个的HTML文档
   3、外部样式——引入式，文件扩展名为.css
        <link href="css文件路径" rel="stylesheet" type="text/css" />
            rel属性：当前文档与被链接文档的关系，stylesheet表示外部文件的类型是css文件
       适用于：多个HTML文档中有相同样式时使用，体现了结构和表现分离
       创建步骤：
            1）新建一个css文件夹，在css文件夹中新建.css文件
            2）在新建的css文件中设置编码方式：
                    @charset "utf-8";
            3)把新建的css文件关联到HTML网页中
                <link href="css文件路径" rel="stylesheet" type="text/css" />

2、font-size:字号，单位像素

    3、font-family: 字体
         如果字体中包含空格，则字体名称必须加引号
         中英文混排的文字中，英文字体放在前面（
            font-family: "Times New Roman","宋体";
            font-family: Arial, "微软雅黑";
            ）
     4、font-weight: 加粗，范围100~900之间，100~400之间表示normal
            font-weight: normal; 正常（加粗到400）
            font-weight: bold; 粗体（加粗到700）
            font-weight: 900;
     5、font-style: 文字样式
        font-style: normal; 正常
        font-style: italic; 斜体字
        font-style: oblique; 倾斜文字，类似于斜体
     6、line-height: 行高,文本设置行高之后，会在行高的范围内垂直居中，但是行高撑不起盒高

     font: [font-style] [font-weight] font-size[/line-height] font-family;
          注意： font-size和font-family同时具有时，简写才有效
    文本相关：
        1、text-align: 文本的水平对齐方式
            text-align: left; 默认值，水平居左显示
            text-align: right; 水平居右显示
            text-align: center; 水平居中显示
       2、text-indent: 首行缩进，单位是像素
            text-indent: 100px; 向右缩进
            text-indent: -100px; 向左缩进
       3、text-decoration:文本装饰线
            text-decoration: none;去掉文本装饰线
            text-decoration: overline; 上划线
            text-decoration: underline; 下划线
            text-decoration: line-through; 删除线
       4、text-transform: 英文字母大小写转换
            text-transform: capitalize; 首字母大写
            text-transform: uppercase; 全大写
            text-transform: lowercase;全小写
       5、letter-spacing: 字间距
       6、word-spacing: 词间距
       7  word-wrap:break-word 允许长单词换行到下一行

padding: 内填充

            1、单边内填充
                padding-top 上内填充
                padding-right 右内填充
                padding-bottom
                padding-left
            2、复合写法
                padding: 10px 20px 30px 40px; 上10像素、右20像素、下30像素、左40像素的内填充
                padding: 10px 20px 30px; 上10像素、左右各20像素、下30像素
                padding: 10px 20px; 上下各10像素、左右各20像素
                padding: 10px; 上、下、左、右各有10像素

    样式重置：
        网页在现实的过程中，由于浏览器的内核不同，对默认样式的解析也不同，将所有的元素自带样式去掉，然后重置，可以在不同内核的浏览器中都解析到相同的属性值

border边框：

        border-width 边框的宽度，单位是像素
        border-style 边框的样式
            border-style: solid； 单实线
            border-style: double； 双线
            border-style: dotted； 点状虚线
            border-style: dashed； 条状虚线
            border-style: none； 没有边框
       border-color: 边框颜色
       单边属性：
            border-top上边框
                border-top-width 上边框的宽度
                border-top-style 上边框的线型
                border-top-color 上边框的颜色
           border-right右边框
           border-bottom 下边框
           border-left 左边框
        border: border-width border-style border-color;

**margin值得问题：**
    1、垂直方向相邻的margin值相遇会出现叠加——两个值相同时，取当前值；两个值不同时，取较大值
    2、元素嵌套，子元素添加margin-top值，会把父元素拉下来：
        1）产生条件：
            当子元素与父元素之间没有内容；父元素没有padding值；父元素没有border值
        2）解决：
            给父元素设置border-top值
            给父元素设置padding-top值
            转换思路，避免使用margin-top实现效果——将子元素的margin-top值，变为父元素的padding-top值
盒子的实际尺寸：
    盒子的实际宽度 = width（内容宽）+ padding-left + padding-right + border-left + border-right
    盒子的实际高度 = height( 内容高) + padding-top + padding-bottom + border-top + border-bottom

选择器：

        标签选择器
        类选择器
        后代选择器
        群组选择器

        id选择器
            结构中：<标签名 id="idName"></标签名>
            样式中：#idName{ css样式 }
            注意：id名称在本页面中只能使用一次——唯一性
        关系选择器：
            1）父选择器>子选择器{ css样式 } 只能选中父元素中的子元素，孙子元素不生效
            2)div+p{ css样式 } div标签后第一个p标签，div和p呈并列关系
            3）div~p{ css样式 } div标签后所有的p标签
        属性选择器：
            1）element[attr]{ css样式 } 指定了属性名称的元素都具有css样式
            2）element[attr=value]{ css样式} 指定了属性名称，并且指定了该属性名称的属性值

vertical-align:垂直对其方式

        vertical-align: top; 将元素的顶端与行中最高元素的顶端对齐
        vertical-align: middle; 将元素中部对齐
        vertical-align: bottom; 将元素的顶端与行中最低元素的底端对齐
        vertical-align: baseline; 基线对齐
        vertical-align: super;  上标 <sup></sup>
        vertical-align: sub; 下标 <sub></sub>