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

选择器:

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>