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的更多相关文章
随机推荐
- 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- Roslyn 编译器和RyuJIT 编译器
Roslyn 编译器 https://msdn.microsoft.com/zh-cn/library/mt162308.aspx https://blogs.msdn.microsoft.com/d ...
- ms sqlserver 登录失败 错误：4064
无法打开用户默认数据库.登录失败.用户‘sa’登录失败.(Microsoft SQL Server, 错误:4064) 解决方法:解决方法:先用windows身份验证的方式登录进去,然后在 安全性=& ...
- Could not load file or assembly 'Oracle.ManagedDataAccessDTC.DLL' or one of its dependencies.
Could not load file or assembly 'Oracle.ManagedDataAccessDTC.DLL' or one of its dependencies. 不是有效的 ...
- vuex填坑记录
vuex是需要等待页面加载完成后才会更新的,如果页面点击刷新有用到vuex的地方,那么vuex会保持旧的数据,等刷新完成后vuex的数据才会重置,所以要在页面加载后再调用vuex的数据才是正确的,如果 ...
- App配置页面头部
记录一下 App配置页面头部 例 上图红色框部分就是自己配置的头部 //我的客户 "/OACustomer/Index": { title: "我的客户", h ...
- zk实现服务选举
非公平选举算法1)首先通过zk创建一个 /server 的PERSISTENT节点 2)多台机器同时创建 /server/leader EPHEMERAL子节点 3)子节点只能创建一个,后创建的会失败 ...
- UIScrollView使用stoboard自动布局
使用stoboard布局 scrollView 是有点麻烦的,首先我们往往约束好一个 scrollView 然后在添加子控件,此时都会报错,原因是, scrollView必须确定滚动范围 然后在使用V ...
- AngularJS中最重要的核心功能
以下是AngularJS中最重要的核心功能: 数据绑定: 模型和视图组件之间的数据自动同步. 适用范围: 这些对象参考模型.它们充当控制器和视图之间的胶水. 控制器: 这些Javascript函数绑定 ...
- Java transient关键字使用
1. transient的作用及其使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的 ...