04003_CSS
1、DIV相关的技术
（1）DIV是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用，主要用于页面的布局；
（2）Span是一个html标签，一个内联元素（显示一行）。它单独使用没有任何意义，必须结合CSS来使用，主要用于对括起来的内容进行样式的修饰；
2、CSS的作用
（1）HTML：它是整个网站的骨架；
（2）CSS：它是对整个网站的骨架的内容进行美化（修饰）。
3、CSS如何使用
（1）语法和规范
（2）选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
（3）CSS基本选择器
①元素选择器：所有相同
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
div{
font-size: 30px;
color: pink;
}
</style>
</head>
<div>元</div>
<div>素</div>
<div>选</div>
<div>择</div>
<div>器</div> <body>
</body> </html>
运行结果：
②类选择器：部分相同
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.div2 {
font-size: 30px;
color: pink;
}
</style>
</head>
<div class="div2">类</div>
<div>选</div>
<div class="div2">择</div>
<div>器</div> <body>
</body> </html>
运行结果：
③id选择器：单个
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#div5 {
font-size: 30px;
color: pink;
}
</style>
</head> <body>
<div>id</div>
<div>选</div>
<div>择</div>
<div id="div5">器</div>
</body> </html>
运行结果：
（4）CSS其他选择器
①层级选择器
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p {
font-size: 30px;
color: pink;
}
</style>
</head> <body>
<div>层</div>
<div>级</div>
<div>
<p>选</p>
</div>
<div>择</div>
<div>器</div>
</body> </html>
运行结果：
②属性选择器
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text']{
background: red;
} input[type='password']{
background: blue;
}
</style>
</head> <body>
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="password" />
</body> </html>
运行结果：
4、CSS引入方式
（1）内部引入
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>内部引入元素选择器</title>
<style type="text/css">
div {
font-size: 30px;
color: pink;
}
</style>
</head>
<div>元</div>
<div>素</div>
<div>选</div>
<div>择</div>
<div>器</div> <body>
</body> </html>
运行结果：
（2）行内引入
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>行内引入元素选择器</title>
<style type="text/css">
div {
font-size: 30px;
color: pink;
}
</style>
</head>
<div>元</div>
<div>素</div>
<div>选</div>
<div>择</div>
<!--就近原则，谁近谁生效-->
<div style="font-size: 20px;color: blue;">器</div> <body>
</body> </html>
运行结果：
（3）外部引入
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>外部引入元素选择器</title>
<link rel="stylesheet" href="style.css" type="text/css"> <body>
<div>元</div>
<div>素</div>
<div>选</div>
<div>择</div>
<div>器</div>
</body> </html>
在同一目录，新建style.css
div {
font-size: 30px;
color: pink;
}
运行结果：
5、CSS浮动
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one {
border: 1px solid red;
width: 300px;
height: 150px;
float: left;
} #two {
border: 1px solid black;
width: 300px;
height: 150px;
} #three {
border: 1px solid blue;
width: 300px;
height: 150px;
}
/*清除浮动*/ #clear {
clear: both;
}
</style>
</head> <body>
<div id="one"></div>
<div id="clear"></div>
<div id="two"></div>
<div id="three"></div>
</body> </html>
运行结果：
6、CSS盒子模型
（1）手机---内容（content）；
（2）泡沫---padding；
（3）手机与包装盒的间距---boder；
（4）与其他盒子的间距--margin；
04003_CSS的更多相关文章
随机推荐
- _bzoj3224 Tyvj 1728 普通平衡树【Splay】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3224 保存splay模版 一刻不停写了一个小时多一点,幸好一遍过了!(其实带着freopen ...
- [ZPG TEST 114] 阿狸的英文名【水题】
1. 阿狸的英文名 阿狸最近想起一个英文名,于是他在网上查了很多个名字.他发现一些名字可以由两个不同的名字各取一部分得来,例如John(约翰)的前缀 “John”和Robinson(鲁滨逊) ...
- Minimal Ratio Tree HDU - 2489
Minimal Ratio Tree HDU - 2489 暴力枚举点,然后跑最小生成树得到这些点时的最小边权之和. 由于枚举的时候本来就是按照字典序的,不需要额外判. 错误原因:要求输出的结尾不能有 ...
- [转]ASP.NET MVC 3 Application Upgrader
本文转自:http://aspnet.codeplex.com/releases/view/59008 Recommended Download ASP.NET MVC 3 Applicat ...
- canvas 保存状态
1.保存和恢复绘图状态: 在绘制图形时,难免会重复使用某个样式,甚至有时会在不同颜色之间来回切换. 那么为了减少代码冗余,我们可以调用画布中的save()方法,来帮我们 保存一些样式和属性,这样我们就 ...
- 最实用解决tomcat startup.bat 一闪而过
1.直接到tomcat 的解压路径中找到log日志,eg:D:\tomcat\apache-tomcat-7.0.73\logs 查看 catalina 这个日志文件,可以清除的定位错误原因:一般可能 ...
- 关于docker入门教程
简介:docker入门教程 docker入门教程翻译自docker官方网站的Docker getting started 教程,官方网站:https://docs.docker.com/linux/s ...
- iOS定位--CoreLocation框架
CoreLocation框架的使用 // 首先导入头文件 #import <CoreLocation/CoreLocation.h> CoreLocation框架中所有数据类型的前缀都是C ...
- Int 1的实现过程 (一)
闲话少说,直奔主题,首先OD载入一个程序,然后执行一下单步(调试器会将TF置1) 此时,CPU会在基于当前线程上下文的环境中,进入int 1的中断门,也就是KiTrap01 kd> !idt - ...
- 开源一个一个NodeJS 代理服务器扫描工具，可以用来***
鉴于我朝很多网站访问不了,google等就是大悲剧,之前一直在用VPN,但是公司内网VPN被封,诸多工具也惨遭毒手..我辈怎能容忍. 目前只有代理没有被封,于是搞了个代理扫描工具并开源: https: ...