Html5_css
CSS
在标签上设置style属性：
background-color: #2459a2;
height: 48px;
...
编写css样式：
1. 标签的style属性
2. 写在head里面 style标签中写样式
- id选择区
#i1{
background-color: #2459a2;
height: 48px;
}
- class选择器 ******
.名称{
...
}
<标签 class='名称'> </标签>
- 标签选择器
div{
...
}
所有div设置上此样式
- 层级选择器（空格） ******
.c1 .c2 div{
}
- 组合选择器（逗号） ******
#c1,.c2,div{
}
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }
PS:
- 优先级，标签上style优先，编写顺序，就近原则
2.5 css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />
3、注释
/* */
4、边框
- 宽度，样式，颜色 (border: 4px dotted red;)
- border-left
5、
height， 高度 百分比
width， 宽度 像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗
6、float
让标签浪起来，块级标签也可以堆叠
老子管不住：
<div style="clear: both;"></div>
7、display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
8、padding内边距 margin外边距(0,auto)
(先说margin 外边距 :
<div style='boder : 1px solid red; height:70px; background-color:black;'>
<div style='background-color:'black; height:50px;' '></div>
</div>
打div高70px，内部div50px，当没有margin时是这样：
50px的黑色框紧贴着绿色框的上边框
当margin-top：20时，就会变成黑色框的下边缘与绿色框重合，上边有20px高的地方是绿色的，因为都是会块级标签，无法margin-left/right
当有mrgin时相当于将内边框给上下平移了。不改变边框大小
)
（再来说padding（内边距）：
开始时还是上边那张图，内部div50px，外部div70px，但是当出现padding时，就出现了一些变化：
开始内部50px的div我们可以理解为它是50px的一个黑色矩形，在他的上下左右均有一个0px的边框，当出现padding-top：20px时，那么这个黑色矩形的上边框就从0px变成了20px，和原来的50px黑色矩形合在一块儿就变成了70px的一个黑色矩形，
但是实际上这个div所画出来的矩形还是50px 只是在他的上边有20px边框而已，加起来就是70px，这样看上去就像是黑色div变成了70px将外部div那个70px的绿色矩形覆盖了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签的样式也可以写在这儿 #id 找id .c1 找class 用于重用*/
/*css 的注释： */
/*id选择器：*/
/*class选择器*/
/*标签选择器*/
/*层级选择器 （标签1 空格 标签二）*/
/*组合选择器 （标签1 ， 标签二）*/
/*属性选择器*/
/*#d1{ id选择器 没反应*/
/*background-color:red;*/
/*height:50px}*/
/*.haha{ class选择器*/
/*background-color:red;*/
/*height:50px}*/
/*div{ 标签选择器*/
/*background-color:green}*/
/*div div h3{ 层级选择器*/
/*background-color:green}*/
/*}*/
/*#i1,#i2,#i3{ 组合选择器*/
/*background-color:black;*/
/*color:white}*/
/*.c1[type="text"]{height: 100px;width: 100px} 属性选择器:对选择到的标签在根据属性进行一次筛选*/
</style>
</head>
<body>
<div class="haha" id="d1">德玛西亚</div>
<div id="d2" >
<div>
<h3>艾瑞莉亚</h3>
</div>
</div>
<div class="i1" style="background-color: black; height: auto;color: white">崔丝塔娜</div>
<div class="i2">啊啊啊</div>
<div class="i3">啊啊啊</div>
<input type="text" class="c1">
<br />
<input type="password" class="c1">
</body>
</html>
Html5_css的更多相关文章
随机推荐
- SSRS-lookupSet-DataSet-分组查询
SSRS-lookupSet-DataSet-分组查询 来源:http://www.cnblogs.com/biwork/p/3621885.html 目录:http://www.cnblogs.co ...
- mysql in和exists性能比较和使用
in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询.一直以来认为exists比in效率高的说法是不准确的. 如果查询的两个表大小相当,那么用i ...
- HangFire 定时任务
https://www.cnblogs.com/ecin/p/6201262.html#%E5%9F%BA%E4%BA%8E%E9%98%9F%E5%88%97%E7%9A%84%E4%BB%BB%E ...
- iOS Runtime常用方法整理
关于runtime的学习网上有很多博客,在学习之前也查过很多资料,觉得南峰子老师博客中对 runtime 的讲解挺详细的,博客地址:http://southpeak.github.io/categor ...
- linux-2.6.22.6/Makefile:416: *** mixed implicit and normal rules: deprecated syntax
今天在按照韦东山大哥的教程流程编译内核的时候出现了这个问题 linux-2.6.22.6/Makefile:416: *** mixed implicit and normal rules: ...
- vue2.0：（八）、外卖App弹窗部分知识点总结
本篇文章是对外卖App弹窗部分知识点的总结. 知识点一:如何从接口取出不同的图片. 答: 1.header.vue: 代码: <ul v-if="seller.supports&quo ...
- hashlib（加盐）回炉练习
简介: 用于加密相关的操作,代替了md5模块和sha模块,主要提供SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法.在python3中已经废弃了md5和sha模块,简单说明 ...
- Linux下常用的数据恢复工具
一.数据删除 命令:rm -rf,将任何数据直接从硬盘删除,且没有任何提示 建议做法: 把命令参数放到后面:rm -rfi 将删除的东西通过mv命令移动到系统下的/temp目录下,然后写个脚 本定期执 ...
- SQL Server AlwaysON从入门到进阶（6）——分析和部署AlwaysOn Availability Group
前言: 本节是整个系列的重点文章,到现在,读者应该已经对整个高可用架构有一定的了解,知道独立的SQL Server实例和基于群集的SQL Server FCI的区别.上一节已经介绍了如何安装SQL ...
- selenium+python之python多线程
程序.进程及线程的区别 计算机程序是磁盘中可执行的二进制数据(或者其他类型)他们只有在被读取到内存中,被操作系统调用才开始他们的生命周期. 进程是程序的一次执行,每个进程都有自己的地址空间,内存,数据 ...