CSS属性值一览

时间：2024-01-06 09:58:50

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

属性和属性值(点击可展开)

  • 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

相关文章