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>换行

&nbsp 空格

<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 固定

原文地址:https://www.cnblogs.com/xinxueyou/p/7866534.html