zoukankan      html  css  js  c++  java
  • CSS属性值一览

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

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

    • 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的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
  • 相关阅读:
    Gin 框架的使用
    Beego model 增删改查
    Beego 搭建
    Go 如何快速解决依赖管理问题
    Go 语法基础
    使用vue控制元素显示隐藏
    Vue 刷新页面方式 和页面跳转的方式
    如何让nginx 显示文件夹目录
    Vue(项目配置iview的upload插件上传文件 )+ Python flask 上传文件
    uwsgi 常见配置
  • 原文地址:https://www.cnblogs.com/tufujie/p/4994305.html
Copyright © 2011-2022 走看看