css内容样式属性

时间  2019-12-11
标签 css 内容 样式 属性 栏目 CSS 繁體版
原文   原文链接

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

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

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

文本：api

  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）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的做用。ide

  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）容许你放置、改变列表项标志，或者将图像做为列表项标志。url

  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, 等。（日文片假名）

 表格：spa

  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 规则使你有能力在相同的样式表中，使用不一样的样式规则来针对不一样的媒介。

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

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

媒介类型 描述
all 用于全部的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展现，好比幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介，好比电传打字机和终端。
tv 用于电视机类型的设备。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程