页面中，有很多样式标签：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;
　　　　　　width: 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="width: 100px;height: 48px;background-color: red;float: left"></div>

</body>

</html>

CSS样式div的更多相关文章

  1. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  2. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  3. HTML前端——CSS样式

    使用CSS样式的方式: HTML<!DOCTYPE> 声明标签 内链样式表<body style="background: green; margin: 0; paddin ...

  4. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. HTML标签_增加css样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js改变css样式

      CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...

  7. div+css样式

    Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...

  8. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

  9. div+css样式命名规则，值得收藏

    div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...

随机推荐

  1. 关于android studio从2.3升级到3.0以上可能会遇到的问题

    请参考链接: http://blog.csdn.net/hylczp/article/details/60137958 gradle-3.3-all网盘下载地址: 链接:http://pan.baid ...

  2. Apache ab测试工具使用方法（无参、get传参、post传参）(转)

    转自Apache ab测试工具使用方法(无参.get传参.post传参) Ab测试工具是apache自带的测试工具,具有简单易上手的特性,下面我总结一下我的使用方法,首先去官方下载apache程序包, ...

  3. iconv - 字符集转换

    总览 (SYNOPSIS) iconv [-f encoding] [-t encoding] [inputfile ...] 描述 (DESCRIPTION) iconv 程序 把 文本 从 一种 ...

  4. websocket之拨云见雾

    websocket是基于http相应的特性弥补其不足(就是个socket,不再是一次请求一次相应) 但缺点就是只有在版本较高的浏览器才支持websocket. 浏览器: <script type ...

  5. Win7 Linux双系统，恢复Linux启动项

    在一台电脑上安装Win7 Centos双系统,先安装Win,再安装Centos7.装完后,丢失Linux启动项. 恢复步骤,下载EasyBCD,添加新条目,操作系统选择Linux/BSD,类型选择GR ...

  6. Centos6 修复grub损坏故障

    1.查看系统中的/boot/grub/grub.conf # grub.conf generated by anaconda # # Note that you do not have to reru ...

  7. python 重学

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

  8. elasticsearch基本Restful操作

    1.添加数据curl -H "Content-Type: application/json" -XPUT 'http://localhost:9200/megacorp/emplo ...

  9. Linux缺少动态连接库.so--cannot open shared object file: No such file or directory

    1 Liunx安装报错时,缺少动态链接库时,形式如下: /usr/local/libexec/gcc/x86_64-unknown-liunx-gnu/4.8.2/cc1: error while l ...

  10. vertical-greenplum

    https://github.com/sumitchawla/docker-vertica You can either pull the image from Docker Registry usi ...