html以及css学习笔记

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器的分组：

h1,h2,h3,h4,h5,h6

{

color:red;

}

派生类选择器：

h2 strong

{

color：red;

}

id 选择器

#green

{

color:green;

}

<p id="green">这个段落是绿色</p>

相同的id的值一般只能取一次，方便jsp读取元素的值。但是id却可以出现许多次。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

在css中，类选择器中是以一个点号开始。

.center

{

text-align:right;

}

<head class="center">这段话将在中间显示。</head>

和id一样，class也可以作为派生选择器。

.center head

{

text-align:right;

}

<head class="center">这段话将在中间显示。</head>

属性选择器：

[title]

{

color=red;

}

[title=world]

{

color=red;

}

[title~=world]

{

color=red;

}

[title|=world]

{

color=red;

}

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

背景的样式：

background-color

background-image <!--设置背景图片，例子background-image:url(图片地址)->

background-repeat

background-posotion

background-attachment

文本样式：

text-indent

text-align

word-spacing<设置单词之间的间隔，例子word-spacing:30px，单词间隔30px>

letter-spacing<设置字符之间的间隔，例子letter-spacing:30px，字母之间间隔30px>

text-decoration<设置修饰方式，例子text-decoration:none，无修饰方式>

text-transfrom<设置文字的大小写，例子text-transfrom:upperase，单词全部大写>

line-height<设置行高，例子line-height:30px,行高为30px>

文字的类型：

font-family

font-size

font-weight

font-style<设置字体样式，font-style:italic>

链接：

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

例子：

a.one:link {color:#ff0000;} a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;} a.one:active{color:#ffcc00;}

列表的样式：

ul li{list_style_type:square}

ul li{list_style_image:url(图片地址)}

ul li{list_style_position:inside/outside}

表格：

表格边框以及折叠边框

例子：

table
{

width:100%;
border-collapse:collapse;<！--设置边框为折叠-->
}
table, td, th
{

border:1px solid black;

}

td
{

height:50px;

text-align:right;

vertical-align:bottom

padding:15px;

}

轮廓的样式：

outline-color 设置轮廓的颜色

outline-style 设置轮廓的样式

outline-with 设置轮廓的宽度

p.one
{
outline-color:#00ff00;
outline-style:solid;
outline-width:thin;
}

定位：相对定位决定定位固定定位

position:relative;
left:-20px

position:absolute;
left:100px;
top:150px

position:fixed;
top:30px;
right:5px;

position:absolute;
left:0px;
top:0px;
z-index:-1

子元素选择器：

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

相邻兄弟选择器：

li + li {font-weight:bold;}

伪类：

p:first-child {
color: red;

}

图片透明：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

html段落:

<p>这是一个段落。</p>

html水平线:

<hr/>

html换行:

<br/>

html注释:

html标题：

<h1>这是标题 1</h1> 字体由大到小

html粗体文本

<em>定义着重语句</em>

<i>定义斜体字</i>

<small>定义小号字</small>

<sub>定义下标字</sub>

<sup>定义上标字</sup>

<ins>定义插入字</ins>

<del>定义删除字</del>

<code>定义计算机代码</code>

<kbd>定义键盘输入信息</kbd>

<tt>定义打印机代码</tt>

<var>定义计算机变量</var>

<pre>定义预格式文本</pre>

<samp>定义计算机代码样本</samp>

<acronym>定义首字母缩写</acronym>

例子：

<blockquote>定义长的长的引用</blockquote>

<q>定义短引用</q>

例子：

这是短的引用：<q>这是一个引用</q>

<cite>著作的标题</cite>

在新的浏览器打开链接：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

链接到同一界面的不同位置：

<a href="#C4">查看 Chapter 4。</a>

<h2><a name="C4">Chapter 4</a></h2>

发送邮件：

插入图像：

为图片替换文本：

表格：

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

html背景背景色字体颜色

html脚本

html标题

<title>标题不会显示在文档区</title>

html所有连接同一个目标

html的meta元素

content="David Yang,8/1/07">
<meta name="generator"
content="Dreamweaver 8.0en">

html从定向

html的link元素

<link rel="stylesheet" type="text/css" href="mystyle.css" />

html实体：

&#160

html框架垂直框架：

水平架构：

浏览器不支持框架

<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html" noresize="noresize"/>
<frame src="/example/html/frame_b.html"/>
<frame src="/example/html/frame_c.html"/>
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>

html导航框架：

html内联框架：

<p><a href="http://www.baidu.com" target="iframe_a">www.baidu.com</a></p>