页面中，有很多样式标签：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. 状态码是canceled

    timeout : 1000 给ajax配置如上属性 $.ajax({ type:"post", url:"pro/savePro", timeout : 10 ...

  2. 制作jar包到本地仓库

    转载地址:http://blog.csdn.net/yzllz001/article/details/54529606 项目要用到支付宝的扫码支付,后台使用的maven 问了客服 官方目前没有 mav ...

  3. w、who、last、lastbon、lastlog显示登录命令用法

    一.w 显示已登录用户信息和用户正在执行命令 1.命令功能 w可以显示已登录系统的用户,并显示用户正在执行的命令 2.语法格式 w option user 选项说明 选项 选项说明 -h 不显示前两行 ...

  4. multi gpu inference with tfserving or keras

    在tfserving上,目测只能在每个gpu上起docker    https://github.com/tensorflow/serving/issues/311#issuecomment-4801 ...

  5. Codeforces 964 等比数列逆元处理 贪心删偶数度节点

    A B C 注意sum要在mod范围内 且不能用/a*b来推 #include<bits/stdc++.h> using namespace std; typedef long long ...

  6. 隐马尔可夫模型中基于比例因子的前向算法(java实现)

    直接上干货哈,其他子算法,后续补上.                                                                  System.out.print ...

  7. Windows如何下载nginx软件包到linux系统虚拟机上

    1.打开浏览器,输入“nginx下载官网” 2.点击nginx:download 3.找到你想下载的nginx软件包 4.点击你所需要的版本之后(我点击的是nginx-1.12.2版本,根据自己的需要 ...

  8. 风控MIS那些事

    信贷风险管理应基于数据进行决策,MIS则是通过对数据的加工与展示,给决策者提供参考. 管理信息系统(ManagementInformation System,MIS)是进行信息的 收集.传输.加工.储 ...

  9. Python Number(数字) Ⅱ

    Python math 模块.cmath 模块 Python 中数学运算常用的函数基本都在 math 模块.cmath 模块中. Python math 模块提供了许多对浮点数的数学运算函数. Pyt ...

  10. vue项目中监听sessionStorage值发生变化

    首先在main.js中给Vue.protorype注册一个全局方法, 其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’, 然后创建一个StorageEv ...