标签：

牢记内联式>嵌入式（嵌入式中设置各种文字字体、大小、位置、颜色、外距、内距最好用选择器）>外部式（外联式）的使用

属性和属性值

• font-family（字体）
  • Microsoft Yahei||微软雅黑
  • 宋体
  • Arial
  • Times New Roman
  • font-size-adjust:修改字体怎么可以使文字大小不变，c=(a/b)s，s表示实际字号应该设置的大小，c表示原先字号大小，a表示实际使用的字体的aspect值，b表示原先使用的字体的aspect值
• font-size（字号）
  • npx
• color（颜色）||background-color（背景颜色）
  • red
  • orange
  • blue
  • green
  • yellow
  • pink
  • purple
  • navy
• font-weight（设置字体的粗细）
  • normal（正常，400）
  • bold（粗体字符，700）
  • bolder（更粗字符）
  • lighter（更细字符）
  • inherit（继承父元素）
  • 100-900必须为100的整数倍
• font-variant（设置字体大小写）
  • normal（默认）
  • small-caps（使用小型大写字母）
  • inherit（继承父元素）
• font-style（设置字体的样式）
  • normal（正常）
  • italic（斜体）
  • oblique（倾斜体）
  • inherit（继承父元素）
• text-transform（设置文字的大小写）
  • capitalise（首字母大写）
  • uppercase（全部大写）
  • lowercase（全部小写）
• text-decoration（设置文字的装饰效果）
  • underline（下划线）
  • line-through（删除线）
  • overline（上划线）
• text-indent（缩进），line-height（行间距，行高），
  • nem
• letter-spacing(字母（汉字）间距)、word-spacing(单词间距)
  • npx
• font-variant（字体缩写）
  • small-caps
• text-align（位置）||margin-left(right):npx||padding-left(right):npx
  • left
  • center||0 auto;
  • right
  • justfify
• height||line-height(结合在一起可以设置垂直方向居中)
  • npx
  • npt
  • nem
  • nrem
• border
  • solid（实线）
  • dashed（虚线）
  • dotted（点线）
• float（用于图片环绕）
  • left
  • right
• vertical-align（对齐方式）
  • baseline
  • top
  • middle
  • bottom
  • text-bottom
  • text-top
  • text-sub
  • text-super
• 长宽
  • width
  • height
• 背景图片
  • background:url()
  • background-image:url()
• 选择器
  • [id$=\t]指定末尾字母为t的id，可用来判断文件格式
  • [id^=t]指定id以t开头的id
  • [id*=t]指定id中含有字母t的id
  • 类选择器 .可以随意起名 t 元素.t
  • 伪类选择器，已定义，不可随意起名，四个最基本的：root、not、empty、target；a:link、a.visited、a:hover、a.active、first-line（第一行）、first-letter（第一个字母或者第一个汉字）、before
  • :enabled、:disabled
  • :read-only附加说明readonly="readonly"、:read-write
  • :check、:default、:indeterminate
  • :selection
  • 使用示例：
    :root{background-color: yellow;}--将网页背景色设置为黄色
    body *:not(h1){background-color: yellow;}--在body内除h1元素外其他元素设置背景为黄色
    :empty{background-color: yellow;}--设置内容为空时显示背景为黄色 :target{background-color: yellow;}--链接跳转到该元素时，背景设置为黄色
  • :first-child、:last-child、nth-child(n||an+b||odd||even)、nth-last-child(n||an+b||odd||even)判断奇数偶数时连同其他元素一起判断，此时用下面的方法解决
  • :nth-of-type(odd||even)、nth-last-of-type(odd||even)
  • :odd :even :eq(n) :gt(n) :ln(n)
  • :only-child代替:nth-child(1):nth-last-child(1)或:nth-of-type(1):nth-last-of-type(1)
  • :hover移动到元素时、:active按下鼠标未松开时、:focus获得光标焦点时
  • 通用兄弟元素选择器，用来某个元素之后的其它某个元素使用的样式，div ~ p
• 样式示例
  • checkbox中outline:2px solid bule;
  • radio中outline:2px solid bule;
• 使用选择器在界面中插入内容
  • before、after中:content:""、none、normal
  • 在文字后面添加图片：content:url()等效于background-image:url();background-repeat:no-repeat;padding-left:28px;
  • 将alt属性的值作为图像的标题来显示：content:attr(alt);display:block;text-align:center;margin-top:5px;
  • 在多个标题前加上连续编号：h1:before{content: counter(mycounter,upper-alpla)‘.‘;color:blue;font-size=10px;}h1{counter-increment: mycounter;counter-reset:subcounter;}
• 文字与字体相关样式
  • 字体阴影：text-shadow:length length length color;
  • 让文本自动换行：word-break:normal、keep-all、break-all;
  • 让长单词与URL地址自动换行：word-wrap:normal、break-word;
  • 使用服务器端字体：@font-face{font-family: WebFont;src: url(‘font/Fontin_Sans_R_45b.otf‘) format("opentype");font-weight: normal;}
• 盒相关样式
  • display:inline||block||inline-clock（可以添加width和height）||inline-table||list-item||run-in||compact;
  • overflow-x:hidden;overflow-y:scroll;overflow:auto||hidden||scroll||visible;text-overflow:ellipsis;
  • box-shadow;box-sizing;
• 与背景和边框相关样式
  • 指定背景显示范围：background-clip:border||padding;指定背景图像的绘制起点：background-origin:border||padding||content;background-size:npx mpx;前面加上-moz-或者-webkit-;background-break;在火狐浏览器中写成-moz-background-inline-policy:bounding-box||each-box||continuous;
  • background-image;background-repeat;background-pisition;
  • border-radius:指定一个半径||指定两个半径||指定不显示边框||指定修改边框||绘制四个角不同半径的圆角边框;前面加上-moz-或者-webkit-;
  • 使用图像边框：border-image:url() A B C D（上右下左）/border-width repaat||stretch||round任选两个;前面加上-moz-或者-webkit-;
• 使用种类
  • E——元素选择器
  • E.C——类选择器
  • E#ID——ID选择器
  • E:A——含有A特性的E
  • E F——E的后代节点F
  • E.has(F)——含有F的E
  • E>F——E的直接子节点F
  • E+F——E的临近兄弟节点F
  • E-F——E的任意兄弟节点F
  • E.method(F)
  • E[A]——带有特性A的E
  • E[A=V]——A=V的E
  • E[A^=V]——A以V开头的E
  • [A*=V]——A含V的E
  • E[A$=V]——A以V结尾的E

CSS属性值一览

标签：

原文地址：http://www.cnblogs.com/tufujie/p/4994305.html