1.CSS是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。是控制div各种形状的语法。
2.Id选择器；
类选择器 ；
HTML元素选择器；
通配符选择器；
3.background后可添加任意的你想要的背景，颜色，位置（x y）等
4.font-size：文字大小
font-weight：加粗 bold： normal：正常
font-style：文字样式 italic 斜体 normal：正常
line-height：行高
font-family:"宋体"; 控制字体
复合样式：顺序不能改
font:font-weight font-style font-size/ine-height font-family
font中必有：font-size font-family
5.text-indent：首行缩进 2em为两个字节
6.格式<a href="地址">名</a>
href="页面地址"--跳转页面
href="压缩包地址"--下载
锚点 href="id"直接跳转到id所在位置
7.<a href="地址">网页名</a>
默认带下划线，字体蔚蓝色，访问后为紫色
8.盒子包括：内容(content)、填充(padding)、边框(border)、边界(margin)， 由于其长得像个盒子，叫盒模型。
9.padding：内填充 边框以里，内容以外
margin：外边距 边框外面
10.margin叠加：相邻两个元素的上下margin是叠加在一起的。
margin传递：子元素的margin会传递给父级。
11.h1-h6 :标题（1-6逐渐变小），p>段落标签 section：版块，
header：页面头部。
footer：页面底部。
12.DIV是块元素 自己独立一行，宽度撑满整行
，SPAN是内嵌元素 不支持宽高，对padding和margin支持的也有问题，宽度由内容撑开
块元素：<div></div> <table></table>
内嵌元素：<span> </span> <input>
编程
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div1{width:0px;
height:0px;
border:100px solid red;
border-bottom:100px solid white;
margin:400px auto;
}</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
box {
width:513px;
height:350px;
border:1px solid black;
padding:0 22px;
}
title {
width:108px;
height:43px;
margin:0px 404px 0px 2px;
font:bold 23px "宋体"; color:#3f5062;
}
body1 {
width:230px;
height:55px;
margin:1px 290px 0px 2px;
font:bold 20px/54px "宋体"; color red;
}
body2 {
width:470px;
height:80px;
margin:0px 51px 30px 2px;
font:14px "宋体";
color:#9b9b9b;
text-indent:2em;
border-bottom:1px dashed black;
}
body3 {
width:270px;
font:bold 17px"宋体";
text-indent:20px
}
body4 {
width:270px;
font:bold 17px "宋体";
text-indent:18px
}
body5 {
width:270px;
font:bold 17px"宋体";
text-indent:18px
}
body6 {
width:270px;
font:bold 17px/37px "宋体";
text-indent:18px
}</style>
</head>
<body><div id="box">
<div id="title">动态新闻</div>
<div id="body1">掌握一门技术的重要性</div>
<div id="body2">掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖</div>
<div id="body3">走进民企观摩学习与民企面对面</div>
<div id="body4">走进民企观摩学习与民企面对面</div>
<div id="body5">走进民企观摩学习与民企面对面</div>
<div id="body6">走进民企观摩学习与民企面对面</div>
</div>
</body>
</html>
网友评论