HTML
- 标签
<html> <img/> - 单标签
<meta/>
换行符 - 标签对
<html></html> - 常用标签对
<head></head> 头部
<body></body> 内容
<title>标题<title> 标题
<div></div> 块状
<!doctype html> 开头声明类型
<meta charset="UTF-8"/> 字符集(写在headn内)
- 注释
<!-- HTML 注释-->
CSS 层叠样式表
- 标准 属性+冒号+值+分号
<div style="width : 200px;
height:200px;
background:red;
boder : 8px solid red;
backgroud : url(http://xxxx);
transition:1s;
">
</div>
-注释
/*xxxx*/
JavaScript 脚本语言
- 行为+=+""+属性+=+' '+值
<div onclick="this.style.width = '800px'; "></div>
id选择符 样式表位置
id选择符
//标签名字
<div id="div1">aa</div>
样式表
//行间样式表，只适用于单个块级元素
<div style="width:100px; height:200px; font-size:30px;">aaa<br/>bbbbbbbbb</div>
//内部样式表,写于</head>前面,#代表取出名字为div1的样式的元素
<style>
#div1{
width:300px
}
</style>
//外部样式表
<link rel="stylesheet" href="123.css"/>
常见样式
颜色值模式
//颜色单词
#div1{
width:200px;
height:200px
background-color:red
}
//16进制
#div1{
width:200px;
height:200px
background-color:#222
}
//rgb模式
#div1{
width:200px;
height:200px
background-color:rgb(140,164,234)
}
背景图片
#div1{
width:200px;
height:200px
/*默认状态下平铺*/
background - image:url(img/1.jpg)
/*
no-repeat 不重复
repeat-x 水平平铺
repeat-y 垂直平铺
*/
backgroud-repeat:no-repeat;
/*
背景定位:x y 坐标
: 50% 30% 父控件的百分比
: right top 靠右边 靠上边(默认为center )
*/
backgroud-position:100px 30px;
/*
scroll 滚动(默认)
fixed 固定
*/
backgroud-attachment:scroll
}
/*背景图片超出部分默认裁剪*/
/*单一样式*/
/*backgroud-attachment:scroll */
/*复合样式*/
/*backgroud:scroll red no-repeat */
边框
#div1{
width:200px;
height:200px
/*
10px 粗细
solid 实现 dotted 点划线 dashed 虚线
red 颜色
boder-top: 只有上边有边框
*/
boder:1px dashed #033;
}
网友评论