CSS
2013-11-07 11:37
288 查看
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" href="2.css" type="text/css" media="screen"/>
<style type="text/css">
span{
color:#000000;
background: #ffffff;
}
body{
background: #C7EDCC;
}
@import url("1.css");
.class_1{
font-family: Garamond;
color: #FF0000;
}
.class_2{
/*这个虽然没有使用，但可作为预定义样式，实现动态加载效果*/
text-decoration: line-through;
color: #FFFF00;
}
div#div_id_1{
font-size: x-large;
}
div p{
font-size: 200%;
}
.class_1,div p{
background-color: #55ff88;
}
div,p{
color:#fff0ff;
}
a:link{
text-decoration:none;
font-size: 35;
}
a:visited{
font-size: 50;
}
a:hover{
font-size: 10;
}
div:hover{
/*IE不支持*/
background-color: #FF0000
}
p:first-letter{
color:#0000ff;
font-size: x-large;
}
p:first-line{
font-size: x-large;
color:#0000ff;
}
input:focus{
background-color: #0000ff;
}
</style>
</head>
<body>
<h1>CSS与html结合的四种方式</h1>
<p style="color: #FFFFFF;background: #0000FF">第1种：使用每个标签都具备的style属性，
属性值就是CSS代码，属性和属性值用冒号连接
每个属性之间用分号分隔
若一个属性有多个属性值，就用空格隔开
FFFFFF为白色
0000FF为蓝色
</p>
<span>第2种方式：在头标签里面加入style标签，
可对单个页面的多个标签统一进行样式设置</span>
<div>
第3种方式：在头标签里面
使用@import url(XXX.css);
即CSS代码导入的方式
注意：这种导入样式的无论import语句在上面还是下面,
优先级都低于页面内HEAD标签里面用style标签定义的CSS代码
</div>
<h3>第4种方式：在头标签里面使用HTML中的link标签进行链接
如：<link rel="stylesheet" href="2.css" type="text/css" media="screen"/>
注意 ：link方式链接的优先级高于HEAD标签里面用style标签定义的样式
更高于使用@import url(XXX.css)导入的样式
</h3>
<hr />
选择器：
一般有三种：
第1种：html标签名
第2种：class选择器，使用的是标签当中的class属性
第3种：ID选择器，使用的是标签当中的ID属性（要唯一，因为javascript常用到）
<hr />
<div class="class_1">这个是类选择器,font-family:Garamond</div>
<p class="class_1">这个是P标签中的类名也叫class_1</p>
<hr />
<div id="div_id_1">这个是ID选择器，使用#标识！与类选择器的唯一不同是：唯一性！为以后的
数据库设计和脚本提供方便！
</div>
<hr />优先级从高到低：style属性>id选择器>class选择器>style标签
另外，link>style标签>import
<div>
<p>
扩展选择器：（目前仍在升级）
第1种：关联选择器。标签可嵌套，用空格分开，表示XX标签里面的YY标签。
如：div中的p标签中的a标签
div p a{
color:#ff00ff;
}
</p>
</div>
第2种：组合选择器。用逗号隔开，表示XX标签和YY标签可用一个样式。
如：div和p标签都用一个样式
又比如：类名为class_1的标签和div中的p标签 共用一个样式
.class_1,div p{
color:#fff0ff;
}
第3种：伪元素选择器。用冒号连接标签和伪元素连接。
其实是html中预先定义好的选择器。
如a标签中的link,visited,hover,active(这个不常用)
点击之后，页面也不能乱七八糟。
a:link{
font-size: 35;
}
a:visited{
font-size: 50;
}
a:hover{
font-size: 10;
}
又如div标签中的hover（IE不支持）
<a href="http://www.baidu.dm" target="_blank">要记下LVHA顺序</a>
<input type="text" /> 具有焦点的元素！
input:focus{
background-color: #0000ff;
}
p:first-letter{
color:#0000ff;
font-size: x-large;
}
p:first-line{
font-size: x-large;
}
</body>
</html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS演示2</title>
<style type="text/css">
table{
border-top: #FF0000 double 1px;
border-right: #FF0000 solid 2px;
border-bottom: #FF0000 dashed 3px;
border-left: #FF0000 dotted 4px;
}
table td{
border:#0000FF solid 3px;
padding:20px;
}
ul{
list-style-type: circle;
list-style-type: none;
list-style-image: url(chm.jpg);
}
/*只要是区域都有边界border*/
div{
border:#090 dashed 2px;
height:50;
width:250;
padding: 20px;
color: white;
}
input{
background-color: white;
color: white;
border:none;
border-bottom: #000000 solid 3px;
}
body{
margin:0px;/*使HTML文档紧贴边框，常用！*/
}
div#div_1{
background-color: red;
float:left;
}
div#div_2{
background-color: green;
float:left;
}
div#div_3{
background-color: blue;
clear: both;
}
div#div_456{
position: absolute;/*设置了position属性之后，子结点div_4将会相对于这个父类定位*/
}
div#div_4{
background-color: red;
position: absolute;/*div_5已经被div_4覆盖在下面去了*/
position: relative;/*div_4不脱离文档流，div_5会原地不动！*/
top:10px;
}
div#div_5{
background-color: green;
width: 300;
}
div#div_6{
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>
<hr />
<dl>
<dt>定义项目</dt>
<dd>定义该项目的描述1</dd>
<dd>定义该项目的描述2</dd>
<dd>定义该项目的描述3</dd>
</dl>
<hr />
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
<hr />
<div>这是个div它也可以有边界，只要是区域</div>
姓名：<input type="text" />
成绩：<input type="text" />
<table>
<tr>
<td>可输入的表格：<input type="text"/></td>
<td>可输入的表格：<input type="text"/></td>
</tr>
</table>
<hr />
盒子模型有三个属性：边框border、内边距padding、外边距margin
其中边框border可以分为上下左右top right bottom left
内边距padding、外边距margin都是一样的可以分成上右下左！
注意：
当取内边距1个值时：代表上下左右
当取内边距2个值时：前1个代表上下，后1个代表左右
当取内边距3个值时：代表上右下
当取内边距4个值时：代表上右下左（顺时针方向）
如果设置body的外边距margin:0;那么文档内容就可以紧贴边框了
<hr />
<div id="div_1">这是演示漂浮float的div_1</div>
<div id="div_2">这是演示漂浮float的div_2</div>
<div id="div_3">这是演示漂浮float的div_3</div>
<hr />
漂浮有三个属性值：
none;这个是默认属性值！不漂浮
left;文本流向this的右边
right;文本流向this的左边
清除有4个属性值：
none;默认属性值！允许有漂浮物
left;左边不允许有漂浮物
right;右边不允许有漂浮物
both;两边都不允许有漂浮物
<hr />
定位：position
有三个属性值：
static;默认，无特殊定位
absolute;将对象从文档流中拖出来，如果它的父类对象也设置了position的值
（static除外），则相对其父类进行定位，否则相对body定位！
relative;不脱离文档流，不可层叠，在文档中偏离时，其他对象原地不动！
就是说this占着茅坑！
<hr />
<div id="div_456" style="border: 0">
<div id="div_4">这是演示漂浮float的div_4</div>
<div id="div_5">这是演示漂浮float的div_5</div>
<div id="div_6">这是演示漂浮float的div_6</div>
</div>
<hr />
</body>
</html>
两个小练习：图文混排和画中字
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS演示3</title>
<style type="text/css">
div#div_imgtext1{
border:#008ff0 dashed 3px;
}
div#div_img1{
float:left;
float:right;
}
/*下面演示的是画中字*/
div#div_imgtext2{
border:#008ff0 dashed 3px;
width:496;
height: 175px;
position: absolute;
top:400px;
left:100px;
}
div#div_text2{
position: absolute;
top:40px;
left: 10px;
color: red;
font-family: "华文隶书";
font-weight: bold;
}
</style>
</head>
<body>
<div id="div_imgtext1">
<div id="div_img1">
<img src="chm.JPG" />
</div>
<div id="div_text1">
下面开始练习1：实现图文混排！下面开始练习1：实现图文混排！
When we two parted
-----George Gordon Byron
<a href="http://f5.hjfile.cn/menu/20120519/2012051953522347_4744.mp3">英文朗读音频下载</a>
戳这个是英文朗读音频下载：
When we two parted
In silence and tears,
Half broken-hearted
To sever for years,
Pale grew thy cheek and cold,
Colder thy kiss;
Truly that hour foretold
Sorrow to this!
The dew of the morning
Sunk chill on my brow-
It felt like the warning
Of what I feel now.
Thy vows are all broken,
And light is thy fame:
I hear thy name spoken,
And share in its shame.
They name thee before me,
A knell to mine ear;
A shudder comes o'er me-
Why wert thou so dear?
They know not I knew thee
Who knew thee too well:
long, long shall I rue thee,
Too deeply to tell.
In secret we met-
In silence I grieve,
That thy heart could forget,
Thy spirit deceive.
If I should meet thee
After ling year,
How should I greet thee?
With silence and tears.
</div>
</div>
<div id="div_imgtext2">
<div id="div_img2">
<img src="chm.JPG" />
</div>
<div id="div_text2">
这个演示的是画中字！用到的是position定位值absolute
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web布局连载——两栏固定布局（五）
- [div+css]晒晒最新制作专题推广页模板
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ，必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式，import css不刷新的问题
- 用css filter做鼠标滑过图片效果