diV有 Class、Style、title、ID 等属性。
1.margin 空出边缘
margin:上 下 左 右(按顺时针顺序,缺少某一方向则对称)
2.border 边框(三要素:像素 形状 颜色)
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四边框
3.background 背景
text-decoration: none;">black 背景颜色
background-image : url(image/bg.gif) 背景图片
background-attachment : fixed 固定背景
background-repeat : repeat 重复排列-网页预设
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x轴重复排列
background-repeat : repeat-y 在y轴重复排列
background-position : 90% 90% 背景图片x与y轴的位置
over-flow: hidden ,让超出的部分隐藏。
4.浮动和清除浮动
float: left; //左浮动
clear: left; //清除该位置左浮动
5.常见的块状元素与内联元素
块状元素 | 内联元素 |
---|---|
address – 地址 blockquote – 块引用 center – 居中对齐 dir – 目录列表 div – 常用块级容易,也是CSS layout的主要标签 dl – 定义列表 fieldset – form控制组 form – 交互表单 h1 – 大标题 h2 – 副标题 h3 – 3级标题 h4 – 4级标题 h5 – 5级标题 h6 – 6级标题 hr – 水平分隔线 isindex – input prompt menu – 菜单列表 noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容 noscript – 可选脚本内容(对于不支持script的浏览器显示此内容) ol – 有序表单 p – 段落 pre – 格式化文本 table – 表格 ul – 无序列表 |
a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) bdo – bidi override big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候需要) dfn – 定义字段 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 input – 输入框 kbd – 定义键盘文本 label – 表格标签 q – 短引用 s – 中划线(不推荐) samp – 定义范例计算机代码 select – 项目选择 small – 小字体文本 span – 常用内联容器,定义文本内区块 strike – 中划线 strong – 粗体强调 sub – 下标 sup – 上标 textarea – 多行文本输入框 tt – 电传文本 u – 下划线 var – 定义变量 |
6.标签
a标签: <a href="链接地址" target="_blank" title=" 鼠标点到位置显示的文字"> </a>
伪类: link(普通状态) visited(访问过的) hover(扫过的瞬间) active(点击的瞬间) 按照这个顺序设置颜色
h,p标签: <h>标题(h1-h6)</h> <p>段落</p>
img标签: <img src="图片地址" title="鼠标放过来显示的文字" alt="图片丢失时代替图片的文字" />
ul无序标签: <ul> <li>内容</li> </ul>
ol有序标签: <ol> <li>内容</li> </ol>
7.字体和文本
<p> hejiale</p>
font-size:20px 字体大小
font-weight:bold 加粗
font-family:黑体 字体
font-style:narmal 正常 italic 斜体
font-height:20px 行高
text-indent: 20px 首行缩进
text-align: left right center justify 对齐方式