css学习笔记

css学习笔记

css：
    1.为什么需要css?
        问题一：HTML的作用是负责数据的格式化展示的
        如果使用HTML来进行数据的样式，则发现样式书写起来太过于麻烦，不易于维护，不能够重复的使用。
        问题二：HTML可以有效的组织数据的展示，但是不同类型数据在浏览器中的分布没办法实现
        未解决上面问题：
            诞生了css语言，专门用来给网页进行样式开发
    2.什么是css？
        css的概念：
            层次样式表
            作用：
                给网页进行样式的开发
                给网页进行布局
            特点：
                语言特别简单
                开发的样式可以重复使用
                依赖于HTML
    3.使用css？
        css的申明
        css的选择器
        css的常用样式
        css的盒子模型
        css的定位
        css的css的布局

    css的申明：
        1.在head标签中使用style标签中申明
            作用：此申明一般申明当前网页的公共样式或者某个标签的单独样式
        2.在标签上使用style属性进行申明：
            作用：次申明会将css样式直接作用于当前标签
        3.在head标签中使用link标签引入外部申明好的css文件
            作用：此申明相当于调用，解决了不同网页的样式重复使用的问题，一次申明，随处使用
        问题：三种申明方法的优先级
            2>1>3
    css的选择器：
        标签选择器：
            标签名{
            样式名1：样式值1；
            样式名2：样式值2；
            }
        id选择器：
            #标签的id属性值{
            样式名1：样式值1；
            样式名2：样式值2；
            }
            作用：给某个指定的样式设置指定的样式
        类选择器：
            ./类选择器名{

            }
            作用：给不同的标签添加相同的样式
        全部选择器：
            *{

            }
            作用：选择所有的HTML标签，并添加相同的样式
        组合选择器：
            选择器1，选择器2{

            }
            作用：解决不同的选择器之间的样式相同的添加
        子标签选择器：
            选择器1 子标签{

            }
        属性选择器：
            标签名[属性名=属性值]{样式1：样式值1；...}
            作用：选择某标签指定具备某属性为某属性值的标签
    css使用过程：
        1.申明css代码域
        2.使用选择器选择需要添加样式的标签
            根据需求来：
                使用*选择器来给整个页面添加基础样式
                使用类选择器给不同的标签添加基础样式
                使用标签选择器给某类标签添加基础样式
                使用id，属性，style属性申明方式给某个标签添加个性化样式
        3.书写样式单
            边框设置
                border:solid 1px;
            字体设置
                font-size:10px;设置字体大小
                font-family:"黑体";设置字体格式
                font-weight:bold;设置字体加粗
            字体颜色设置
                color:red;
            背景颜色设置
                background-color:颜色；
            背景图片设置
                background-img:url(图片的相对路径)
                background-repeate:no-repeate;设置图片不重复
                background-size:cover;图片平铺整个页面
            高和宽设置
            浮动设置
                float:left/right
            行高设置
                line-height:10;
    css的一些基本样式：
        text-align：center   设置样式居中
        background-color：gray  设置背景颜色（灰）
        width：   设置高度  单位px，%
        height：  设置宽度  单位px，%
        padding： 设置内边距 单位px
        transform：rotate（-10deg） scale（1.5）；  设置倾斜角度 正：顺时针、负：逆时针 大于1放大，小于1缩小
        margin：  设置外边距  单位px
        标签号：hover   设置伪类标签 （鼠标到达时实现的样式）
        z-index：1；  设置显示优先级别，数值越大优先级越高
        transition：1.5s  设置显示时间
        transparent透明颜色
    css盒子模型：
        div标签：
            块级标签，主要用来进行网页布局，会将期中的子内容作为一个独立的整体存在
            特点：
                默认宽度是页面的宽度，但是可以设置
                高度默认是没有的，但是可以设置（可以顶开）
        盒子模型：
            外边距：margin
                作用：用来设置元素与元素之间的间距
                居中设置：margin 0px auto；上下间隔是0，水平居中
                可以根据需求单独设置上下左右的外边距
            边框：border
                作用：用来设置元素的边框大小
                可以单独设置上下左右
            内边距：padding
                作用：设置内容和边框之间的距离
                注意：内边距不会改变内容区域的大小
                可以单独设置上下左右
            内容区域：
                作用：改变内容区域的大小
                设置宽和高即可以改变内容区域的大小
    css的定位学习：position
        相对定位：relative
            作用：相对元素原有位置移动指定的距离（相对自己原有的位置
            ）可以使用top，left，right，bottom
            注意：其他元素的位置是不动的
        绝对定位：absolute
            作用：可以使用元素参照body或者父元素来进行移动
            注意：如果父级元素成为参照元素，必须使用相对定位属性。默认情况下是以body为参考来相对移动的
        固定定位：fixed
            作用：将元素固定显示在页面的指定位置，不会随着滚动条的移动而改变位置
        以上定位均可以使用top，left，right，bottom来进行移动
        z-index：此属性是用来申明元素的显示级别（都必须是定位元素）