• 技术文章 >web前端 >html教程

    Div+Css视频学习笔记_html/css_WEB-ITnose

    2016-06-24 12:31:28原创753
    1.段落里面(p标签)不能嵌套div.
    2.Css:层叠式样式档,同一个标签可以用多个样式修饰。
    3.css种类:内联式,嵌入式,外部,输入。

    内联:

    aaaaaaaaaaa


    缺点:复用性差。

    嵌入:

    好处:可以控制整个网页的某些标签。

    外部:

    输入:
    在css文件中或者style标签中使用@import url(demo.css);

    4.样式规则选择器:
    html选择器,类选择器,id选择器,关联选择器,组合选择器,伪元素选择器。

    html选择器:
    p {
    font-size:50px;
    color:red;
    background-color:green;
    text-decoration:underline;
    }

    类选择器:
    //only use for p label
    p.one {
    color:red;
    font-size:2cm;
    background:green;
    }

    //use for any label
    .two {
    color:red;
    font-size:2cm;
    background:green;
    }

    adfsdf

    id选择器:
    #one {
    color:red;
    font-size:2cm;
    background:green;
    }

    adfsdf

    关联选择器:
    p em {
    color:red;
    font-size:2cm;
    background:green;
    }

    .one .two em {
    color:red;
    font-size:2cm;
    background:green;
    }


    dfdf

    组合选择器:
    p,div,a,h1,.one,#two {
    color:red;
    font-size:2cm;
    background:green;
    }

    有其中之一使用即可

    伪元素选择器:
    a:link {font-size:1cm;color:red}
    a:hover {font-size:5cm;color:green}
    a:visited{font-size:2cm;color:yellow}
    a.one:link {font-size:8cm;color:blue}
    div a.one:link{font-size:12cm;color:black}

    dfdfdfdf
    ffffff


    ffffff

    5.div+css好处:表现和内容分离,缩短改版时间,减少带宽成本。
    段落用p,标题用hx
    表格只需要用于显示数据,不用于布局。

    margin:外边距
    两种方式:
    .bianju{
    margin-left:10cm;
    margin-top:40cm;
    margin-bottom:4cm;
    margin-right:40cm;
    }

    .bianju {
    margin: 10px 20px 30px 40px;
    }

    值为auto表示自动。

    内边距:
    td {
    padding-left:4cm;
    padding-right:4cm;
    padding-top:4cm;
    padding-bottom:4cm;
    }


    p {
    float:right;//靠哪边对齐,三种right,left,none
    }

    .one {
    clear:none;
    clear:left;
    clear:right;
    clear:both;
    }

    可下载附件: Demo
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    上一篇:Div+CSS网站设计的优点_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• ajax基本介绍• 求两个纯Html之间的传值示例_html/css_WEB-ITnose• 求解博客css设置_html/css_WEB-ITnose• 前端之HTML知识点整理• float浮动
    1/1

    PHP中文网