css统计
一.关于div:
1.margin: auto;
2.width: 700px;
3.height: 600px;
4.padding: 20px
5.border: 2px solid lightblue;
- background-image:url(/study/background.jpg);
- background-repeat: no-repeat;
8.background-size: contain;
9.text-align:left;
10.border-style:solid; 实线
dotted 点状
dashed; 虚线
double; 双线
11.border:1px dotted LightSkyBlue; 都放在一起 - border-width:1px; 边框宽度
13.border-color:red; 边框颜色
14.border-top-style:solid; 只有一个方向有边框 - display:none; 隐藏一个元素,这个元素将不再占有原空间 “坑” 让出来了
visibility:hidden; 隐藏一个元素,这个元素继续占有原空间,只是“看不见”
display:block 块级
display:inline
内联 - float:right;
clear:left; 不允许出现浮动元素
二.关于span:
1.font-size: 12px;
2.letter-spacing: 1px;
3.color:red;
4.当display:block;时
5.background-color: lightblue;
6.margin: 2px;
7.font-size: 15px;
8.font-weight: bold;
9. color: steelblue;
10.cursor:crosshair; 鼠标移动到这段文字上,就看到鼠标样式变成了十字架
11.margin-bottom:5px;
- padding: 20;
10 20 30 40;
三.关于body
1.font-family: 宋体;
四.关于td
1.width: 20%;
2.background-color: whitesmoke;
五.关于a
1.font-size: 12px;
2.letter-spacing: 1px;
4.text-decoration: none 去掉了下划线的超链
超链状态有4种
a:link {color: #FF0000} 初始状态,从未被访问过
a:visited {color: #00FF00} 已访问过
a:hover {color: #FF00FF} 鼠标悬停于超链的上方
a:active {color: #0000FF} 鼠标左键点击下去,但是尚未弹起的时候
六.关于p
1.width:50%;
2.height:50%;
3.background-color:pink;
4.line-height:200%; 行间距
5.letter-spacing:2; 字符间距
6.word-spacing:10; 单词间距
- text-indent:50; 首行缩进
8.text-transform:uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写
9.white-space:normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器,会换行。
nowrap 一直不换行,直到使用br
10.font-size:30px;
50%;
0.5em;
11.font-style:normal; 标准字体
italic 斜体
- font-weight:normal; 标准粗细
bold; 粗一点
13.font family:default 默认字库
Times New Roman;Arial;宋体;黑体;楷体;微软雅黑;
14.font:italic bold 30px "Times New Roman"; 声明在一起 - position: absolute; 绝对定位
left: 150px;
top: 50px;
z-index:1; 当z-index的值越大,就表示放上面
16.position: relative; 相对定位
left: 150px;
top: 50px;
七.关于h
1.text-decoration: overline 上划线
2.text-decoration: line-through 删除效果
3.text-decoration: underline 下划线
4.text-decoration:blink 闪烁效果
八.关于table
1.table-layout:automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
2.border-collapse:separate; 边框分隔
collapse; 边框合并
注释
/设置所有的p元素中的内容为红色/
html标签属性统计:
一.关于<font>标签
1.<font color="red">*</font>
二.关于<input>标签
<input type="text"
value="请输入用户名"
onfocus="if(value=='请输入用户名') {value=' '}"
onblur="if (value==' ') {value='请输入用户名'}"
style="background-color: ghostwhite;
color: lightgray"
margin: 10px;
placeHolder="输入框1" />
三.关于span标签
<span style="font-size: small;
font-weight: normal"></span>
四.关于table标签
<table class="t1"
border="1"
width="100%">
<tr>
五.div标签
<div style="text-align:center width:300px;margin:0 auto"
align="center"></div>
1、static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
2、relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。
3、absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。









网友评论