美文网首页
求职之路复习篇_Css

求职之路复习篇_Css

作者: HowieW | 来源:发表于2017-02-16 14:24 被阅读0次

    1.Css的简介:

    *css: 层叠样式表

    **层叠:一层一层
    样式表:很多的属性和属性值
    *是页面显示效果更加好
    *Css将网页的内容和和显示样式进行分离,提高了显示功能。

    2.Css和html的结合方式(四种):

    1.在每个html标签上面都有一个属性style

    <div style="background-color : red ;color : green;">求职之路复习篇-Css样式</div>
    

    2.使用html的一个标签实现<style>标签,写在head里面

    <style type="text/css">
    div{
    background-color : red ;
    color : green;
    }
    ..........
    <div>求职之路复习篇-Css样式</div>
    

    3.在style标签里面,使用语句。

    @import url(jianshu.css);
    

    缺点:某些浏览器下不起作用。
    4.推荐:使用头标签link,引入外部css文件

    <link rel="stylesheet" type="text/css" href="jianshu.css">
    

    3.Css的优先级

    1.从上到下,由内而外。优先级由低到高。
    2.后加载的优先级高
    编码规范:
    1.选择器名称{属性名:属性值 ;属性名:属性值1 属性值2......}

    • 属性和属性之间用分号
    • 属性和属性值之间用冒号
    • 属性值和属性值之间用空格

    4.Css选择器:需要对哪个标签里面的数据进行操作

    1.标签选择器

    <style type="text/css">
    div{
    background-color : red ;
    color : green;
    }
    p{
    background-color : white ;
    }
    ..........
    <div>求职之路复习篇-Css样式</div>
    <p>求职之路复习篇-Css选择器</p>
    

    2.class选择器:每个html标签都有一个属性class

    <style type="text/css">
    p.jianshu{
    background-color : white ;
    }
    ..........
    <p class="jianshu">求职之路复习篇-Css选择器</p>
    

    3.id选择器:每个html标签上面都有一个属性id

    <style type="text/css">
    p#jianshu{
    background-color : white ;
    }
    ..........
    <p id="jianshu">求职之路复习篇-Css选择器</p>
    

    5.Css选择器的优先级:style>id选择器>class选择器>标签选择器

    6.Css的扩展选择器

    1.关联选择器:div空格p
    注:需求:设置div标签里面p标签的样式,嵌套标签里面的样式

    <style type="text/css">
    div p{
    background-color : white ;
    }
    ..........
    <div><p>求职之路复习篇-Css选择器1</p></div>
    <p>求职之路复习篇-Css选择器2</p>
    

    2.组合选择器
    注:需求:把div和p标签设置成相同的样式,把不同的标签设置相同的样式

    div,p{
    background-color : orange ;
    }
    ..........
    <div>求职之路复习篇-Css选择器1</div>
    <p>求职之路复习篇-Css选择器2</p>
    

    3.伪元素选择器:css里面提供了一些定义好的样式,可以拿来使用
    注:超链接
    原始状态 鼠标放上状态 点击状态 点击后状态
    :link :hover :active :visited

    <style type="text/css">
    a:link{
    background-color : white ;
    }
    a:hover{
    background-color : red ;
    }
    .......
    <a href=“www.tj-kingdee.com”>求职之路复习篇-Css选择器1<a>
    

    后续持续更新......

    不正经的程序员

    相关文章

      网友评论

          本文标题:求职之路复习篇_Css

          本文链接:https://www.haomeiwen.com/subject/kbzcwttx.html