CSS样式div
页面中,有很多样式标签: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的更多相关文章
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
- 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...
- HTML前端——CSS样式
使用CSS样式的方式: HTML<!DOCTYPE> 声明标签 内链样式表<body style="background: green; margin: 0; paddin ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- HTML标签_增加css样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js改变css样式
CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...
- div+css样式
Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...
- div+css样式表的id,class的常用命名规则
div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...
- div+css样式命名规则,值得收藏
div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...
随机推荐
- 20180115-Xcode创建多个工程协同开发
今天研究了一下在Xcode中创建多个工程,达到模块化的目的的同时,实现多个相似项目的协同开发,最主要的是可以实现多工程连编.项目的效果如下: 接下来创建一个这样的项目,以及他们之间的通信 1.建一个文 ...
- 从标准输入读取一行数组并保存(用的是字符串分割函数strtok_s() )
首先介绍字符串分割函数: char *strtok_s( char *strToken, //字符串包含一个标记或一个以上的标记. const char *strDelimit, //分隔符的设置 c ...
- Librepilot-创建UAVObject及编译到飞机端和地面站端的步骤
1. 创建UAVObject描述文件(xx.xml),并存放到\librepilot\shared\uavobjectdefinition目录中:2. 在\librepilot\flight\targ ...
- 007-zabbix Server 4.0 监控TCP的12种状态
大家对TCP三次握手比较熟悉了,都知道当发生DOSS攻击时,客户端发送SYN给服务端后,服务端响应SYN+ACK,此时客户端就不回应服务端ACK啦(如果正常建立三次握手客户端会回应ACK,表示三次握手 ...
- Linux下单机部署ELK日志收集、分析环境
一.ELK简介 ELK是elastic 公司旗下三款产品ElasticSearch .Logstash .Kibana的首字母组合,主要用于日志收集.分析与报表展示. ELK Stack包含:Elas ...
- 安装CRMEasy步骤
生成CRMEasy安装包的步骤: 所需文件: InstallShieldExpress软件 CRMEasy.iwz工程文件 XP系统(虚拟机即可) 安装 CRMEasy 步骤: 1.windows X ...
- Codeforces Round #605 (Div. 3) 比赛总结
比赛情况 2h才刀了A,B,C,D.E题的套路做的少,不过ygt大佬给我讲完思路后赛后2min就AC了这题. 比赛总结 比赛时不用担心"时间短,要做多快",这样会匆匆忙忙,反而会做 ...
- java面向对象2-封装
2 封装 封装:是指隐藏对象的属性和实现细节,仅对外提供公共访问方式,面向对象三大特点之一.好处: 防止数据被任意篡改,提高安全性 隐藏了实现细节,仅暴露方法 如何实现封装? 使用private关键字 ...
- ES6---new Promise()讲解(尤其注意里面的参数resolve、reject)
直接打印出来看看吧,console.dir(Promise). 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.cat ...
- 【JZOJ2156】【2017.7.10普及】复仇者vsX战警之训练
题目 月球上反凤凰装甲在凤凰之力附身霍普之前,将凤凰之力打成五份,分别附身在X战警五大战力上面辐射眼.白皇后.钢力士.秘客和纳摩上(好尴尬,汗). 在凤凰五使徒的至高的力量的威胁下,复仇者被迫逃到昆仑 ...