CSS 颜色 字体 背景 文本 边框 列表 display属性
1 颜色属性
<div >ppppp</div> <div >ppppp</div> <div >ppppp</div> <div >ppppp</div>
2 字体属性
font-size: 20px/50%/larger font-family:'Lucida Bright' font-weight: lighter/bold/border/
3 背景属性
border:1px solid red;
background-color: cornflowerblue; background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right(左右距离) top（上下距离）（20px 20px）;(横向：left center right)(纵向：top center bottom) 简写：<body 1.jpg')">
<div 1.jpg')">
eg：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: inline-block;
width: 18px;
height: 20px;
background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
background-position: 0 -100px;
}
</style>
</head>
<body>
<span></span>
</body>
</html>4.文本属性
font-size: 10px; text-align: center; 横向排列 line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-indent: 150px; 首行缩进
letter-spacing: 10px; 字母间距
word-spacing: 20px; 单词间距
text-transform: capitalize; 单词首字母大写
5.边框属性
border-style: solid; 边框样式实线dashed是虚线 border-color: red; 边框颜色 border-width: 20px; 边框宽度 简写：border:边框宽度 边框颜色 边框样式，例如
border: 30px rebeccapurple solid;
border-left boder-right boder-top boder-bottom
6 列表属性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; 除去列表样式
list-style: circle;
list-style: upper-alpha;
list-style: disc; }7 dispaly属性
none 隐藏 block 块元素 inline 内联元素
inline-block 内联元素具有块元素属性
8.eg：表格居中
#div1 {
text-align: center;
}
#div2 {
margin:50px auto;
border: 5px red dashed;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<!--action 定义表单数据提交地址-->
<div >
<div >
<form action="http://127.0.0.1:8000/post_info" method="get" enctype="multipart/form-data">
<!--单行文本框-->
<input type="text" name="username" placeholder="请输入账号"><br><br>
<!--密码框-->
<input type="password" name="password" placeholder="请输入密码"><br><br>
<!--单选框-->
性别：<label><input type="radio" name="sex" value="1">男</label>
<label><input type="radio" name="sex" value="2">女</label>
<!--多选框-->
<br><br>
最喜欢的游戏：
<label><input type="checkbox" name="fav" value="LOL">英雄联盟</label>
<label><input type="checkbox" name="fav" value="shoot">喷射战士</label>
<label><input type="checkbox" name="fav" value="zelder">塞尔达传说</label>
<label><input type="checkbox" name="fav" value="mario">马里奥</label>
<!--上传图片-->
<br><br>
<input type="file" name="pic">
<!--多行文本框-->
<br><br>
<textarea name="text" cols="30" rows="10"></textarea>
<!--下拉列表-->
<br><br>
<select name="city">
<option value="gz">广州</option>
<option value="sz">深圳</option>
<option value="zh">中山</option>
</select>
<!--提交表单-->
<input type="submit" value="提交">
<!--重置表单-->
<input type="reset" value="重置">
</form>
</div>
</div>参考：https://www.cnblogs.com/yuanchenqi/articles/5977825.html
- 上一篇 »CSS ::Selection
- 下一篇 »css样式之background详解，格子效果