CSS的拾遗（1）

1、padding：

（1）定义：在一个声明中设置所有内边距属性

（2）用法：

　　　　例子 1：上，右，下，左

　　　　padding:10px 5px 15px 20px;
    • 上内边距是 10px
    • 右内边距是 5px
    • 下内边距是 15px
    • 左内边距是 20px

　　　　例子 2：上，右&左，下

 　　　padding:10px 5px 15px;
    • 上内边距是 10px
    • 右内边距和左内边距是 5px
    • 下内边距是 15px

　　　　例子 3：上&下，右&左

　　　　padding:10px 5px;
    • 上内边距和下内边距是 10px
    • 右内边距和左内边距是 5px

　　　　例子 4：all

　　　　padding:10px;
    • 所有 4 个内边距都是 10px

（3）注意：不允许使用负值

2、margin:

（1）定义：在一个声明中设置所有外边距属性

（2）用法：同padding

（3）注意：允许使用负值

3、min-width:

（1）定义：该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄

（2）用法：

　　<1>默认值：none，使用默认值则宽度取决于浏览器。

　　<2>元素若比指定宽度小，则会被强制放大（图片），反之不受影响

（3）注意：不允许使用负值

4、font：

（1）定义：font 简写属性在一个声明中设置所有字体属性

（2）用法：可以按顺序设置如下属性：

  • font-style（规定字体样式）
  • font-variant（规定字体异体）
  • font-weight（规定字体粗细）
  • font-size/line-height（规定字体尺寸和行高）
  • font-family（规定字体系列）

5、font-style：

（1）定义：font-style 属性定义字体的风格

（2）用法：

　　<1>normal，默认值。浏览器显示一个标准的字体样式

　　<2>italic，浏览器会显示一个斜体的字体样式

　　<3>oblique，浏览器会显示一个倾斜的字体样式

　　<4>inherit，规定应该从父元素继承字体样式

6、font-variant：

（1）定义：font-variant 属性设置小型大写字母的字体显示文本

（2）用法：所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

　　<1>normal，默认值。浏览器会显示一个标准的字体

　　<2>small-caps，浏览器会显示小型大写字母的字体

　　<3>inherit，规定应该从父元素继承 font-variant 属性的值

7、font-weight：

（1）定义：font-weight 属性设置文本的粗细

（2）用法：

　　<1>normal，默认值。定义标准的字符

　　<2>bold，定义粗体字符

　　<3>bolder，定义更粗的字符

　　<4>lighter，定义更细的字符

　　<5>100，200，300…900，定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold

8、font-size：

（1）定义：font-size 属性可设置字体的尺寸

（2）用法：

　　<1>实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）

　　<2>可能的值

值 描述
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。

默认值：medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。

9、line-height：

（1）定义：line-height 属性设置行间的距离（行高）

（2）用法：

　　可能的值

值 描述
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

（3）注意：

　　<1>不允许使用负值

　　<2>该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离

10、font-family：

（1）定义：font-family 规定元素的字体系列

（2）用法：

　　<1>font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值

　　<2>有两种类型的字体系列名称：

    • 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
    • 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

　　<3>使用逗号分割每个值，并始终提供一个类族名称作为最后的选择

　　<4>实例

    • 例1（小米米官网）：font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
    • 例2（淘宝技术研发中心）：font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    • 例3（加网 ）：font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
    • 例4（淘宝UED）：font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
    • 例5（一淘UX）:font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    • 例6（简书）：font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

（3）注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路

11、color：

（1）定义：color 属性规定文本的颜色

（2）用法：

　　<1>这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖

　　<2>可能的值

值 描述
color_name 规定颜色值为颜色名称的颜色（比如 red）。
hex_number 规定颜色值为十六进制值的颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
inherit 规定应该从父元素继承颜色。

12、background：

（1）定义：background 简写属性在一个声明中设置所有的背景属性

（2）用法：

　　<1>可以设置如下属性：

  • background-color（规定要使用的背景颜色）
  • background-position（规定背景图像的位置）
  • background-size（规定背景图片的尺寸）
  • background-repeat（规定如何重复背景图像）
  • background-origin（规定背景图片的定位区域）
  • background-clip（规定背景的绘制区域）
  • background-attachment（规定背景图像是否固定或者随着页面的其余部分滚动）
  • background-image（规定要使用的背景图像）

　　<2> 通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少

13、background-color：

（1）定义：background-color 属性设置元素的背景颜色。

（2）用法：background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

　　　　可能的值

值 描述
color_name 规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent 默认。背景颜色为透明。
inherit 规定应该从父元素继承 background-color 属性的设置。

最新文章

  1. 利用Python进行数据分析(2) 尝试处理一份JSON数据并生成条形图
  2. JAVA发展史
  3. Mongodb优化
  4. Excel 使用CHIINV函数和GAMMA.DIST函数绘制卡方分布
  5. uploadify图片上传发生Security Error
  6. 【原】结构体包含CString类型成员变量出错的原理
  7. 【总结】String in Java
  8. Cube Stacking
  9. Bmob—移动后端云服务平台
  10. android NDK开发环境搭建
  11. 机器学习笔记之人工神经网络(ANN)
  12. HTML5学习笔记（一）：HTML简介
  13. Educational Codeforces Round 2 C. Make Palindrome 贪心
  14. 记一次npapi插件无窗口(windowless )化下的妙巧思路然后解决问题的超爽体验过程
  15. Unable to find manifest signing certificate in the certificate(Visual studio)
  16. js页面loading加载
  17. [COGS2701]：动态树
  18. jquery修改input的值，vue获取不到的解决办法
  19. Eclipse 中报错的阅读顺序
  20. [P2850][USACO06DEC]虫洞Wormholes (最短路)

热门文章

  1. Lodop打印小票
  2. 如何通过C#/VB.NET代码在Word中更改字体颜色
  3. 关于异常处理的return
  4. TreeMap排序Comparator()重写
  5. GitHub 入门 与 2023年2月18日10:29:02
  6. JZOJ 1967.【2011集训队出题】聪聪可可
  7. 自己从零写操作系统GrapeOS——1.GrapeOS介绍
  8. 免杀之：Python加载shellcode免杀
  9. 小程序动态class与动态style的写法：
  10. vue2和vue3区别