CSS常用属性

ZzZzZz
198 阅读11分钟

CSS字体样式属性

字号设置

  • font-size：文字字号设置，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少
  • 常用的长度单位有px、em、rem
    • px：像素单位，以像素点个数为基础，是最常用的单位
    • em：相对于当前对象内文本的字体尺寸，即子元素字体大小的em是由父元素字体大小来决定的
    • rem：相对于根元素的字体大小，即<html></html>元素，通常给html元素设置font-size，后面的元素就可以直接使用rem作为单位了
    • chrome浏览器默认字体为16px，最小字体为12px，现在网页中普遍使用14px+，尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug

字体设置

  • font-family：用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑 p {font-family:"微软雅黑";}
  • 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，会去尝试下一个，直到找到合适的字体，各种字体之间必须使用英文状态下的逗号隔开
  • 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前
  • 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman"
  • 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示
  • 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文，有两种解决方式：
    • 方案一： 可以使用英文来替代。 比如 font-family:"Microsoft Yahei"
    • 方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的，font-family: "\5FAE\8F6F\96C5\9ED1": 表示设置字体为“微软雅黑”，可以通过escape()来测试属于什么字体
    • 为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体 字体名称 | 英文名称 | Unicode 编码 | | ---------- | --------------- | -------------------- | | 宋体 | SimSun | \5B8B\4F53 | | 新宋体 | NSimSun | \65B0\5B8B\4F53 | | 黑体 | SimHei | \9ED1\4F53 | | 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 | | 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 | | 隶书 | LiSu | \96B6\4E66 | | 幼园 | YouYuan | \5E7C\5706 | | 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 | | 细明体 | MingLiU | \7EC6\660E\4F53 | | 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53

字体粗细设置

  • 字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的
  • font-weight：用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍），【normal等价于400的效果，bold等价于700的效果】

字体风格设置

  • font-style：用于定义字体风格，如设置斜体、倾斜或正常字体样式，有三个取值：normal(默认值，浏览器会显示标准的字体样式)，italic(浏览器会显示斜体的字体样式)，oblique(浏览器会显示倾斜的字体样式)

综合设置字体样式

  • font属性用于对字体样式进行综合设置
  • 选择器 {font: font-style font-weight font-size/line-height font-family;}
  • 使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开，其中不需要设置的属性可以省略，会取默认值，但必须保留font-size和font-family属性，否则font属性将不起作用

垂直对齐模式

  • vertical-align：baseline | top | middle | bottom | sub
  • vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐
  • image.png
  • image.png
  • 可以通过vertical-align 控制图片和文字的对齐关系。 默认的图片会和文字基线对齐
  • 当一行有多个元素时，给最高的元素设置vertical-align属性即可（其他元素会参照该元素）

去除图片底侧空白间隙

  • 图片或表单等行内块元素，底线会和父级盒子的基线对齐，这样会造成一个问题，就是图片底侧会有一个空白缝隙，设置vertical-align属性为bottom可以解决这个问题或者给img设置display：block

多行文本超出隐藏

溢出的文字隐藏

  • overflow: hidden
  • text-overflow: ellipsis
  • white-space: nowrap

white-space

  • 设置文本自动换行
  • 中英文换行：内容为中文时，当文字超出盒子宽度，会自动进行换行，内容为英文时，因为要保证英文单词的完整性，所以不会换行，会超出当前盒子的宽度，可以给单词之间加入空格实现自动换行
  • 值 | 描述 | | -------- | ------------------------------------ | | normal | 默认。空白会被浏览器忽略。 | | pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签 | | nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到换行标签为止 | | pre-wrap | 保留空白符序列，但是正常地进行换行 | | pre-line | 合并空白符序列，但是保留换行符 | | inherit | 规定应该从父元素继承 white-space 属性的值|

text-overflow

  • 文字发生溢出时的行为
  • 值 | 描述 | | -------- | ----------------- | | clip | 修剪文本。 | | ellipsis | 显示省略符号来代表被修剪的文本。 | | string | 使用给定的字符串来代表被修剪的文本|

多行文本超出隐藏

  • display: -webkit-box; -webkit-inline-box; 行内元素
  • -webkit-box-orient: vertical;
  • -webkit-line-clamp: 3;控制在第几行的结尾进行显示 ...
  • overflow: hidden;高度 宽度必须规定好 不然...之后一行 也会展示出来

CSS外观属性

文本颜色设置

  • color: 用于定义文本的颜色，有3种取值
    • 预定义的颜色值。如red、blue、green等
      • 块转行内：display:inline;
  • 行内转块：display:block;
  • 块、行内元素转换为行内块： display: inline-block;

透明度

  • opacity： value|inherit 设置元素的不透明级别(0-1)
  • 值 | 描述 | | ------- | -------------------------------- | | value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 | | inherit | 应该从父元素继承 opacity 属性的值|
  • 注意：IE8 以及以下浏览器 使用opacity 需要写为filter：Alpha(opacity = 50); 值为0-100

隐藏元素的几种方式

display:none

  • 彻底的隐藏了元素，不占据空间，也就不影响布局，当然也无法响应事件，被遮罩的元素会触发事件
  • 但是会引起重绘和回流，性能消耗大
  • 覆盖子元素

opcity:0

  • 当元素透明度设置为0时就相当于隐藏元素了，但是元素依然存在于原来的位置，占据了空间也可以响应事件
  • 因为没有引起页面布局的改变，所以不会引起回流，可能会引起重绘
  • 覆盖子元素

visibility:hidden

  • visibility用来设置元素的可见性
  • 当该值为hidden时，该元素变为不可见，但是不会改变页面布局，也无法响应事件
  • 对用户不可见后，点击相应的区域也无法触发绑定的事件，被遮罩的元素会触发事件
  • 不会引起回流，但是会引起重绘
  • 不覆盖子元素

绝对定位

  • 设置top和left为-9999px，将元素移出可视区域，既不会影响布局，又能让元素保持可以操作

transform

  • 设置transform的值为scale(0,0)，这种方式占据空间，无法响应事件

clip/clip-path

  • 裁剪属性，只能在chrome40+浏览器里使用

CSS背景属性

背景颜色

  • 可以通过background-color属性来添加背景颜色和背景图片，以及来进行图片设置
  • background-color：hex(16进制)|rgb|rbga

背景图片

  • background-image：none|url(url)
    • url：使用绝对或相对地址指定背景图像
    • none：无背景图（默认的）
  • background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和background-color 连用。 如果图片不重复地话，图片覆盖不到的地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色
  • 小技巧： 我们提倡背景图片后面的地址，url不要加引号

背景平铺

  • background-repeat：repeat(默认) | no-repeat | repeat-x | repeat-y

背景位置

  • background-position：length || length(length：百分数，由浮点数数字和单位标识符组成的长度值)
  • background-position：position || position(top | center | bottom | left | center | right)
  • 设置或检索对象的背景图像位置，必须先指定backgroud-image属性，默认值为(0%,0%)，如果只指定了一个值，该值将用于横坐标，纵坐标默认为50%，第二个值将用于纵坐标
  • position 后面是x坐标和y坐标。 可以使用方位名词或者精确单位
  • 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标
  • 使用场景：背景图片居中对齐

背景附着

  • background-attachment : scroll | fixed (scroll：背景图像是随对象内容滚动|fixed：背景图像固定)
  • 设置或检索背景图像是随对象内容滚动还是固定的

背景尺寸

  • background-size：width height；
  • 单位：px | % | cover（等比例铺满）
  • width 设置背景图片宽度，height 设置背景图片高度
  • 单独设置一个width，不设置height，height会等比例缩放

背景透明(CSS3)

  • CSS3支持背景半透明的写法
  • background: rgba(0,0,0,.3);
  • 最后一个参数是alpha 透明度 取值范围 0~1之间
  • 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响

背景复合写法

  • background属性的值的书写顺序官方并没有强制标准的写法
  • 为了可读性，建议如下写法
    • background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/背景大小

精灵图技术

产生背景

image.png

  • 上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户
  • 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）

本质原理

  • CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图(雪碧)

使用

  • CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位

制作精灵图

  • 大部分情况下，精灵图都是网页美工做，不过前端也要自食其力不要过度依赖美工
  • [精灵图制作网] www.toptal.com/developers/…
  • 精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放
  • 精灵图的宽度取决于最宽的那个背景
  • 可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适
  • 精灵图的最底端，留一片空隙，方便我们以后添加其他精灵图
avatar
文章
阅读
粉丝