html以及css学习笔记
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN } 选择器的分组：
h1,h2,h3,h4,h5,h6
{
color:red;
}
派生类选择器：
h2 strong
{
color：red;
}
id 选择器
#green
{
color:green;
}
这个段落是绿色
相同的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;
}
这段话将在中间显示。
和id一样，class也可以作为派生选择器。
.center head
{
text-align:right;
}
这段话将在中间显示。属性选择器：
[title]
{
color=red;
}
[title=world]
{
color=red;
}
[title~=world]
{
color=red;
}
[title|=world]
{
color=red;
}
外部样式表
<linkrel="stylesheet" type="text/css" href="mystyle.css" />
内部样式表
内联样式
style="color: sienna; margin-left: 20px"> This is a paragraph
背景的样式：
background-color
background-image
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
{
轮廓的样式：
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 不受影响：
相邻兄弟选择器：This is very very important.
This is really very important.
li + li {font-weight:bold;}
伪类：
p:first-child {color: red;
}
图片透明：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
html段落:
这是一个段落。
html水平线:
html换行:
html注释:
html标题：
到
这是标题 1
字体由大到小html粗体文本
粗体字
大号字体
加重语气
定义着重语句
定义斜体字
定义小号字
定义下标字
定义上标字
定义插入字
定义删除字
定义计算机代码
定义键盘输入信息
定义打印机代码
定义计算机变量
定义预格式文本
定义计算机代码样本
定义地址定义缩写
定义首字母缩写
文字方向
例子：
this is a text
定义长的长的引用
定义短引用
例子：
这是短的引用：这是一个引用
著作的标题
定义变量
在新的浏览器打开链接：
链接到同一界面的不同位置：
Chapter 4
发送邮件：
插入图像：
为图片替换文本：
表格：
| Some text | Some text |
| ； | Some text |
横跨两列的单元格：
| 姓名 | 电话 | |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
横跨两行的单元格：
| 姓名 | Bill Gates |
|---|---|
| 电话 | 555 77 854 |
| 555 77 855 |
- 咖啡
- 牛奶
- 茶
html背景 背景色 字体颜色
html脚本
html标题
html所有连接同一个目标
html的meta元素
content="w3school.com.cn">
content="David Yang,8/1/07">
content="Dreamweaver 8.0en">
content="HTML examples">
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
html从定向
html的link元素
html实体：
html框架 垂直框架：
水平架构：
浏览器不支持框架
html导航框架：
html内联框架：