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