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%/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 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("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 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>
参考:https://www.cnblogs.com/yuanchenqi/articles/5977825.html
CSS 颜色 字体 背景 文本 边框 列表 display属性的更多相关文章
- css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
- css(字体,文本,边距,边框,阴影,背景,渐变,多重背景,列表)
font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...
- 3、前端--伪元素选择器、选择器优先级、字体、背景、边框、display、盒子模型
伪元素选择器 # 首字调整>>>:也是一种文档布局的方式 p:first-letter { font-size: 48px; /*字体大小*/ color: red; } # 在文本 ...
- 关于文字颜色/图片背景---selector状态列表
文字颜色 android:textColor="@style/style_name" ----------------------------------widget 图片背景 a ...
- [转载]CSS教程--字体与文本属性
b>font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单.浏览器由前向后选用字体.语法:{font-family:字体1,字体2, ... ,字体n} font ...
- css 基础 字体和文本样式
字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...
- Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片
设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格
什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...
随机推荐
- WSGI学习系列WebOb
1. WSGI Server <-----> WSGI Middleware<-----> WSGI Application 1.1 WSGI Server wsgi ser ...
- (转)mysql自增列导致主键重复问题分析
mysql自增列导致主键重复问题分析... 原文:http://www.cnblogs.com/cchust/p/3914935.html 前几天开发童鞋反馈一个利用load data infile ...
- Netty核心概念(8)之Netty线程模型
1.前言 第7节初步学习了一下Java原本的线程池是如何工作的,以及Future的为什么能够达到其效果,这些知识对于理解本章有很大的帮助,不了解的可以先看上一节. Netty为什么会高效?回答就是良好 ...
- python基础笔记之注释三种方法
---恢复内容开始--- 1,,单行注释 用# 2,多行注释 用 “”” dddd""" 3,较长行虽然分行写但是只是注释,最终显示为一行:用 \ ---恢复内容结束- ...
- phpstorm扩展
1, CodeGlance 代码地图插件 <img src="https://pic1.zhimg.com/50/v2-721f173bafcb9b60853819c32780 ...
- Postman—做各种类型的http接口测试
首先,做接口测试前要有明确的接口文档,假设已经在PC上安装好了Postman. 1. 普通的以key-value传参的get请求 e.g. 获取用户信息 Get请求,写入url拼好参数,发送请求,查看 ...
- asp.net三种方法实现事务
事务处理是在数据处理时经常遇到的问题,经常用到的方法有以下三种总结整理如下:方法1:直接写入到sql 中在存储过程中使用 BEGIN TRANS, COMMIT TRANS, ROLLBACK TRA ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- 短视频APP是如何开启你的美好生活的?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯视频云终端团队发表于云+社区专栏 常青, 2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手机QQ. ...
- H5开发过程中修复的bug记录
从2016年8月1日开始真正意义上的修复bug,也是自己开发之路的开端,希望在这里记录自己修bug过程中遇到的问题及解决方法,待能够自己开发需求的时候,计划记录开发新需求过程中遇到的问题,并且记录自己 ...