页面中，有很多样式标签：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. Linux往log中写日志

    void writelog(const char* log) { time_t tDate; struct tm* eventTime; time(&tDate);//得到系统当前时间 //将 ...

  2. Vue示例教程

    <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...

  3. ARM伪指令和协处理器访问指令

    伪指令本身没有对应的机器码 .global声明全局符号,点事GUN汇编的特点 .data定义数据段 .equ DA #0x89 定义宏 .align 4 4字节对齐 mov 指令里的立即数只能是8位的 ...

  4. squid代理简介

    squid代理 简单介绍一下正向代理和反向代理 标准代理:缓存静态页面,但是要实现这种方式必须在内部主机的浏览器内指明代理服务址和端口. 透明代理:不需要指明代理服务器的IP和端口 二)反向代理 可以 ...

  5. Linux抓包与扫描工具

    一.nmap扫描工具介绍: 1.安装nmap,如下: 2.检查目标主机所开启的TCP服务: 3.检查x.x.x.x/24网段内哪些主机开启了FTP.SSH服务 二.使用tcpdump分析 1.执行FT ...

  6. 微服务中的rpc 请求写法

    1.采用restmplate 的postForObject RestTemplate template = new RestTemplate(); HttpEntity<List<Map& ...

  7. java ArrayList迭代过程中删除

    第一种迭代删除方式: 第二种迭代删除方式: 第三种迭代删除: 第四种迭代删除: 第五种迭代删除: 第六种: ArrayList中remove()方法的机制,首先看源码: 真正的删除操作在fastRem ...

  8. Spring的概述

    1 Spring是什么? Spring是分层的Java SE/EE应用的full-stack的轻量级开源框架,以IOC(控制反转)和AOP(面向切面编程)为内核,提供了展现层SpringMVC和持久层 ...

  9. canvas实现圆角图片 （处理原图是长方形或正方形）

    /** * 生成图片的缩略图 * @param {[type]} img 图片(img)对象或地址 * @param {[type]} width 缩略图宽 * @param {[type]} hei ...

  10. python基础31[常用模块介绍]

    python基础31[常用模块介绍]   python除了关键字(keywords)和内置的类型和函数(builtins),更多的功能是通过libraries(即modules)来提供的. 常用的li ...