2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > CSS 颜色 字体 背景 文本 边框 列表 display属性

CSS 颜色 字体 背景 文本 边框 列表 display属性

时间:2018-06-23 08:12:32

相关推荐

CSS 颜色 字体 背景 文本 边框 列表 display属性

1颜色属性

<div style="color:blueviolet">ppppp</div><div style="color:#ffee33">ppppp</div><div style="color:rgb(255,0,0)">ppppp</div><div style="color:rgba(255,0,0,0.5)">ppppp</div>

2 字体属性

font-size: 20px/50%/largerfont-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 style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

eg:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>span{display: inline-block;width: 18px;height: 20px;background-image: url("/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 id="div1"><div id="div2"><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>

参考:/yuanchenqi/articles/5977825.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。