页面中，有很多样式标签：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. MySQL的简单条件判断语句

    在MySQL中条件判断语句常用于数据转换,基于现有数据创建新的数据列,使用场景还是比较多. 基础样式: CASE WHEN`条件`THEN`结果` ELSE`默认结果` END 在同一条判断语句中可以 ...

  2. 在django项目中，单独运行python文件

    在from models import * 上面加上以下代码 import os; os.environ.setdefault("DJANGO_SETTINGS_MODULE", ...

  3. [转载]克服FPGA I/O引脚分配挑战--xilinx系列

    转载走,放到自己的分类中好了 原文地址:I/O引脚分配挑战--xilinx系列">克服FPGA I/O引脚分配挑战--xilinx系列作者:方槍槍 http://www.eefocus ...

  4. Qualcomm_Mobile_OpenCL.pdf 翻译-8-kernel性能优化

    这章将会说明一些kernel优化的小技巧. 8.1 kernel合并或者拆分 一个复杂的应用程序可能包含很多步骤.对于OpenCL的移植性和优化,可能会问需要开发有多少个kernel.这个问题很难回答 ...

  5. 【转】Linux iptables 详解

    转自:https://www.cnblogs.com/qwertwwwe/p/9452370.html 最近搭一个框架需要用到iptables做映射,学习了下iptables的原理,总结下方便以后查~ ...

  6. CentOS 7系统yum仓库搭建方法

    YUM: Yellowdog Update Modifier,rpm的前端程序,可解决软件包相关依赖性,可在多个库之间定位软件包,up2date的替代工具,是为了进一步简化RPM管理软件难度以及自动分 ...

  7. 017-zabbix_proxy分布式监控部署

    一.proxy分布式监控介绍 来源于zabbix官网: https://www.zabbix.com/documentation/3.4/zh/manual/distributed_monitorin ...

  8. Codeforces1238E. Keyboard Purchase（状压dp + 计算贡献）

    题目链接:传送门 思路: 题目中的m为20,而不是26,显然在疯狂暗示要用状压来做. 考虑状压字母集合.如果想要保存字母集合中的各字母的顺序,那就和经典的n!的状态的状压没什么区别了,时间复杂度为O( ...

  9. Hash基础

    BKDR Hash: 选取恰当的进制,可以把字符串中的字符看成一个大数字中的每一位数字,不过比较字符串和比较大数字的复杂度并没有什么区别 首先不要把任意字符对应到数字0,比如假如把a对应到数字0,那么 ...

  10. Vue原理解析——自己写个Vue

    Vue由于其高效的性能和灵活入门简单.轻量的特点下变得火热.在当今前端越来越普遍的使用,今天来剖析一下Vue的深入响应式原理. tips:转自我的博客唐益达博客,此为原创.转载请注明出处,原文链接 一 ...