css(1)

时间:2020-07-30 03:24:56 来源:

【摘要】 css(1)考必过小编为大家整理了关于css(1)的信息,希望可以帮助到大家!

css(1)

标签:style   边框   签名   table   rip   bsp   直接   ant   number   


前端三要素:
    html:木偶
    css:化妆
    javascript:动态展示(跳舞)


css:
    1.什么是css?
        cascading style sheets
        层叠样式表
        
    2.css的语法
        1.属性名和属性值之间使用:隔开
            多对属性之间使用;隔开
            最后一对属性可以不加分号
            id="one"
            class=‘one‘
            style=‘根据css语法设置‘
            title=‘one‘

            <p style="width:100px;height:100px;color:red;"></p>

            <style>
                选择器{
                    width:100px;
                    height:100px;
                    color:red
                    ...
                }
            </style>

            <p></p>

        2.速记写法
            简写形式
            border:1px solid red;
                border-width:1px;
                    border-top-width
                    border-left-width
                    border-right-width
                    border-bottom-width

                border-style
                    border-top-style
                    border-bottom-style
                    。。。。
                border-color

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

        
        padding-top:10px;
        padding-left:10px;
        padding-right:10px;
        padding-bottom:10px;

    -->
    padding:10px;//上下左右均为10px
    padding:10px 20px;//上下10px 左右20px
    padding:10px 20px 30px;//上10px 左右20px 下30px

    padding:10px 20px 30px 40px;//上 右 下 左

    margin:两个盒子之间的距离

        3.注释
            1.注释写法
                /*注释内容*/
            2.注释的作用
                解释说明
                更好的维护和管理
            3.注释不能嵌套使用
                <!--注释
                    <!--inner-->
                内容-->

                /*
                    /**/
                */
    3.html中引入css的方式
        1.行内样式
            style属性
            <p style=‘‘></p>
        2.内联样式
            style标签
            <style>
                p{
                    css语法
                }
            </style>

        3.外部引入
            创建.css为后缀名的文件
            link标签:先加载css 写在style后面 head里面
            @import url():不建议使用,先加载html  写在style里面

引入css的优先级问题:
    行内样式>内联样式/外部引入

    就近原则:哪一种设置方式更靠近元素,哪一种方式的优先级更高

    4.选择器
        标签选择器/元素选择器
            根据标签名称选择一类元素

        id选择器:
            通过id属性选择一个元素
            #value
            <p id=‘one‘></p>

            #one
        类选择器:
            class
            .value
        普遍选择器:
            *:所有
        后代选择器:
            selector1>selector2:选择直接子元素
            selector1 selector2:选择所有后代元素,包含孙代元素


        兄弟选择器:
            +:选择当前元素之后的一个兄弟元素
#one+p
            ~:选择当前元素之后的所有兄弟元素
#one~*
#one~p
        属性选择器:
            [class]:选择当前页面中具有class属性的元素
            [class=‘one‘]:选择当前页面中具有class属性,并且属性值为one的元素
            [class~=‘one‘]:选择当前页面中具有class属性,并且属性值之一为one的
            [class^=‘o‘]:选择当前页面中具有class属性,并且属性值以o字符开头
            [class$=‘o‘]:选择当前页面中具有class属性,并且属性值以o字符结尾
            [class*=‘o‘]:选择当前页面中具有class属性,并且属性值中包含o字符
        多选择器:
            使用逗号隔开多个选择器

            p    
            p

            p{
                width:100px;
                height:100px
            }
            p{
                width:100px;
                height:100px;
            }
                -->
            p,p{
                width:100px;
                height:100px;
            }

        #one,.two,p{

        }

        <p>
            <ul class=‘one‘>
                li*3
            </ul>
            <ul class=‘two‘>
                li*3
            </ul>
        </p>
        <p class=‘two‘></p>

        

        p .one,p .two{

        }

        table tr td

        组合选择器:
            将多个选择器组合到一起使用
            p.one{

            }


            <p class="one"></p>
            <p class=‘two‘></p>
            <p class=‘three‘></p>
            <p class=‘one‘></p>

        伪类选择器:
            :伪类名称

            :first-child
            :last-child
            :nth-child(number/odd/even)

            和状态相关的:
            :hover:当鼠标悬停在元素上时
            :active:当鼠标按下时
            :link:当鼠标未被点击时
            :visited:当点击过之后的一个状态

    设置顺序:
        link-》visited--〉hover--》active

        伪元素选择器:
            <p>hello</p>

            ::伪元素的名称
            ::first-letter:第一个字符
            ::first-line:第一行
            ::seclection:文本被选中时

            ::before:在当前元素内容之前
                content:text/url()
            ::after:在当前元素内容之后

                
----------------------------------------

选择器优先级:
    !important:不计入特性值中,使用了该属性的样式优先级最高,不建议经常使用
    
    优先级需要根据特性值来计算,特性值越大,优先级越高,特性值相同,越靠下的优先级越高

    style属性中:1000
    id选择器:100
    类选择器/属性选择器/伪类选择器:10
    元素选择器/伪元素选择器:1

    p#one{//number=101

    }































css(1)

标签:style   边框   签名   table   rip   bsp   直接   ant   number   

以上就是css(1)的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

上一篇      下一篇
前端相关推荐 更多>>
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net