WEB前端CSS—css属性

background相关

background-color

• 背景颜色
• 属性值：rgb(0,0,0)或#000或"black"
• 背景透明：rgba(0,0,0,0)，最后一个参数为[0,1]透明度；这能做到盒子背景透明，但文字不透明

background-image

• 背景图片的url路径
• 属性值：url(../imgs/puppy.jpg)

background-repeat

• 背景图片的重复方式
• 属性值：
  • repeat：重复，默认
  • no-repeat：不重复
  • repeat-x：x方向重复
  • repeat-y：y方向重复

background-position

• 图片在盒子中的位置
• 属性值，可以为：
  • x y，x和y像素坐标，顺序不可颠倒，如10px 20px
  • 两个方位名词，且顺序可颠倒，如bottom center 或 center bottom
  • 坐标和方位名词，顺序不可颠倒，如10px center；
• 若属性值只写了一个方位名词，另一个会默认居中对齐center

background-attachment

• 背景贴附方式

• 属性值:

  • scroll：滚动，图片也会随着滚动，默认
  • fixed：固定，滑动滚轮图片不滚文字滚动

• 示例：实现视差效果

  /*视差效果*/
  div:first-child{
    background: url("images/1.jpg") no-repeat center / cover;
  }
  div:last-child{
      background: url("images/2.jpg") no-repeat center / cover;
      background-attachment: fixed;		/* 固定下方图片 */
  }
  

background-size

• 背景图片大小
• 属性值，可以为：
  • w h：单位可以为像素px或百分比%；如果只写第一个，第二个默认auto等比例缩放
  • cover：保证图片始终充满背景区域，一定铺满。一般背景填充用它
  • contain：保证图片始终完整显示在背景区域，不一定铺满

background

background: color image repeat position attachment;

• 顺序无要求，区别font
• ``和background-image区别：`会撑开盒子；而背景图在底部，大小随盒子变化，不会撑开

背景渐变

background: -webkit-linear-gradient(渐变的起始位置,起始颜色,结束颜色);
background: -webkit-linear-gradient(渐变的起始位置,颜色 位置(0%),...,颜色 位置(100%));

• CSS3的新特性

• 只能加前缀，因为所有浏览器不支持，所以现在基本没人用

多背景

• CSS3的新特性

• background多个元素之间用逗号隔开

• 多背景如果要设置background-color，它一定要放到background下面，防止被覆盖

text相关

color

• 文本颜色
• 属性值：rgb(0,0,0)或#000或"black"

line-height

• 文本行间距，行高

• 单位：像素px、相对值em、百分比%

text-align

• 文本水平对齐方式，相当于html中align对其属性
• 属性值：left(默认) | right | center
• 注意是让盒子内的文字对齐，而不是盒子本身

text-indent

• 首行缩进
• 单位：em，1em就是一个汉字或英文的宽度

text-decoration

• 文本装饰
• 属性值：
  • none：标准文本，默认
  • underline：下划线
  • overline：上划线
  • line-through：中划线，删除线

• 要去掉a标签的下划线，要设置text-decoration:none;

font相关

font-family

• 字体种类

• 中文字体加双引号"微软雅黑"，英文字体不需要加Arial

• 若字体名包含空格、#、$等符号，必须加双引号"Times New Roman"
• 可同时指定多个字体，用逗号隔开，若浏览器不支持第一个会尝试下一个，直到可用
• 当设置英文字体时，英文字体名必须位于中文字体名之前

font-size

• 字体大小
• 单位：px、em、rem
• 网页中字体大小普遍14px+；并建议使用偶数字号，IE6等使用奇数会有BUG

font-weight

• 字体粗细
• 属性值：
  • normal,bold,bolder,lighter：简略描述
  • 100~900：100整数倍，无单位
• normal等效于400、bold等效于700，但更喜欢用数字表示
• 字体加粗除了<b></b>和<strong></strong>，可以用css实现，但css没语义

font-style

• 字体风格
• 属性值：
  • normal：标准样式，默认
  • italic：斜体
  • oblique：倾斜
• 字体很少加斜体，反而一般对em和i标签的斜体改为normal
• 字体倾斜除了用<i></i>和<em></em>之外，还可以用css实现，但css没语义

font

font: [style] [weight] size family;

• 使用缩写，必须按顺序书写值

• 可省略某些属性，但font-size和font-family不能省略，如font: 12px "微软雅黑";

文本特效在html和css中的实现

样式	html	css
加粗	strong、b	font-weight：bold;
倾斜	em、i	font-style：italic;
下划线	ins、u	text-decoration：underline;
删除线	del、s	text-decoration：line-through;

border相关

border-image

border-image: border-image-source border-image-slice/border-image-width border-image-repeat;

• 在内容变化的容器可以使用，边框自动填充

• 属性值：

• border-image-source：图片url路径

• border-image-slice：切割尺寸，默认单位px，不能使用小数

• border-image-width：边框宽度；切割的位置距离对应的边的距离=4个切割的尺寸，如果4个值相同可直接省略为1个

• border-image-repeat：平铺方式，

  • round：环绕，完整的自适应平铺在边框内，等比缩放
  • stretch：拉伸，拉伸显示在边框内容，变形的
  • repeat：平铺，从边框的中间向两侧平铺，自适应平铺但不是完整的