页面中，有很多样式标签：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. 为Xcode配置Git和Github

    Xcode.Git和Github是三个伟大的编程工具.本文记录一下如何在Xcode中使用Git作为源代码控制工具,以及如何将本地的Git仓库和远程Github上的仓库集成起来. 1. 如何为新建的Xc ...

  2. Hostapd初始化失败

    Hostapd hostapd 是一个用户态用于AP和认证服务器的守护进程.它实现了IEEE 802.11相关的接入管理,IEEE 802.1X/WPA/WPA2/EAP 认证, RADIUS客户端, ...

  3. centos7使用cron任务的相关命令（与centos6有区别）

    一.cron任务的自启动相关命令 1.检测cron定时服务是否自启用 systemctl is-enabled crond.service 结果展示如下: enable表示已启用自启动 disable ...

  4. UVa 10603 Fill (BFS && 经典模拟倒水 && 隐式图)

    题意 : 有装满水的6升的杯子.空的3升杯子和1升杯子,3个杯子中都没有刻度.不使用道具情况下,是否可量出4升水呢? 你的任务是解决一般性的问题:设3个杯子的容量分别为a, b, c,最初只有第3个杯 ...

  5. 与HTTP协作的Web服务器——代理、网关、隧道

    1.虚拟主机 (1)HTTP/1.1规范允许一台HTTP服务器搭建多个Web站点: (2)在互联网上,域名通过DNS服务映射到IP地址(域名解析)之后访问目标网站,即当请求发送到服务器时,已经是以IP ...

  6. Luogu P2678 跳石头

    题目链接:Click here Solution: 最小值最大,显然二分,二分出mid后贪心去除石头,判断m次内是否可行即可 Code: #include<bits/stdc++.h> # ...

  7. [CF1093G]Multidimensional Queries 题解

    前言 DennyQi太巨了! 定义一个点\(a\),\(a_x\)表示\(a\)在第\(x\)维空间上的坐标值 题解 这题的思路珂以说非常巧妙(原谅我又用了这个"珂"), 我们知道 ...

  8. Introduction-to-Psychology Slides

    最近在网易公开课学习耶鲁大学Paul Bloom教授的<心理学导论>,英文水平有限,视频中一直没有出现PPT,无意中找到一份课件,现分享于此,大家自取! 链接:https://pan.ba ...

  9. Android使用init.rc触发脚本实现隐藏内置应用

    [实现逻辑] 通过在property_service.c中设置标志位,在设置中实现接口改变标志位, 使用init.rc中声明的服务来侦听标志位的变化,显式启动声明的服务,执行对应的脚本,把应用后缀从a ...

  10. 学习日记21、IE下的Ajax需要注意的地方

    上面这张图片我是封装了一个easyui下拉框,红框出则是动态传入的json数据,这串代码在google下运行不会有任何问题,但是在IE下运行则会提示缺少:,这是因为IE只识别json格式的数据,所以这 ...