当前位置: 首页 > 编程日记 > 正文

BIEE-CSS样式大全

字体属性:(font)

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位:PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体: (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性: (background)

色彩 {}

图片 {background-image: url();}

重复 {background-repeat: no-repeat;}

滚动 {background-attachment: fixed;}(固定) scroll;(滚动)

位置 {background-position: left;}(水平) top(垂直);

简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/

区块属性: (Block)

/*这个属性第一次认识,要多多研究*/

字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有用,多实践下*/

对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进 {text-indent: 数值px;}

垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

词间距word-spacing: normal; 数值

空格white-space: pre;(保留) nowrap;(不换行)

显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/

方框属性: (Box)

width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左

边框属性: (Border)

border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

border-width:; 边框宽度

border-color:#;

简写方法border:width style color; /*简写*/

列表属性: (List-style)

类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

图像list-style-image: url(..);

定位属性: (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)

css属性代码大全

一 CSS文字属性:

color : #999999; /*文字颜色*/

font-family : 宋体,sans-serif; /*文字字体*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间距离*/

line-height : 200%; /*设置行高*/

font-weight:bold; /*文字粗体*/

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

text-decoration:line-through; /*加删除线*/

text-decoration: overline; /*加顶线*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除链接下划线*/

text-transform : capitalize; /*首字大写*/

text-transform : uppercase; /*英文大写*/

text-transform : lowercase; /*英文小写*/

text-align:right; /*文字右对齐*/

text-align:left; /*文字左对齐*/

text-align:center; /*文字居中对齐*/

text-align:justify; /*文字分散对齐*/

vertical-align属性

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

二、CSS边框空白

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白

三、CSS符号属性:

list-style-type:none; /*不编号*/

list-style-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

list-style-image:url(/dot.gif); /*图片式符号*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*缩进*/

四、CSS背景样式:

/*背景颜色*/

background:transparent; /*透视背景*/

background-image : url(/image/bg.gif); /*背景图片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重复排列-网页默认*/

background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在x轴重复排列*/

background-repeat : repeat-y; /*在y轴重复排列*/

指定背景位置

background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

五、CSS连接属性:

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标光标样式:

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

六、CSS框线一览表:

border-top : 1px solid #6699cc; /*上框线*/

border-bottom : 1px solid #6699cc; /*下框线*/

border-left : 1px solid #6699cc; /*左框线*/

border-right : 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color : #369 /*设置上框线top颜色*/

border-top-width :1px /*设置上框线top宽度*/

border-top-style : solid/*设置上框线top样式*/

其他框线样式

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表单运用:

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单 选项1选项2

八、CSS边界样式:

margin-top:10px; /*上边界*/

margin-right:10px; /*右边界值*/

margin-bottom:10px; /*下边界值*/

margin-left:10px; /*左边界值*/

CSS 属性: 字体样式(Font Style)

序号 中文说明 标记语法

1 字体样式 {font:font-style font-variant font-weight font-size font-family}

2 字体类型 {font-family:"字体1","字体2","字体3",...}

3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字体风格 {font-style:inherit|italic|normal|oblique}

5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字体颜色 {color:数值;}

7 阴影颜色 {text-shadow:16位色值}

8 字体行高 {line-height:数值|inherit|normal;}

9 字 间 距 {letter-spacing:数值|inherit|normal}

10 单词间距 {word-spacing:数值|inherit|normal}

11 字体变形 {font-variant:inherit|normal|small-cps }

12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字体变形 {font-size-adjust:inherit|none}

14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本样式(Text Style)

序号 中文说明 标记语法

1 行 间 距 {line-height:数值|inherit|normal;}

2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:数值|inherit}

4 水平对齐 {text-align:left|right|center|justify}

5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 书写方式 {writing-mode:lr-tb|tb-rl}

背景样式

序号 中文说明 标记语法

1 背景颜色 { color: rgb(51, 51, 51); line-height: 25.2px;">2 背景图片 {background-image: url(URL)|none}

3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:数值|top|bottom|left|right|center}

6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}

框架样式(Box Style)

序号 中文说明 标记语法

1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 补  白 {padding:padding-top padding-right padding-bottom padding-left}

3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

宽度值: thin|medium|thick|数值

4 边框颜色 {border-color:数值 数值 数值 数值}  数值:分别代表top、right、bottom、left颜色值

5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 边  框 {border:border-width border-style color}

上 边 框 {border-top:border-top-width border-style color}

右 边 框 {border-right:border-right-width border-style color}

下 边 框 {border-bottom:border-bottom-width border-style color}

左 边 框 {border-left:border-left-width border-style color}

7 宽  度 {width:长度|百分比| auto}

8 高  度 {height:数值|auto}

9 漂  浮 {float:left|right|none}

10 清  除 {clear:none|left|right|both}

分类列表

序号 中文说明 标记语法

1 控制显示 {display:none|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 图形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目录列表 {list-style:目录样式类型|目录样式位置|url}

7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

原文地址:http://www.cnblogs.com/laihuayan/archive/2012/07/27/2611111.html

转载于:https://www.cnblogs.com/OliverQin/p/6518094.html

相关文章:

基于verilog的FPGA编程经验总结(XILINX ISE工具)

1.用ISE仿真的时候.所用变量一定要初始化. ISE默认初始量为"XXXXX", 而Quarters是默认为"00000"的, 其实实际上, 下到FPGA里后也是默认为0的,只是可以说ISE严谨得令人DT吧.比如说用一个累加器, result ABresult ,必须保证在某一刻A, B, result都为定值时,…

6 OC 中的isa 指针

目录 一 isa 指针 二 类对象中的superclass 一 isa 指针 isa 指针 ,OC 中的对象都是有的 如下图所示,实例对象isa 指针指向 类对象,类对象的isa 指针指向 元类对象 二 类对象中的superclass superclass 有什么用呢? 比如说创…

btf-raft共识算法_了解Raft共识算法:学术文章摘要

btf-raft共识算法by Shubheksha通过Shubheksha 了解Raft共识算法:学术文章摘要 (Understanding the Raft consensus algorithm: an academic article summary) This post summarizes the Raft consensus algorithm presented in the paper In Search of An Underst…

iOS asset 中定义颜色,xib中便捷访问

在aseet 中定义一个颜色 这样就可以在xib 中访问颜色了,这样就不用重复的去输入

三种序列化方式性能比较

一下代码比较了二进制序列化、xml序列化、Protobuf序列化的运行时间,可是代码显得十分冗余,是否有大神可以指点一二,万分感谢 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.IO; usi…

mac mini 装UBUNTU后没有WIFI解决办法

1、在终端中运行如下命令,重新安装b43相关的全部驱动和firmware: 复制代码代码如下:sudo apt-get install bcmwl-kernel-source #Broadcom 802.11 Linux STA 无线驱动源sudo apt-get install broadcom-sta-commonsudo apt-get install broadcom-sta-sourcesudo apt-…

区块链c端应用小程序_区块链如何真正起作用? 我建立了一个应用程序向您展示。...

区块链c端应用小程序by Sean Han通过肖恩韩 区块链如何真正起作用? 我建立了一个应用程序向您展示。 (How does blockchain really work? I built an app to show you.) According to Wikipedia, a blockchain is:根据维基百科,一个区块链是&#xff1…

HDU 4913 Least common multiple

/* hdu4913 Least common multiple http://acm.hdu.edu.cn/showproblem.php?pid4913 离散化 线段树 统计逆序数思想 tips: 1、线段树中一定要到处都取模&#xff0c;否则wa。。。 2、lazy是乘积的形式出现&#xff0c;不是加和*/ #include <cstdio> #include <algori…

JS ES6 实用笔记

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 这篇博文我会一直更新。 一.导出导入的两中方式 1.export //demo1.js export const a 6 导入语法为&#xff1a; import {a} form demo1 2.export default //demo2.js export default const b 6 …

extjs editgrid增加一行

Ext.onReady(function(){ /* * EditorGridPanel的工作过程 * 1、用户点击单元格 * 2、单元格按照预设的组件显示单元格的内容并处于编辑状态 * 3、离开单元格的编辑状态 * 4、更新编辑后的内容&#xff0c;出现三角号表示已经被修改过 * 5、程序内部变化&#xff1a;将记录设置…

unity 骨骼击碎_保证击碎$ 100挑战的创新策略

unity 骨骼击碎by Glenn Gonda由Glenn Gonda 保证击碎$ 100挑战的创新策略 (A Creative Strategy Guaranteed to Crush the $100 Challenge) Before I became a software engineer, I made my living as a recording studio engineer. I have a non-traditional background an…

mac下安装libpng环境

用go写一个爬虫工具时需要使用一个go的库&#xff0c;而这个库有需要使用libpng库&#xff0c;不然编译就会提示说 png.h找不到等之类的信息&#xff0c;于是想到应该和windows一样需要安装gcc环境&#xff0c;然后让gcc里安装libpng这个库&#xff0c; 解决办法&#xff1a; 终…

linux oracle修改编码utf8

$ sqlplus /nolog SQL> connect sys/oracle as sysdba SQL> startup 如何设置ORACLE数据库的编码&#xff08;ZHS16GBK&#xff09;修改成UTF8 SQL> shutdown immediate; SQL> startup mount; SQL> alter system enable restricted session; SQL> alter sy…

Vue.js 数据绑定渲染Demo

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 <div id"app">{{ message }} </div>var app new Vue({el: #app,data: {message: Hello Vue!} })Hello Vue!

angular搭建项目步骤_建立健康的Angular项目应采取的步骤

angular搭建项目步骤by Ashish Gaikwad通过Ashish Gaikwad 建立健康的Angular项目应采取的步骤 (Steps you should take to build a healthy Angular project) 使用Jenkins SonarQube创建您的“ Angular Fitbit” (Create your “Angular Fitbit” with Jenkins SonarQube) …

数据库的三大范式和事物

来源&#xff1a;http://blog.csdn.net/w__yi/article/details/19934319 1.1 第一范式&#xff08;1NF&#xff09;无重复的列 1.2 第二范式&#xff08;2NF&#xff09;属性完全依赖于主键 [ 消除部分子函数依赖 ] 1.3 第三范式&#xff08;3NF&#xff09;属性不依赖于其它非…

过滤器和包装器

作者&#xff1a;禅楼望月 过滤器要做的事情 请求过滤器 完成安全检查 重新格式化请求首部或体 建立请求审计或日志响应过滤器 压缩响应流 追加或修改响应流 创建一个完全不同的响应注意不能把过滤器的顺序依赖性硬编码进程序中&#xff0c;它应该由DD控制。 过滤器很像Servlet…

Missing space before value for key 'path'vue.js解决空格报错

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 找到 webpack.base.config.js文件注释掉下面的东西&#xff01;&#xff01; module: { rules: [ /*{ test: /\.(js|vue)$/, loader: eslint-loader, enforce: "p…

现代hy-9600音响_从音响工程师到软件工程师-为什么我要学习编码

现代hy-9600音响by Kalalau Cantrell通过Kalalau Cantrell 从音响工程师到软件工程师-为什么我要学习编码 (From Sound Engineer to Software Engineer — Why I’m Learning to Code) I seriously started teaching myself to code several months ago. I say “seriously” …

微信服务号、公众号、企业号注册

转载于:https://www.cnblogs.com/zhoulaoshi/p/6536850.html

a标签onclick事件解析

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 简单介绍<a>标签的常用点击事件的写法及作用 a href"javascript:void(0);" οnclick"js_method()" //javascript:void(0);作用是返回undefined&#xff0c;地址不发生跳转&am…

安卓版文字扫描识别软件

安卓版文字扫描识别软件 文字识别软件被越来越多的人使用&#xff0c;在使用的过程中也发现了一些问题。总结这些问题发现&#xff0c;很多人对软件能够批量识别这个问题比较关注。如果实现批量识别就可以节省时间。但是一些软件还不能实现批量识别&#xff0c;还有的软件能够做…

中级前端笔试_在短短8个月内如何获得中级前端开发人员的角色

中级前端笔试by Matthew Burfield通过马修伯菲尔德(Matthew Burfield) 在短短8个月内如何获得中级前端开发人员的角色 (How I got a mid-level front end developer role in just 8 months) Three weeks ago I landed a mid-level front-end developer role at a startup. Our…

用stm32f10x建立新的工程重要步骤

stm32f10x系列新建空的工程主要原理&#xff1a; 1.添加启动文件 不同的芯片类型的启动文件的容量是不同的&#xff0c;选择适合该芯片的容量作为启动文件。 注意&#xff1a;启动文件是汇编语言编写的&#xff0c;所以文件的后缀名为.s 2.添加时钟配置 配置文件 stm32f10x.的系…

随机生成6位图片验证码

1. [代码][C#]代码 /// <summary> /// PicHandler1 的摘要说明 /// </summary> public class PicHandler1 : IHttpHandler, IRequiresSessionState { private string mCheckNo string.Empty; protected ImgBuilder _ImgBuilder new I…

html 页面传值

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 直接上代码&#xff0c;JS保存全局变量的三种方式。 创建一个新的JS文件&#xff0c; //quanju.js window.localStorage.JQa"JQA"; window.localStorage.setItem(JQb,JQB);//利用localStora…

node.js的开发流程_Node.js子流程:您需要了解的一切

node.js的开发流程by Samer Buna通过Samer Buna Node.js子流程&#xff1a;您需要了解的一切 (Node.js Child Processes: Everything you need to know) 如何使用spawn()&#xff0c;exec()&#xff0c;execFile()和fork() (How to use spawn(), exec(), execFile(), and fork…

对象存在性检测集中管理

在中大型业务系统中&#xff0c; 常常需要从数据库中查询某个实体对象。 在进行处理之前&#xff0c; 必须先检测该实体是否存在&#xff0c;以增强系统的健壮性。 不过&#xff0c; 检测代码充斥在主业务流程中又会大大降低业务逻辑的清晰性&#xff0c; 最好集中起来进行管理…

20155204 2016-2017-2 《Java程序设计》第3周学习总结

20155204 2016-2017-2 《Java程序设计》第3周学习总结 教材学习内容总结 一个原始码中可以有多个类定义&#xff0c;但只能有一个公开类。留心Scanner对于每一种类型的nextxxxx()方法以Java开头的都是API提供的类使用Integer.valueOf()也是为基本类型建立打包器的方式之一Integ…

js表单提交,支持图片上传,包含后端php代码

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 <html><head><meta http-equiv"Content-Type" content"charsetutf-8" /><title>图片上传成功</title></head><body><form name"…