86_css笔记2_css的属性

一，宽高特性

1. height：
   1. auto    默认。浏览器会计算出实际的高度。
   2. length    使用 px、cm 等单位定义高度。
   3. %    基于包含它的块级对象的百分比高度
2. max-height：
   1. none    默认。定义对元素被允许的最大高度没有限制。
   2. length    定义元素的最大高度值。
   3. %    定义基于包含它的块级对象的百分比最大高度
3. minHeight:
   1. length    定义元素的最小高度。默认值是 0。
   2. %    定义基于包含它的块级对象的百分比最小高度。
4. lineHeight:
   1. normal    默认。设置合理的行间距。
   2. number    设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
   3. length    设置固定的行间距。
   4. %    基于当前字体尺寸的百分比行间距。
5. width，maxWidth，minWidth同上

二，背景属性

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

 三，文本属性

• 1，缩进属性：text-indent

  • 可以使用数字，百分比，可以继承
  • length    定义固定的缩进。默认值：0。
    %    定义基于父元素宽度的百分比的缩进。
    inherit    规定应该从父元素继承 text-indent 属性的值。

• 2，文本水平对齐的属性：text-align

  • left 左
  • right 右
  • center 中
  • justify    两端对齐
  • inherit    规定应该从父元素继承 text-align 属性的值。

• 3 ，文字间隔属性word-spacing 和字母间隔属性letter-spacing

  • normal    默认。定义单词间的标准空间。
  • length    定义单词间的固定空间。
  • inherit    规定应该从父元素继承 word-spacing 属性的值

• 4 ，字符转换属性：

  • none    默认。定义带有小写字母和大写字母的标准的文本。
  • capitalize    文本中的每个单词以大写字母开头。
  • uppercase    定义仅有大写字母。
  • lowercase    定义无大写字母，仅有小写字母。
  • inherit    规定应该从父元素继承 text-transform 属性的值。

• 5，文本装饰的属性：text-decoration

  • underline 下划线
  • line-through 删除线
  • overline 上划线
  • none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
  • blink 定义闪烁的文本

• 6，空白元素处理属性：white-space

  • normal    默认。空白会被浏览器忽略。
  • pre    空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
  • nowrap    文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
  • pre-wrap    保留空白符序列，但是正常地进行换行。
  • pre-line    合并空白符序列，但是保留换行符。
  • inherit    规定应该从父元素继承 white-space 属性的值。

• 7，文本方向属性：direction

  • ltr    默认。文本方向从左到右。
  • rtl    文本方向从右到左。

  

四，字体属性

 <title>文字属性</title>
    <style>
        p{
            font-style: italic;
            font-weight: bold;
            font-size: 10px;
            font-family:"楷体";
        }
    </style>

• 字体样式：font-style

  • normal ： 正常的， 默认就是正常的
  • italic : 倾斜的

• 字体粗细：font-weight

  • 单词取值:bold 加粗；bolder 比加粗还要粗；lighter 细线， 默认就是细线
  • 数字取值：100-900之间整百的数字

• 文字大小：font-size

  • 单位：px（像素 pixel）， 通过font-size设置大小一定要带单位， 也就是一定要写px

• 字体属性：font-family

  • 如果取值是中文， 需要用双引号或者单引号括起来
  • 设置的字体必须是用户电脑里面已经安装的字体
  • 如果设置的字体不存在, 那么系统会使用默认的字体来显示
  • 字体的备选方案：格式:font-family:"字体1", "备选方案1", ...;
  • 同时设置英文字体和中文字体：font-family: Arial, "微软雅黑";
  • 因为英文字体不包括中文字体，但中文字体包括英文字体，所有顺序要英文在前
  • 常见的中文字体和英文字体
    • 中文: 宋体/黑体/微软雅黑
    • 英文: "Times New Roman"/Arial
  • 中文字体不一定名称是中文，英文字体不一定名称是英文
    • 宋体 SimSun
    • 黑体 SimHei
    • 微软雅黑 Microsoft YaHei
  • size和family的位置是不能顺便乱放的
    size一定要写在family的前面, 而且size和family必须写在所有属性的最后
  • 字体的缩写
    • sytle可以省略，weight可以省略；
    • size不能省略，family不能省略

五，颜色属性

  <style>
        p{
            /*color: red;*/
            /*color: rgb(255,0,0);*/
            /*color: rgba(255,0,0,1);*/
            color: #FF0000;
            color: #F00;
            /*color: rgba(255,0,0,0.2);*/
            color: #ffee00;
            color: #fe0;
            color: #769abb;
        }
    </style>

• 1，颜色名称
  • color: red
• 2，RGB：
  • color: rgb(200,200,200)
• 3，RGBA：
  • color: rgba(255,0,0,1)
• 4，十六进制
  • color: #ffee00
• 5，十六进制缩写
  • 只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位，#FFEE00 == #FE0
  • color: #fe0
• 6，HSL 颜色
  • HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。
  • Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。
  • Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。
  • Lightness 同样是百分比值；0% 是黑色，100% 是白色
  • background-color:hsl(120,65%,75%)
• 7，HSLA 颜色
  • hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。
  • alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字