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的更多相关文章
随机推荐
- ueditor 编辑
1.net config.json imageUrlPrefix
- 【数据结构(C语言版)系列二】 栈
栈和队列是两种重要的线性结构.从数据结构角度看,栈和队列也是线性表,但它们是操作受限的线性表,因此,可称为限定性的数据结构.但从数据类型角度看,它们是和线性表大不相同的两类重要的抽象数据类型. 栈的定 ...
- [POI2008]海报PLA
Description N个矩形,排成一排. 现在希望用尽量少的矩形海报Cover住它们. Input 第一行给出数字N,代表有N个矩形.N在[1,250000] 下面N行,每行给出矩形的长与宽.其值 ...
- [ZPG TEST 108] blockenemy【树形dp】
T3:blockenemy blockenemy.pas/in/out 128M 1s 你在玩电子游戏的时候遇到了麻烦...... 你玩的游戏是在一个虚拟的城市里进行,这个城市里有n个点,都从0~n- ...
- Xcode配置SVN详细步骤
转载:http://blog.csdn.net/weiqubo/article/details/8288635 Xcode 默认自带Git 与 SVN,我们本篇介绍SVN的详细配置步骤如下: 1. ...
- 200 Number of Islands 岛屿的个数
给定 '1'(陆地)和 '0'(水)的二维网格图,计算岛屿的数量.一个岛被水包围,并且通过水平或垂直连接相邻的陆地而形成.你可以假设网格的四个边均被水包围.示例 1:11110110101100000 ...
- yum 安装报错：*epel: mirrors.aliyun.comError: xzcompressionnot available
环境背景:epel源下载地址: http://mirrors.aliyun.com/Centos内核内核版本[root@nfs01 ~]# uname -r2.6.32-642.el6.x86_64= ...
- 转】在Ubuntu中安装Redis
不多说,直接上干货! 原博文出自于: http://blog.fens.me/category/%E6%95%B0%E6%8D%AE%E5%BA%93/ 感谢! 在Ubuntu中安装Redis R利剑 ...
- [转]Getting Started with ASP.NET Web API 2 (C#)
http://www.asp.net/web-api 本文转自:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web- ...
- Windowsforms 中对文件操作
文件及文件夹操作: 引用命名空间:using system .IO; 1.File类: 创建:File.Create(路径);——返回FileStream FileStream fs = File.C ...