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的更多相关文章
随机推荐
- 洛谷 P2617 Dynamic Rankings || ZOJ - 2112
写的让人看不懂,仅留作笔记 静态主席树,相当于前缀和套(可持久化方法构建的)值域线段树. 建树方法:记录前缀和的各位置的线段树的root.先建一个"第0棵线段树",是完整的(不需要 ...
- ACM_查找ACM(加强版)
查找ACM(加强版) Time Limit: 2000/1000ms (Java/Others) Problem Description: 作为一个acmer,应该具备团队合作能力和分析问题能力.给你 ...
- openstack知识---hypervisor
hypervisor Hypervisor是一种运行在物理服务器和操作系统之间的中间软件层,可允许多个操作系统和应用共享一套基础物理硬件,因此也可以看作是虚拟环境中的“元”操作系统,它可以协调访问服务 ...
- 员工管理系统（集合与IO流的结合使用 beta4.0 ObjectInputStream/ ObjectOutputStream）
package cn.employee_io; import java.io.Serializable; public class Employee implements Serializable{ ...
- java问题收集
2014-10-27 构造器最好保留一个无参的,否则一些框架调用初始化时,会报错 星期三,2013年11月6日 volatile关键字 : 1. 与synchronized几乎相同,但是vol ...
- linux系统添加java和glassfish环境变量
第一种方法: 可以在/etc/profile里面增加 #java环境变量 JAVA_HOME=/home/harries/develop/jdk1.6.0_23export JRE_HOME=/hom ...
- canvas 保存状态
1.保存和恢复绘图状态: 在绘制图形时,难免会重复使用某个样式,甚至有时会在不同颜色之间来回切换. 那么为了减少代码冗余,我们可以调用画布中的save()方法,来帮我们 保存一些样式和属性,这样我们就 ...
- hibernate与struts2整合中出现问题以及一级缓存查询数据在业务层问题
直接上问题: org.hibernate.HibernateException: HHH000142: Javassist Enhancement failed: cn.xxx.pojo.Custom ...
- EL表达式、JSTL
EL表达式 一.简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段. ...
- axis2客户端的几种调用方式
(1)使用RPC方式调用WebService // 使用RPC方式调用WebService RPCServiceClient serviceClient = new RPCServiceClient( ...