css内容样式属性

时间：2024-01-15 22:55:26

设置元素的最大高度、最小高度、最大宽度、最小宽度，用max-height、min-height、max-width、min-width。

visibility:设置元素是否可见。visible和hidden。

filter:alpha(opacity=70);-moz-opacity:0.7;-webkit-opacity: 0.7;-o-opacity: 0.7;-ms-opacity: 0.7;opacity: 0.7;

文本：

  1. 使用 text-indent 属性，元素首行缩进。一般来说，适用于所有的块级元素，但无法适用于行内元素和类似于图片这样的元素。可以用%、固定值和负值、继承（使用此值，父元素最好要padding相应值）。
  2. 使用text-align属性，会影响一个元素中的文本行互相之间的对齐方式。（块级和表元素居中要使用外边距实现）。left、right 、center和<center>（不仅影响文本，还会把整个元素居中）、justify(使文本的两端都对齐，由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，不同浏览器拉伸定义不同，如果 letter-spacing 属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间)、inherit（继承）。
  3. word-spacing 属性可以改变字（单词）之间的标准间隔。接受正值和负值。
  4. letter-spacing 属性，字母间隔修改的是字符或字母之间的间隔。
  5. text-transform 属性处理文本的大小写。none、uppercase(小写改为大写)、lowercase(大写改为小写)和capitalize(只对每个单词的首字母大写)。
  6. text-decoration文本装饰。none、underline(下划线)、overline(上划线)、line-through(贯穿线)、blink(闪烁)。text-decoration 值会替换而不是累积起来。 
    a:link a:visited {text-decoration: underline overline;}
  7. white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。normal（如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格）、nowrap（防止元素中的文本换行，除非使用了一个 br 元素）、pre(浏览器将会注意额外的空格，甚至回车)、 pre-wrap （浏览器不仅会保留空白符并保留换行符，还允许自动换行）和 pre-line（浏览器会保留换行符，并允许自动换行，但是会合并空白符）。
  8. direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。ltr 和 rtl两个值。对于行内元素，只有当 unicode-bidi 属性设置为 embed （这个值对于双向算法会打开附件的一层嵌套）或 bidi-override（会为行内元素创建一个覆盖） 时才会应用 direction 属性。
  9. line-height设置行间距。百分比（100%为标准行高,即当前字体尺寸。大多数浏览器中默认行高大约是 110% 到 120%。）、像素值（大多数浏览器中默认行高大约是 20px。）和数值（默认行高大约是 1。1为标准行高。）、normal、inherit。不允许使用负值。
  10. color:文本颜色
  11. background-color:文本背景颜色。

背景：(background)CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

  1. background-color:设置背景色
  2. background-image:把图像放入背景。p.flower {background-image: url(/i/eg_bg_03.gif);}
  3. background-repeat:在页面上对背景图像进行平铺。repeat、repeat-x、repeat-y、no-repeat、inherit。
  4. background-position：改变图像在背景中的位置。可以使用关键字、像素值、百分比、负值，可以混合使用 % 和 position 值。通常两个值，一个水平方向，一个竖直方向。关键字：top、bottom、left、right 和 center（通常成对出现）。如果只出现一个值，那么第二值是center。像素值：规定了一个值，另一个值将是50%。百分比：左上角是 0% 0%。右下角是 100% 100%。规定了一个值，另一个值将是50%。
  5. background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。scroll、fixed和inherit。
  6. background-size:规定背景图片的尺寸。
  7. background-origin:规定背景图片的定位区域。规定 background-position 属性相对于什么位置来定位。padding-box(背景图像相对于内边距框来定位)、border-box(相对于边框盒来定位)和content-box(相对于内容框来定位)。
  8. background-clip：规定背景的绘制区域。border-box(背景被裁剪到边框盒)、padding-box(被裁剪到内边距框)和content-box(被裁剪到内容框)。

轮廓：（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

  1. outline-color：设置轮廓的颜色。
  2. outline-width：设置轮廓的宽度。
  3. outline-style：设置轮廓的样式。轮廓线不会占据空间，也不一定是矩形。
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。

字体：

  1. font-family:
    • 两种不同类型的字体系列名称:
      • 通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"\Sans-serif \Cursive\Fantasy）
      • 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"\Georgia ）
      • 两种字体结合解决用户代理上没有安装字体的问题，font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;按顺序优先使用。
    • 最常用的三种类型：直接中文；英文形式；unicode码；
    中文名 英文名 Unicode
    Windows
    * 宋体  SimSun   \5B8B\4F53
    * 黑体  SimHei   \9ED1\4F53
    * 微软雅黑  Microsoft YaHei   \5FAE\8F6F\96C5\9ED1
    微软正黑体  Microsoft JhengHei   \5FAE\x8F6F\6B63\9ED1\4F53
    新宋体  NSimSun   \65B0\5B8B\4F53
    新细明体  PMingLiU   \65B0\7EC6\660E\4F53
    细明体  MingLiU   \7EC6\660E\4F53
    标楷体  DFKai-SB   \6807\6977\4F53
    仿宋  FangSong   \4EFF\5B8B
    楷体  KaiTi   \6977\4F53
    仿宋_GB2312  FangSong_GB2312   \4EFF\5B8B_GB2312
    楷体_GB2312  KaiTi_GB2312   \6977\4F53_GB2312
    Mac OS
    * 华文细黑  STHeiti Light [STXihei]   \534E\6587\7EC6\9ED1
    * 华文黑体  STHeiti   \534E\6587\9ED1\4F53
    华文楷体  STKaiti   \534E\6587\6977\4F53
    华文宋体  STSong   \534E\6587\5B8B\4F53
    华文仿宋  STFangsong   \534E\6587\4EFF\5B8B
    丽黑 Pro  LiHei Pro Medium   \4E3D\9ED1 Pro
    丽宋 Pro  LiSong Pro Light   \4E3D\5B8B Pro
    标楷体  BiauKai   \6807\6977\4F53
    苹果丽中黑  Apple LiGothic Medium   \82F9\679C\4E3D\4E2D\9ED1
    苹果丽细宋  Apple LiSung Light   \82F9\679C\4E3D\7EC6\5B8B
  2. font-style 属性最常用于规定斜体文本。
    • normal - 文本正常显示
    • italic - 文本斜体显示。一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
    • oblique - 文本倾斜显示。正常竖直文本的一个倾斜版本。
  3. font-variant 属性可以设定小型大写字母。
  4. font-weight 属性设置文本的粗细。normal(400)、bold(700)、bolder、 lighter、inherit和数值（关键字 100 ~ 900 为字体指定了 9 级加粗度）。
  5. font-size 属性设置文本的大小。可以是绝对或相对值。普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。为了在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小，使用百分比和em结合的方式，body{font-size:100%;}h1{font-size:3.75em}。

链接：a:link，a:visited,a:hover,a:active

列表：（list-style）允许你放置、改变列表项标志，或者将图像作为列表项标志。

  1. list-style-image：对各标志使用一个图像。值为url('/images/blueball.gif')。始终规定一个 "list-style-type" 属性以防图像不可用。
  2. list-style-position ：设置在何处放置列表项标记。
    side 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
    outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
    inherit 规定应该从父元素继承 list-style-position 属性的值。
  3. list-style-type:设置列表项标记的类型。
    none 无标记。
    disc 默认。标记是实心圆。
    circle 标记是空心圆。
    square 标记是实心方块。
    decimal 标记是数字。
    decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
    lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
    upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
    lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
    lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
    lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
    upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
    hebrew 传统的希伯来编号方式
    armenian 传统的亚美尼亚编号方式
    georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
    cjk-ideographic 简单的表意数字
    hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
    katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
    hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
    katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

表格：

  1. border-spacing ：设置相邻单元格的边框间的距离（仅用于“边框分离”模式separate）。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。不允许使用负值。
  2. caption-side ：设置表格标题的位置。top和bottom。
  3. empty-cells ：设置是否显示表格中的空单元格（仅用于“分离边框”模式）。hide和show。
  4. tableLayout ：用来显示表格单元格、行、列的算法规则。automatic（默认。列宽度由单元格内容设定）和fixed（列宽由表格宽度和列宽度设定）。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。
  5. border-collapse ：设置表格的边框是否被合并为一个单一的边框。
    separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
    collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

display:规定元素应该生成的框的类型。

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

媒介类型:(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

　　@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

　　@media screen

　　{

　　p.test {font-family:verdana,sans-serif; font-size:14px}

　　}

　　注释：媒介类型名称对大小写不敏感。

媒介类型 描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv 用于电视机类型的设备。

相关文章