zoukankan      html  css  js  c++  java
  • 初识DIV+CSS

    div元素是用来为html文档内大声(block-level)的内容提供结构和背景的元素.

    cssCascading Style Sheets(层叠样式表单)的缩写,是一种用来表现htmlxml等文件样式的计算机语言.

    dic+css是网站标准(或称"web标准"),通常为了说明与html网页设计语言中的表格(table)定位方式的区别.

    简单来说:
    div是区块,是用来存放内容(文字,图片,表格等)的容器.
    css的作用是用来规定div和div中的内容的位置和样式(大小,颜色,背景,列表的样式等)
    div+css结合就可以做到把内容和样式分离.
    

    用法:
    head标签中间新建一个style的标签,里面写各种属性及属性值.

    这里先使用类选择器来完成.

    类选择器的语法是在head标签中间加下面的代码:

    <style type="text/css">
    .类选择器{
    属性名:属性值;
    属性名:属性值;
    属性名:属性值;
    }
    </style>
    

    代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>DIV+CSS</title>
        <style type="text/css">
            .div1{
                300px;
                height:300px;
                background-color:silver;
            }
        </style>
    </head>
    <body>
    <div class="div1">
        hello world!
    </div>
    </body>
    </html>
    

    style里面的样式要与div里的类名一样,才能起作用.

    用浏览器执行这段代码,效果如下:

    将文字居中,加属性:text-align:center;
    将文字上下居中,加属性:line-height:300px;
    再把字体调大一点,加属性:font-size:30px;
    

    修改后的代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>DIV+CSS</title>
        <style type="text/css">
            .div1{
                300px;
                height:300px;
                background-color:silver;
                text-align:center;
                line-height:300px;
                font-size:30px;
            }
        </style>
    </head>
    <body>
    <div class="div1">
        hello world!
    </div>
    </body>
    </html>
    

    刷新浏览器,效果如下:

    再为这段代码添加"margin-left"和"margin-top"这两个属性.

    修改后的代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>DIV+CSS</title>
        <style type="text/css">
            .div1{
                300px;
                height:300px;
                background-color:silver;
                text-align:center;
                line-height:300px;
                font-size:30px;
                margin-left:300px;
                margin-top:100px;
            }
        </style>
    </head>
    <body>
    <div class="div1">
        hello world!
    </div>
    </body>
    </html>
    

    刷新浏览器后,效果如下:

    可以看到,中间的字体处在浏览器的中间位置,而且字体距离页面的顶部还有一定的距离,
    .

    div+css的优势:
    1.符合w3c的标准
    2.搜索引擎更加友好
    3.样式的调整更加方便.内容和样式的分离,使页面和样式的调整变得更加方便.
    4.css的极大优势表现在简洁的代码.对于一个大型网站来说,可以节省大量带宽;而且,搜索引擎喜欢清洁的代码.
    5.表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
  • 相关阅读:
    Protocol Buffer技术详解(语言规范)
    google protobuf 简单实例
    advStringGrid单元格文字垂直居中
    java中两个字符串如何比较大小
    List集合去除重复对象及equals()、hashCode()方法的作用
    Delphi中使用ActiveX的一些心得
    java List去重方式及效率对比
    Visual Studio Code 调整字体大小
    用最简单的例子实现jQuery图片即时上传
    Linux下绝对经典的命令
  • 原文地址:https://www.cnblogs.com/renpingsheng/p/7276969.html
Copyright © 2011-2022 走看看