CSS常用属性整理

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS学习备忘
一、CSS的基本语法
1、语句基本结构
HTML选择器{属性1：值1；属性2：值2；……属性n；值n}
2、类和ID及其他
类：[HTML选择器].classname {…}（不唯一）class=“classname”
ID：[HTML选择器]#Idname {…}（唯一）id=“Idname”
关联：HTML选择器1 选择器2 {…}
组合：HTML选择器1，选择器2，[…] {…}
伪类和伪元素：HTML选择器：pseudoname {…} 不能用class/id调用
二、在网页中加入样式
1、加入外部链接
<link href=”*.css” rel=”stylesheet” type=”text/css” [title=”…”] [media=”…”]>
rel：取值stylesheet（固定样式）或alternamte stylesheet（交互样式）
type：取值text/css或text/javascript
title：用于合成样式表
media：指定媒体介质，不常用，取值screen, print, projection, aural, Braille, tty, tv, all。

默认screen。

2、植入CSS样式表
<head>…<style type=”text/css”>[]</style>…</head> *
*最好加注释标记于样式表前后。

3、导入CSS样式表
<style type=”text/css”>[]</style> *
*比外部链接优先，总是读取。

4、行内CSS样式
<…style=”…”>
*Head部分最好加<meta http-equiv=”co ntent-style-type” content=”text/css”>
5、脚本引用
CSS属性名称删掉连字符，并将其后第一个字母大写，例如font-family fontFamily
以上可混合使用。

6、SPAN与DIV标记
SPAN无结构意义，纯粹为样式服务
DIV是块元素，会引入行分隔。

7、可以使用Style属性的HTML选择器
<a> <acronym> <address> <b> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <font> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <iframe> <img> <ins> <label> <legend> <li> <listing> <map> <marquee> <menu> <object> <ol> <p> <plaintext> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> <xmp>
三、控制文字与段落
1、CSS的长度值
单位长度：em，ex，pc（1/6寸），px（像素），pt（1/72寸），mm，cm，in。

百分比长度：xxx% 均可取正负，但某些情况非负
2、文字控制
font-family: 字体名或族名
族名：sans-serif, serif, monospace, fantasy, cursive等
font-style: normal/italic/oblique
font-variant: normal/small-caps
font-weight: normal/bold/bolder/lighter或100/200/300/…/900
font-size: 长度或百分比（非负）/xx-large/x-large/large/medium/small/x-small/xx-small/larger/smaller →font: 风格变形加粗大小[/行高] 族科
3、文本控制
text-align: left/right/center/justify
text-indent: 长度或百分比（非负）
letter-spacing: 长度
vertical-align: 百分比/baseline/sub/super/top/text-top/middle/bottom/text-bottom
line-height: 数值或百分比/normal
text-transform: none/captalize/uppercase/lowercase
text-decoration: underline/overline/line-through/blink/none
四、控制颜色和背景
1、颜色表示系统
关键字：140种
RGB：RGB(r,g,b) 可以为数值或百分比
十六进制：#rrggbb（某些可简化为#rgb）
2、控制颜色
color: 颜色
background-color: 背景颜色
3、控制背景
background-image: url(....)/none
background-repeat: repeat/repeat-x/repeat-y/no-repeat
background-attachment: scroll/fixed
background-position: 数值或百分比/top/bottom/center/left/right （取两个值）
→background: 背景色/背景图/平铺/固定/位置
五、对网页元素格式化
1、边界设置
margin-top: 数值或百分比/auto
margin-right, margin-bottom, margin-left同上
→margin: 上右下左（缺省取对边）
2、边框设置
border-top-width: 数值（非负）/none/thin/medium/thick
border-right-width, border-bottom-width, border-left-width 同上
→border-width: 上右下左（缺省取对边）
border-color: 上右下左（缺省取对边）
border-style: none/dotted/solid/double/groove/ridge/inset/outset 取四个值—上右下左（缺省取对边）→border-top: 宽度样式颜色
border-right, border-bottom, border-left 同上
border: 宽度样式颜色（不能分开定义）
3、填充距设置
padding-top: 数值（非负）
padding-right, padding-bottom, padding-left 同上
padding: 上右下左（缺省取对边）
4、宽度和高度
width: 数值或百分比（非负）/auto
height: 数值（非负）/auto
5、图文混排
float: none/left/right
clear: none/left/right
6、鼠标样式
cursor: auto/crosshair/default/hand/move/e-resize/ne-resize/nw-resize/n-resize/se-resize/sw-resize/s-resize/ w-resize/text/wait/help
7、超级链接
a:link 普通
a:visited 已访问
a:active 活动
a:hover 悬停
六、定位网页元素
position: absolute/relative/static
left: 数值或百分比/auto
top: 数值或百分比/auto
width: 数值或百分比/auto *
height: 数值或百分比/auto *
clip: rect (上右下左) *
visibility: visible/hidden/inherit
overflow: visible/hidden/scroll/auto *
z-index: 整数/auto
*仅当position: absolute
七、建立项目列表
display: none/block/list-item/inline
white-space: normal/pre/nowrap
list-style-type: disk/circle/squre/decimal/lower-roman/upper-roman/lower-alpha/upper-alpha/none
list-style-image: url(…)
list-style-position: outside/inside
list-style: 选type image position任意填入，顺序无所谓
八、滤镜
1、Alpha 透明
filter: alpha(opacity=x1, finishopacity=x2, style=x3, startx=x4, starty=x5, finishx=x6, finishy=x7)
x1, x2: 透明度（0-100）同时使用则渐进
x3: 0-无渐进，1-直线渐进，2-圆形渐进，3-矩形辐射
2、Blur 模糊
filter: blur(add=x1, direction=x2, strength=x3)
x1: 叠加原对象，非0/True是，0/False否
x2: 方向，0/45/90/135/180/225/270/315
x3: 模糊半径（px），缺省5
3、Chroma 滤色镜
filter: chroma(color=颜色)
4、Dropshadow 阴影
filter: dropshadow(color=颜色, offx=x1, offy=x2, positive=x3)
x1: 水平偏移，正右负左
x2: 垂直偏移，正下负上
x3: 阴影效果，非0/True有，0/False无
5、FlipX，FlipY 翻转
filter: flipx()
filter: flipy()
6、Glow 光晕
filter: glow(color=颜色, strength=x)
x: 晕圈强度范围
7、Invert 反色
filter: invert()
8、Gray 黑白
filter: gray()
9、Mask 遮罩
filter: mask(color=颜色)
10、Shadow 渐进阴影
filter: shadow(color=颜色, direction=x)
x: 投影方向，0/45/90/135/180/225/270/315
11、水波纹
filter: wave(add=x1, freq=x2, lightstrength=x3, phase=x4, strength=x5)
x1: 叠加原对象，非0/True是，0/False否
x2: 波动个数（频率）
x3: 光照强度（0-100）
x4: 初相（0-100）
x5: 振幅
12、Xray X光
filter: xray()
13、Light 投射
filter: light(enabled=1)
脚本方法：addambient, addcone, addpoint, changcolor, changstrength, clear, movelight 14、混合过渡
filter: blendtrans(duration=时间)
filter: revealtrans(duration=时间, transition=效果)
效果取值0-23
九、CSS延伸功能（CSS2）
1、打印
@page规则
@page {…} 全部页；@page: left {…}左页；@page: right {…}右页
打印属性
size: 宽高/auto/landscape/portrait *
mark: crop/cross/none
margin-top: 长度或百分比*
margin-right, margin-bottom, margin-left 同上
margin: 上右下左*
page-break-before: auto/always/avoid/left/right
page-break-after: auto/always/avoid/left/right
page-break-inside: auto/avoid
orphans: 行数（默认2）
widows: 行数（默认2）
page: auto/@page标识符
*不能用em或ex作长度单位
2、声音
时间单位：ms，s
频率单位：Hz，KHz
角度单位：deg，rad，grad 可以为负
pause-before: 时间
pause-after: 时间
pause: 前后（省略同前）
cue-before: url(…)
cue-after: url(…)
cue: 前后（省略同前）
volume: 百分比/silent/x-soft/soft/medium/loud/x-loud
play-during: url(…) auto/none/mix/repeat
azimuth: center/center-left/left/far-left/left-side/center-right/right/far-right/right-side/leftwards/rightwards/ [behind]/角度
elevation: 角度（-90-90）/lower/higher/below/above/level
pitch: 频率/x-low/low/medium/high/x-high
pitch-range: 百分比（默认50%）
richness: 百分比（默认50%）
speak-date: mdy/dmy/myd
speak-numeral: digits/continuous/none
speak-punctuation: code/none
speech-rate: 数值（wpm）/x-slow/slow/medium/fast/x-fast/slower/faster
speak-time: 24/12/none
stress: 百分比
voice-family: … male/female。