HTML标签
<link rel="stylesheet" type="text/css" href="1.css"/> 引入css格式
标签类
<a>添加超链接
*floct lift(浮动)
*magin: 移动
<img src></img>插入图片
<b>标签换行
<i>标签倾斜
<u>标签下划线
<s>标签加删线
<center></center>//居中
<left>居左
<right>局右
<ul></ul>无序列表
<ol></ol>有序列表
<span></span> 写多少内容占多少格不会另起一行
<br></br> 回车的作用
<p>换行
  空格
<h1> 改变字体大小
<h6>
hr - 水平分隔线
display:block;(块级元素)
display=none(隐藏) 当隐藏时相当于删除原有的位置没有占用物理空间比的div可以写入
visibility:hidden(隐藏)当ta隐藏时别的div不能进入这个空间
inear-giadient(red,blue) 渐变(上下渐变)
display:block; margin:0 auto; div中的图片水平居中
line-height: 27px; 行高居中
background-color 背景色
background-image 背景图片
background-repeat 背景图片是否平铺
background-attachment 背景图片是否固定(随滚动条移动)
background-poition 背景图片起始位置
字体类
font-family"宋体" 改变字体
font_size 设置字体大小
list-style:none; 去圆
text-align:center; 字体居中
text-deoration:none;去除超链接的下划线
text-indent:50px;文本缩进50像素(类似于写作文空两格的效果)
color:red;设置盒子模型的字体颜色
word-spacing:5px;设置字间距
font-size:16px;设置字体大小
font-weight:900;设置字体粗细
font-family"设置字体颜色如黑体"
边框类
box-shadow:0px 0px 10px 5px #aaa; 外面的边框阴影
box-shadow:0px 0px 10px 5px #aaa inset; 里面的阴影
border:2px black solid; 边框颜色 添加边框
border-radius:10px; 圆角边框
border-radius: 10px 10px 10px 10px; 按钮弧度 文本弧度 表单弧度
border-位置(top):1px blacke solid 一条边加边框
border-bottom:1px dashed #颜色 设置下划线虚线
border-bottom: 1px solid #颜色 设置下划线实线
表单类(input)
表单 <form action提交的路径="php. jsp. "method提交的方式="post get></form>
get--传输数据不安全
post--直接提交后台
form大部分都是input标签
input type="text" 文本框
<input type="button" id="ss" value="搜索"/>创建搜索按钮
input type="radio name=“sex” 选择男女之类的文本
input type="checkbox" 多选文本框
input type="password" 密码框
input type="snbmit" 确认
input type="reset" 取消
<button type="button">确认</button> 按钮
<input type="radio" value="sex" name="sex" id="d1-4"/>单选按钮
<textarea name="text" cols="50" rows="15"></textarea> 大型文本框
required="" 在提交前必填
导航栏
list-style: none;去ul里的点
<ul>//有序列表
<li></li>
<li></li>
<li></li>
</ul>
<ol>//无序列表
<li></li>
<li></li>
<li></li>
</ol>
伪元素选择器(用于超链接 在css中设置)
a:like 正常,未经访问的链接
a:visited 用户已经访问过的链接
a:hover 当用户鼠标放在链接上时
a:active 连接备点击的那一刻
块级元素和行内元素的区别
块级元素 (displ:block)
块级元素会独占一行,默认情况下宽度自动填满其父元素宽度。
块级元素可以设置宽度。
块级元素可以设置margin(移动),padding(行间距)。
行内元素(displa:inline)
行内元素不会独占一行,相邻的行内元素会排在一行,其宽度随着内容的变化而变化。
行内元素不可以设置宽度
行内元素水平方向的margin padding 可以生效 垂直方向的不可以生效
居中
方法1
<div>相对于<div>居中
相对于div来说子div居中于父div
方法:在父div中style一个text-align:center;
在子div中style一个margin:0 auto;
方法2
这样实现div相对于div上下左右全部居中:
大的div中的css写入 position:relative;
小的div中写入的css position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
display:block; margin:0 auto; div中的图片水平居中(生成块级元素后用margin来居中)
text-align: center; 文本居中
line-height: 行高px; 行高居中
margin:0 auto; 单元格居中
text-align: center; 表单居中
margin: 0 auto; 也可以用于表单居中
表单的格式
<table>
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
定位positon
static静态 (默认)
absdute绝对定位()
relations:ve 相对定位(原有文档流)
fixed 固定