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的更多相关文章
随机推荐
- 题解报告：hdu1219AC Me
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1219 Problem Description Ignatius is doing his homewo ...
- Android Dialogs(1)Dialog简介及Dialog分类
Dialogs A dialog is a small window that prompts the user to make a decision or enter additional info ...
- IOS 绘制PDF -转
-(void)createPdf:(UIImage *)img andText:(NSString *)text{ NSArray *paths = NSSearchPathForDirectorie ...
- IOS应用开发版本控制工具之Versions使用，iosversions
Versions版本控制工具破解版(Versions.zip)下载请见本博文附件.下载后在MAC安装完以后,图标是莲花状.见下图: 双击运行如下图: 点击Repository,连接SVN服务器R ...
- python 字符串的split()函数详解（转）
作者:宋桓公 出处:http://www.cnblogs.com/douzi2/ 如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同 ...
- AJPFX关于通过索引获取最大值的思路
/*** 通过索引获取最大值***/public class Test1 { public static void main(String[] args) { ...
- $ ssh -T git@github.com ssh: connect to host ssh.github.com port 22: Connection timed out
在C:/用户/用户名/.ssh中添加几个文件 之前的电脑生成都是四个文件,分别是 id_rsa id_rsa.pub config known_hosts 不知道为什么在另一台电脑上却生成两个文件 ...
- apache设置无缓存
打开httpd.conf 开启扩展 确保开启 LoadModule headers_module modules/mod_headers.so 添加配置项 并添加以下配置,跟据文件类型来让浏览器每次都 ...
- 迅为iMX6UL开发板低功耗高能效开发平台
迅为i.MX 6UL开发板基于ARM Cortex-A7内核,主频高达528 MHz,内存:512MDDR3,存储:8G EMMC,支持2路CAN,2路百兆以太网,4路USB HOST,8路串口,以及 ...
- 对称加密DES加密
DES加密: des是对称加密,加密和解密需要相同的秘钥,它的密码最长56位,必须是8的倍数,秘钥越长,越安全. package com.trm.util.encrypt; import java.s ...