CSS 常用属性

颜色与背景

颜色的表示方法

命名颜色

给颜色起一个名字，例如red、blue、sliver等，这种被称为命名颜色。例如：

h1 {
  color: red
}

如果所需要的颜色只要在一个很小的基本颜色集中选取，则可以考虑使用命名颜色，合法的命名颜色关键字很有限。

全部的 CSS 命名颜色可以在这里查看。

RGB表示法

  • 函数式RGB表示法

    颜色利用一个百分数三元组或者整数三元组表示，百分数范围在 0%-100%， 整数范围在 0-255。

    color: rgb(100%,100%,100%);/*白色*/
color: rgb(0%,0%,0%);/*黑色*/
color: rgb(255,255,255);/*白色*/
color: rgb(0,0,0);/*黑色*/

  • 函数式RGBA表示法

    RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。RGBA颜色值是RGB颜色值Alpha通道的延伸 - 指定对象的透明度。Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

  • 十六进制RGB颜色

    十六进制记法在数学上等价于整数三元组记法, 该方法将三个介于00-FF的十六进制数连起来，按照#RRGGBB的顺序组合起来，表示一种颜色。

    例如，以下两者等价：

    color: rgb(255,255,255);
color: #FFFFFF;

前景色

要设置一个元素的前景色，最容易的方法是使用 color 属性。

color: <color>

背景

属性 描述
background 简写属性，作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复
background-size 设置背景图像的尺寸。

  • background-position：默认左上角（也就是 0% 0% 或者top left）

    • x y
    • x% y%
      • x = (元素的宽度 - 图片的宽度) * x%
      • y = (元素的高度 - 图片的高度) * y%
    • [top | center | bottom] [left | center | right]

  • background-repeat

    • no-repeat：背景图片在规定位置
    • repeat-x：图片横向重复
    • repeat-y：图片纵向重复
    • repeat：全部重复
  • background-size
    • length（如：50px 50px） 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
    • percentage（如：50% 50%）以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
    • cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
    • contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
    • 具体区别可以在这里查看
      background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

可以缩写为一句：

background: #F00 url(background.gif) no-repeat fixed 0 0;

font

  1. font-size：字体大小
  2. font-family：字体，宋体、微软雅黑、Arial等
  3. font-weight：文字粗度，常用的就是默认值regular和粗体bold
  4. line-height：行高，可以用百分比、倍数或者固定尺寸
span {
  line-height: 1.5;
  font-size: 14px;
  font-family: Arial,'微软雅黑','宋体';
  font-weight: bold;
}

Chrome等浏览器规定汉字的最小尺寸是12px，所以设置更小的尺寸都显示为12px

font:bold 12px/1.8em Arial;

可以缩写为一句：但文字缩写一定要具有字号、字体样式这两个属性。行高用/分隔

iconfont

项目中我们经常使用图标(icon)。传统项目中一般使用图片(img)实现图标；但是这种解决方案并不完美，比如

  • 不方便条件大小
  • 耗费流量
  • 不同分辨率下需要不同图片
  • 视网膜下不清晰

以上问题，我们都可以使用矢量图(svg)解决。

为了让我们的图标更加灵活，我们可以使用字体(font)来实现图标。

iconfont 就是阿里巴巴的矢量图标库，建议大家实际项目中使用

文本

  1. text-align：文本对其方式 left、center、right、justify
  2. text-indent：文案第一行缩进距离
  3. text-decoration： none、underline、line-through、overline
  4. color：文字颜色
  5. text-transform：改变文字大小写none、uppercase、lowercase、capitalize
  6. direction：文本方向，ltr、rtl
  7. word-spacing：可以改变字（单词）之间的标准间隔
  8. letter-spacing：字母间隔修改的是字符或字母之间的间隔
  9. white-space
    1. normal：多个空白符会变为一个，换行变为空格
    2. pre：空白符不被忽略
    3. nowrap：防止元素中的文本换行，除非使用了一个 br 元素

direction和unicode-bidi

border

  • border-width：边框宽度
  • border-color：边框颜色
  • border-style：边框样式（solid、dashed）

支持合写

border: solid 1px #333;

边框与三角形

.t0 {
  margin: 30px;
  height: 200px;
  width: 200px;
  border-top: solid 100px red;
  border-left: solid 100px green;
  border-right: solid 100px orange;
  border-bottom: solid 100px blue;
}

通过demo可以看到border的相交的地方在45deg平分，当元素的width、和height属性呗设置为0的时候

.t1 {
  margin: 30px;
  height: 0px;
  width: 0px;
  border-top: solid 100px red;
  border-left: solid 100px green;
  border-right: solid 100px orange;
  border-bottom: solid 100px blue;
}

这样我们就可以看到三角形了，尝试一下去掉两个边框，值保留上边和左边

.t2 {
  margin: 30px;
  height: 0px;
  width: 0px;
  border-top: solid 100px red;
  border-left: solid 100px green;
}

这时候做三角形好像简单了，只要我们保留两个相邻边，把另外的一个设置为透明就可以了

.t3 {
  margin: 30px;
  height: 0px;
  width: 0px;
  border-top: solid 100px red;
  border-right: solid 100px rgba(0,0,0,0);
}

使用border做三角形

w3School

results matching ""

    No results matching ""