css和html的杂记
CSS选择器:
- 标记选择器
- 类别选择器
- ID选择器
选择器的声明
- 集体声明
- 选择器的嵌套
CSS中的继承
<em></em>斜体标记
CSS中的字体效果
Font-family:黑体,幼圆;控制字体
Font-size:
Color:red ;控制字体的颜色;
Color:rgb (0%,2%,80%)(红色分量百分之零,绿色分量百分之二,蓝色分量百分之八十)
Color:#332255;
Font-weight:bool(粗体),lighter(常规字体)控制字体粗细
Font-style:italic(斜体),normal(常规字体)控制斜体 oblique(对于没斜体变量的特殊字体)
Font-decoration: none (无装饰) blink(闪烁) underline(下划线) line-through(贯穿线)
OverLine:上划线
Font
Text-decoration:underline(下划线)overline(顶划线)line-through(删除线) blink(闪烁效果ie6ie7不支持此属性 火狐支持)
Text-align:center;(文子的显示位置)
Text-transform:capitalize(单词首字母大写)lowercase (全部小写)uppercase(全部大写)
None(保持原样)
垂直对齐方式
Vertical-align:top(顶端对齐)botomm(底部对齐)middle(中间对齐)
图片的样式
图片的边框样式 border-style:dotted(边框样式)border-color:red (颜色)border-width(边框宽度) border: dotted 2px red(同时控制以上三种样式) border-left: dotted 2px red(border-right)
图片的大小
Width:80%(相对于父元素宽度的百分之八十) 或 80px
Hight:80%(相对于父元素高度的分之八十) 或 80px
水平对齐
Text-align:(left,center,right)
CSS页面背景
Background-color:red;设置页面背景
Background-imge:url(路径设置页面背景图片)
Background-repeat:repeat-x,repeat-y(背景是否重复)
Background-position:bottom right;右下角(设置图片位置)
Background-attachment:fixed (固定背景图片)
Backgroud-color:transparent(设置背景透明)
Writing-mode:tb-rl竖排版文子(ie才支持这种排版模式)
表格的边框
Border:2px solid red;
网页中的表单元素
<input type=”text” name=”name” id=”name”></input> 文本框
<select name=”name” id=”name”> 下拉框
<option value=”red”>红</option>
<option value=”blue”>蓝</option>
</select>
<input type=”radio” name=”name” id=”name” value=”nan”>男 单选按钮
<input type=”checkbox” name=”name” id=”name” value=”nan”> 看书 复选框
<textarea name=”name” id=”name” clos=”3 rows=”4> 多行文本框
<input type=”submit” name=”name” id=”name” value=”submit”> 按钮
动态超链接
A:link{ color:read ;text-decoration:none} 超链接正常的状态下的样式
A:visited{ color:read ;text-decoration:none } 当超链接被访问过后的样式
A:hover{color :greed; text_decoration:underline}当鼠标进过超链接时的样式
鼠标样式
Cursor:help(带手的鼠标样式)
设置滚动条的样式(只适应于ie浏览器)
Scrollbar
List-style-type:decimal;(项目编号的样式)
List-style-image:url(路径)(图片符号ie和火狐效果不一样)
Tab菜单
Css中的滤镜(ie支持)
Alpha通道
(图片透明)filter:alpha(opacity=50)透明度
Blur模糊
filter:progid:DXImageTransform.Microsoft.blur(pixelradius=1,makeshadow=false)
Pixelradius(模糊度越大越模糊)
透明色
filter:chroma(color=red);滤取图片的一种颜色
Filq的翻转
filter:fliph(水平翻转) filter:flipv竖直翻转
遮罩
Filter:mask(color=red)
波浪
Filter:wave(add=0, frep=2,lightstrength=70,phase=75,strength=4)
Frop(频率)
淡入淡出
Filter:BlendTrans(duration=3)
Div的定位
div与span标记区别:div在不同的行上!span在同一行上
盒子模型
Border
Padding
Margin
元素的定位
Float定位 和 position定位
Float:(left,right) Clear :both(消除float的影响)
Position:absolute(绝对定位) relative(相对定位)
Left:20px(到左20像素)
Top:40px(到上部40个像素)
Z-index属性
Z-index:-1;(如果没有这个属性默认最后一个层在上)
Css排版的观念
#container #banner #content #links #footer
固定宽度且居中的版式
方法1
Body,html
{
Margin:0px;padding:0px
Text-align:center;
}
#container
{
Position:relative;
Margin:0 auto;
}
方法2
Body,html
{
Margin:0px ; padding:0px;
}
#container
{
Position:relative;
Left:50%
Width:700px;
Margin-left:-350px;
Padding:0px;
}
Javascript的概述
Javascript是一种基于对象的脚本语言,不增加服务器的负担
Javascript中的数据类型和变量
String字符串 、数值、boolean(0或1即false或true) 、undefined(变量没有被定义)、null(存在的变量但是值为空)、object(所有的对象 )
Javascript中表达式及用算符
<script language=”javascript”>
Var a=5,b=8,
Alert(a>b?”调用0.1。css”:“调用0.2。css” )
<script>
Javascript中基本语句
If for
Javascript代码
OnFocus 单元个得到焦点 onBlur单元个失去焦点
Xml的基础
与html类似,而xml的语法要求更为严格(如果又开始标记就必须有结束标记)好处是可以让用户自定义标记
Xml一开始的标记<?xml
version=”
Xml链接css文件
<?xml-stylesheet type=”text/css” href=”13-5.css”?> 相当于link标记
Xml文子的阴影效果