1
font-style normal 正常显示
italic 斜体

百分比 字体大小
font-size 像素 字体大小

font-family 字体名称 设置字体名称

letter-spacing noranl 正常显示
长度 文本间隔

word-spacing noranl 正常显示
数字 单词间隔

white-space normal 文本自动处理换行
pre 换行和空白受保护
nowrap 强制在同一行显示

text-align left 文字靠左
right 文字靠右
center 文字靠中

text-decoration none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线

text-indent 长度 首行缩进
百分比 首行缩进

line-height 像素 行高
数字/百分比 行高

text-transform none 正常显示包含大小字符
capitalize 字符串第一个字符大写
uppercase 设置大写字符
lowercase 设置小写字符

vertical-align sub 设置文字为下标
super 设置文字为上标
top 元件往上端靠齐
middle 设置文字在中线位置
bottom 元件往下端靠齐

2
background-attachment scroll 背景图像随视窗滚动
空格 条的移动而移动
fixed 背景图像不会随视窗滚动条

background-color 十六进制
英文名称
三原色
transparent 透明

background-image URL background-image:url("bg.jpg")
空格 背景图片
none 不设置基本图片

background-position top left 背景图像在上左方
(2) top center 上方中间
top right 上右方
center left 中间左方
center center IE中间
center right 下左方
bottom 正下方
bottom right 下右方

background(1) repeat 将背景图案填满整个背景
repeat-x 水平填满
-y 垂直填满
no-repeat 背景图案只出现一个

属性:
list-style-type none 无符号
disc 实体的小圆点
cirele 空心的小圆点
square 实心的小方块
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c...
upper-alpha A,B,C...

list-style-position inside 清单项目往右移
outside 正常显示

list-style-image URL list-style-image:url(xx.gif)
none 不显示任何图像

3
属性:
border-color 十六进制 上、右、下、左线颜色
英文名称 border-color:red;
三原色 (四边为红)
border-color:red green;
(上下红,左右绿)
border-color:red green blue;
(上红,左右绿,下蓝)
border-color:red green blue yellow;
(上红,右绿,下蓝,左黄)

border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线

border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width: 1 2 3 4;

简化:border:长度 形态 颜色

属性:
padding-bottom 长度/百分比 上
padding-left 长度/百分比 左
padding-bottom 长度/百分比 元件右端边线的空隙
padding-top 长度/百分比 上端

简易写法:padding:10px
padding:2px 4px
padding:2px 6px 10px
padding:1px 2px 3px 4px

margin系列属性介绍:
margin-bottom auto 自动调整空隙
长度/百分比 设置下端空隙
margin-left auto 自动调整空隙
长度/百分比 左端
margin-right auto .....
...... 右
margin-top auto .....
...... 上
简化:margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px

4
17.1css中区块的使用
width 像素/百分比 区块的宽度
auto
height ........... 高度
auto
min-height ............ 最小高度
auto
max-height ............ 最大高度
auto
min-width ............ 最小宽度
auto
max-width ............ 最大宽度
auto

17.2css中浮动的使用
float none 正常显示
left 左浮动
right 右浮动
clear none 允许两边浮动
left 不允许左边浮动
right 右边
both 两边

17.3css中定位的使用
position relative 设置区块基准点为左上角
absolute 网页
statio 无设置
left auto 以基准点定位在左边
像素/百分比 定位在左边
top auto 上边
像素/百分比 上边
right auto 右边
........... 右边
bottom auto 下
.......... 下
z-index auto 自动调整高度
数字 数字越大越往上层

17.4css中溢出的使用
overflow visible 不剪切内容也不添加滚动条
auto 在必需时才会剪切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)

17.5css中滚动条的使用
scrollbar-3dlight-color 颜色/十六进制 滚动条亮边框
scrollbar-highlight-color ......... 滚动条3D界面亮边
scrollbar-face-color ......... 滚动条3D表面
scrollbar-arrow-color ......... 滚动条方向箭头
scrollbar-shadow-color ......... 滚动条3D暗边
scrollbar-darkshadow-color ......... 滚动条暗边框
scrollbar-base-color ......... 滚动条基准颜色
scrollbar-track-color ......... 滚动条的拖动区域

5
1.设定颜色
红色的几种合法定义:
#fOO
#ffOOOO
red
red(255,0,0)
red(100%,0%,0%)
2.十六进制三元组
第一个字节:红色的值
二 绿
三 蓝
简化写法:#cccccc 可写成#ccc,#ff6633 可写成#f63
3.17种具名颜色:
黑色 black 000000
藏蓝色 navy 000080
绿色 green 008000
海蓝色 teal 008080
银色 silver 0c0c0c
蓝色 blue 0000ff
酸橙色 lime 00ff00
浅绿色 aqua 00ffff
绛(jiang)紫色 maroon 800000
紫色 purple 800080
橄榄绿 olive 808000
灰色 gray 808080
红色 red ff0000
紫红色 fuchsia ff00ff
黄色 yellow ffff00
橙色 orange ffa500
白色 white ffffff

4.使用span更好的控制文本中局部区域的文本
文本内容

5.使用display属性提供区块转换
inline(转换成内联),block(转换成区块),none(不占位的隐藏)

css总集的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. web前端开发资源分享:学习计划及资料推荐

    HTML & CSS W3C官网 HTML学习  CSS学习 书籍: <Head First HTML与CSS.XHTML(中文版)><CSS禅意花园(修订版)> 视频 ...

  2. highCharts 饼图动态加载

    饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...

  3. MAC系统生成RSA公钥私钥

    进入openssl然后主要就是三条命令: 1.genrsa -out rsa_private_key.pem 1024 这句是生成原始私钥文件 2.pkcs8 -topk8 -inform PEM - ...

  4. mac 笔记

    ---恢复内容开始--- /* 因为外出mac 办公的时候越来越多,有时候4g wifi 流量告急,不得不寻找破解之道. */ 安装port& aircreak-ng sudo port in ...

  5. 使用github参与开源项目

    github上有很多非常优秀的开源项目,作为开源项目的受益者,你否想过为开源项目贡献自己的代码?

  6. 利用BeautifulSoup抓取新浪网页新闻的内容

    第一次写的小爬虫,python确实功能很强大,二十来行的代码抓取内容并存储为一个txt文本 直接上代码 #coding = 'utf-8' import requests from bs4 impor ...

  7. 如何在属性面板中增加一个属性-UI界面编辑器(XproerUI)教程

    版权所有 2009-2015 荆门泽优软件有限公司 保留所有权利 产品首页:http://www.ncmem.com/apps/xproerui/index.asp 开发文档(SkinStudio): ...

  8. CGRectGet *** 获取控件坐标的方法

    CGRectGetHeight返回label本身的高度 CGRectGetMinY返回label顶部的坐标 CGRectGetMaxY 返回label底部的坐标 CGRectGetMinX 返回lab ...

  9. iOS开发app启动原理及视图和控制器的函数调用顺序

    main()函数是整个程序的入口,在程序启动之前,系统会调用exec()函数.在Unix中exec和system的不同在于,system是用shell来调用程序,相当于fork+exec+waitpi ...

  10. Texture Filter中的Bilinear、Trilinear以及Anistropic Filtering

    1. 为什么在纹理采样时需要texture filter(纹理过滤)?我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixel不一定对应texture ...