CSS Day-1&2

 

前端三要素：
        html：
        CSS
        javascript

CSS:
    1.什么是css
        cascading style sheets
        层叠样式表
    2.css语法
        1.属性名和属性值之间用冒号（：）隔开
            多对属性之间使用分号（；）隔开
            最后一对属性可以不加分号

            <div style="width:100px;height="100px;"></div>

            <style>
                选择器{

                }
            </style>
                <div></div>
        
        2.速记写法
            简写形式
            border：1px soild red
                border-width
                    border-top-width
                    border-right-width
                    border-bottom-width
                    border-left-width
                border-style
                    ...
                    ...
                    ...
                boeder-color
                    ...
                    ...
                    ...

            盒子=内容区+内边距(padding)+边框+外边距(margin)

            padding:10px ;上下左右10px
            padding：10px 20px;上下10px 左右20px
            padding:10px 20px 30px;上10px 左右2px 下30px
            padding:10px 20px 30px 40px:上10px 右20px 下30px 左40px
        
        3.注释：
            1.注释写法/**/
            2.注释作用
                解释说明
                更好的维护和管理
            3.注释能不能嵌套?不能
    3.html中引入css方式
        1.行内样式
            style属性
                <div style=""></div>
        2.内联样式
            <style>
                div{
                    
                }
            </style>
        3.外部引入样式
            创建.css文件    link引用    先加载css代码，在加载html
             @import url()   不建议使用  先加载html，在加载css

        优先级  行内>内联/外部引入
            就近原则，哪一种设置方式更靠近元素，哪一种方式的优先级更高
    4.选择器
        1.标签选择器/元素选择器
            根据标签名称选择一类元素
        2.id选择器
            通过id选择则一类元素
            #value
        3.类选择器
            .class
        4.普遍选择器
            *
        5.后代选择器    
            selector1>selector2:选择直接子元素
            selector1 selector2:选择所有后代元素，包含孙代元素
        6.兄弟选择器
            +   选择当前元素之后的一个兄弟元素  #one+div    div必须和one挨着，否则无法生效
            ~   选择当前元素之后的所有兄弟元素
        7.属性选择器
            [class] 选择当前页面中具有class属性的元素
            [class="one"] 选择当前页面中具有class属性并且class属性值为one(属性值只能有一个one)的元素
            [class~="one"] 选择当前页面中具有class属性并且class属性值之一为one(属性值有one)的元素
            [class^="one"] 选择当前页面中具有class属性并且属性值以one开头的元素
            [class$="one"] 选择当前页面中具有class属性并且属性值以one结尾的元素
            [class*="one"] 选择当前页面中具有class属性并且属性值包含one的元素
        8.多选择器
            使用逗号隔开多个选择器
        9.组合选择器
            多个选择器组合在一起使用
        10.伪类选择器
            ：伪类名称
            :first-child   p:first-child    p元素作为其父类下的第一个子类元素
            :last-child
            :nth-child()  odd奇数 even偶数
                    和状态相关的：
                    :hover     鼠标悬停在上面时 pointer手型  wait等待 help问号
                    :active    鼠标按下不松开时
                    :link      鼠标未被点击时
                    :visited   被访问后    
                    设置顺序    link    visited     hover   active
        11.伪元素选择器
            ::伪元素
            ::first-letter  第一个字符
            ::first-line    第一行
            ::selection     当文本被选中时
            ::before        在当前元素内容之前
            ::after         在当前元素内容之后   content:text/url()

            选择器的优先级 优先级需要根据特性值计算，特性值越大，优先级越高，特性值相同，解析越靠后的优先级越高
            style       1000
            id选择器     100
            类选择器/属性选择器/伪类选择器  10
            元素选择器/伪元素选择器   1
            !important不计入特性值中，使用该属性的样式优先级最高

       设置css样式
                              initial;    不继承父类属性
                              inherit;    继承父类属性
        颜色单位：
                        1.关键字             red lightred
                        2.rgb(r,g,b)         0-255之间
                        3.rgba(r,g,b,a)      a: 透明度0-1 之间
                        4.十六进制  #
        尺寸单位：
                       1.px    绝对单位
                       2.em    相对单位    与当前元素的字体大小相同，默认                1em=16px
                       3.%     100%占满整个父级

       字体图标库
                 fontawesome:
                         .css
                          link设置路径 设置class属性为fa fa-图标+对应的calss
                 iconfont
                          link设置路径    设置class属性为iconfont +图标命
      .img
            特殊的行内元素
            特殊属性    height   width

       文本样式
                    font-family     本机获取或者网络下载(link引入)

                                              网络引入
                                                  @font-face {
                                                          font-family:'myfont';/*声明字体名称*/
                                                          src: url();
                                                                }
                    font-style      文本倾斜    italic 斜体   nomal
                    font-weight     文本加粗    font-weight 粗细程度    bold-700    bolder  更粗    lighter 更细
                                 b标签   strong标签也有加粗效果
                    text-transform  设置或者取消自己的改变  none 防止任何改变   uppercase大写
                                 lowercase小写   capitalize第一个字母大写   full-width占满
                    text-decoration 设置或取消文本修饰  underline下划线    overline上划线
                                 linethrow删除线    none取消所有文本修饰  
                    text-shadows    设置或者取消文本阴影    *none取消阴影   h-shadow/v-shadow水平/垂直阴影的位置    
                                 blur模糊的距离       color阴影的颜色      顺序h-shadow v-shadow blur color
                    text-indent     首行缩进     
       list-style
                    ul ol 上下外边距16px 左右内边距40px
                    ul无序
                    ol有序 reversed(boolean) 降序排列 默认升序
                    p 元素上下外边距16px
                    list-style-position 设置列表标志出现的位置  outside 外部    inside  内部
                    list-style-type     设置列表标志类型    none 无     disc实心圆   circle空心圆
                                queare实心正方形    decimal从1开始的列标    lower-roman小写罗马数字
                                upper-roman大写罗马数字     
                    list-style-image    url()   指定图片的位置  url() outside/inside    
                    list-style          [<type>][<image>][<position>]    
        line-height 行高