• CSS样式div


    页面中,有很多样式标签:div标签,对标签定位的地方有:

      1.<head>标签里加<style>标签,在<style>标签中添加样式。如:

      <style>
            .c1{
                background-color: pink;
                height: 100px;
                width: 100px;
            }
        </style>

      2.在<div>标签里直接加sytle属性,在属性中添加style样式。如:<div style=‘xxx’>

      3.在head标签里添加<link>标签,如:  <link rel='stylesheet' href='xxx.css'>

    对div定位的方式分:

    1.id选择器:用#标记,对id为il块进行定义样式,首先保证body中必须定义一个id='il'。注:一个html页面中,不可用存在相同的Id

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #il{
                border: 1px red solid;
                height: 20px;
                width: 20px;
                background-image: url('http://ui.imdsx.cn/static/image/icon.png');
                background-repeat: no-repeat;
                background-position: 0 0;
            }
        </style>
    </head>
    <body style="margin: 0 auto">
        <div id="il"></div>    #必须在body中定义一个id为il
    
    
    </body>
    </html>

    预览图如下:

    2.class选择器。用点.来标记,在body中对class属性进行定义,然后再style样式里定义属性的样式。如图:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1{
                height: 100px;
                width: 100px;
                border: 1px red solid;
                text-align: center;
                line-height: 100px
            }
    </style>
    </head>
    <body style="margin: 0 auto">
        
        <div class="c1">1</div>   #必须在body中定义class的属性
    
    </body>
    </html>

    显示样式如图:

    3.标签选择器。在style里定义标签后,这个样式将会影响所有的相同标签的样式,只是假如有其他Id或class属性同时定义时,标签选择器的优先级将低于id或class的定义方式。假如在style定义一个div{}的标签,那么body中所有的div标签将会应用该样式。

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{                             #这里定义标签选择器div,在body里的所有的div标签将会受到影响,但是当div标签里有定义id或class时,div定义的样式优先级低于id或class标签的样式
                height: 100px;
                width: 100px;
                border: 1px red solid;
                background-color: greenyellow;
            }
         .c1{
          height: 50px;
           50px;
          background-color: greenyellow;
          border: 1px solid rebeccapurple;
         }
    </style> </head> <body style="margin: 0 auto"> <div> </div> <div class="c1"></div> #这里定义class="c1",因此在style里.c1的样式定义优先级要高于style中div的样式 <div style=" 100px;height: 48px;background-color: red;float: left"></div> </body> </html>
  • 相关阅读:
    今天不说技术,说说中国的十二生肖告诉了我们什么?这就是我们的祖先!
    JS函数的原型及对象,对象方法,对象属性的学习
    C#3.0特性之列表对象的赋值更容易
    读本地图像文件,在上面写一些文件,再传到WWW服务器上
    【Visual C++】vs2008/2005正确打开vs2010所创建项目的几种方法
    高级Swing容器(一)
    助你成长为优秀的程序员 杰出的软件工程师、设计师、分析师和架构师
    Root Pane Containers(一)
    【Visual C++】关于无法打开包括文件:“StdAfx.h”或者意外结尾的错误解决方案
    20年工作经验的架构师写给程序员的一封信
  • 原文地址:https://www.cnblogs.com/fancyl/p/9214446.html
Copyright © 2020-2023  润新知