第四讲_css常用属性

css常用属性

  • 1. css颜色表示方式
    • 1.1 颜色名
    • 1.2 rgb 和 rgba
    • 1.3 hex 和 hexa
    • 1.4 hsl 和 hsla
  • 2. css 常用属性
    • 2.1 常用的文本属性
    • 2.2 常用的列表属性
    • 2.3 常用的边框属性
    • 2.4 表格独有属性
    • 2.5 常用的背景属性
    • 2.6 常用的鼠标属性

1. css颜色表示方式

1.1 颜色名

css中定义了一些颜色名,可以直接使用颜色名来表示颜色。

选择器 {
  color: red;
}

点击跳转到mdn,查看css支持的颜色名

1.2 rgb 和 rgba

/* 红、绿、蓝 */
选择器 {
  color: rgb(186, 186, 186);
}

/* 红、绿、蓝、透明度 */
选择器 {
  color: rgba(186, 186, 186, 0.5);
}

1.3 hex 和 hexa

/* 1-2位:代表红,范围是00-ff*/
/* 3-4位:代表绿,范围是00-ff*/
/* 5-6位:代表蓝,范围是00-ff*/
选择器 {
  color: #000000;
}

/* 7-8位:代表透明度,范围是00-ff*/
选择器 {
  color: #00000011;
}

1.4 hsl 和 hsla

/* 色相:0deg ~ 360deg*/
/* 饱和度:0~100% */
/* 亮度:0~100% */
选择器 {
  color: hsl(色相, 饱和度, 亮度);
}

/* 透明度:0~100% */
选择器 {
  color: hsla(色相, 饱和度, 亮度, 透明度);
}

2. css 常用属性

2.1 常用的文本属性

  • font-size:文字大小

  • font-family:字体族

  • font-style:字体风格

  • font-weight:字体粗细(取值 100-1000)

  • color:字体颜色

  • letter-spacing:字符间距(一个中文就是一个字符)

  • word-spacing:单词间距

  • text-decoration:文本装饰

    /* 划线位置:overline:上划线、line-through:中划线、underline:下划线、none:不加装饰 */
    /* 划线类型:dotted:虚线、wavy:波浪线 */
    /* 划线颜色:支持所有颜色表示方式 */
    选择器 {
      text-decoration: 划线位置 划线类型 划线颜色;
    }
    
  • text-align:文本水平对齐

  • line-height:行高

  • vertical-align:同一行元素之间或表格单元格内文字的垂直对齐方式

    /* baseline:使元素的基线与父元素的基线对齐 */
    /* top:使元素的顶部与其所在行的顶部对齐 */
    /* middle:使元素的中部与父元素的基线加上父元素字母x的一半对齐 */
    /* bottom:使元素的底部与其所在行的底部对齐 */
    /* 不能控制块元素 */
    选择器 {
      vertical-align: 划线位置 划线类型 划线颜色;
    }
    
  • text-shadow:文本阴影

    <html>
      <style>
        .outer {
          width: 500px;
          height: 500px;
          background-color: gold;
          /* 参数一:水平阴影的位置,必填 */
          /* 参数二:垂直阴影的位置,必填 */
          /* 参数三:模糊距离,可选 */
          /* 参数四:阴影的颜色,可选 */
          box-shadow: 10px 10px 10px red;
        }
      style>
    
      <div class="outer">div>
    html>
    
  • white-space:文本换行方式

  • text-overflow:文本溢出

    <html>
      <style>
        .outer {
          width: 100px;
          background-color: aqua;
          /* 文本不换行 */
          white-space: nowrap;
          /* 溢出的用...代替 */
          text-overflow: ellipsis;
          /* text-overflow 需要设置这个属性才有效 */
          overflow: hidden;
        }
      style>
    
      <div class="outer">
        hello world hello world hello world hello world hello world hello world
      div>
    html>
    

2.2 常用的列表属性

  • list-style-type:指定类别的符号类型
  • list-style-position:列表的符号位置
  • list-style-image:采用指定的图片作为列表符号

2.3 常用的边框属性

  • border-width:边框的宽度
  • border-color:边框的颜色
  • border-style:边框的线条类型
  • border-radius: 边框的圆角半径

2.4 表格独有属性

  • table-layout:控制表格的列宽
  • border-spacing:控制单元格的间距
  • border-collapse:合并相邻单元格的边框
  • empty-cells:隐藏没有内容的单元格
  • caption-side:设置标题的位置

2.5 常用的背景属性

  • background-color:设置背景色

  • background-image:设置背景图

  • background-repeat:设置背景图片重复的方式

  • background-positon:设置背景图片的位置

  • backgorund-origin:设置背景图的原点

    选择器 {
      /* 从 padding 区域开始显示背景图(默认值)*/
      backgorund-origin: padding-box;
    
      /* 从 context 区域开始显示背景图 */
      backgorund-origin: content-box;
    
      /* 从 border 区域开始显示背景图 */
      backgorund-origin: border-box;
    }
    
  • backgroud-clip:设置背景的向外剪裁的区域

    选择器 {
      /* 从 border 区域外开始剪裁(默认值) */
      background-clip: border-box;
    
      /* 从 padding 区域外开始剪裁 */
      background-clip: padding-box;
    
      /* 从 content 区域外开始剪裁 */
      background-clip: content-box;
    
      /* 背景只呈现在文字上(text 为实验性,需要加前缀) */
      background-clip: text;
    }
    
  • background-size:设置背景图的大小

    选择器 {
      /* 通过长度指定背景图的大小 */
      background-size: 100px 100px;
    
      /* 通过百分比指定背景图的大小,相对于父元素 */
      background-size: 100% 100%;
    
      /* auto:默认值,背景图的真实大小 */
      background-size: auto;
    
      /* contain:将背景图等比例缩放,当图片的宽高比与父元素的宽高比不一样时,会出现没有背景图的区域 */
      background-size: contain;
    
      /* cover:将背景图等比例缩放,当图片的宽高比与父元素的宽高比不一样时,会出现背景图显示不完整 */
      background-size: cover;
    }
    
  • 多背景图

    选择器 {
      background: url("/path") no-repeat left top, url("/path") no-repeat right
          top, url("/path") no-repeat left bottom, url("/path") no-repeat right
          bottom;
    }
    

2.6 常用的鼠标属性

  • cusor:设置鼠标光标的样式

ps:博文中是常用的css属性,更完整的css属性使用可以访问mdn网站。
https://developer.mozilla.org/zh-CN/

你可能感兴趣的:(CSS样式,css,前端,css3)