6_CSS样式_颜色_字体_文本

关于颜色的小知识

颜色是通过对红、绿和蓝光的组合来显示的。早期的电脑只支持最多 256 种颜色时，但是现在大多数电脑都能显示数百万种颜色。

1. 颜色名称

   • 优点：方便快捷而且特定颜色比较准确
   • 缺点：表示颜色数量有限，英文不好的不容易记住，不支持透明度的表示

2. 十六进制方式

   • 优点：表示颜色种类多，使用较方便
   • 缺点：不支持透明颜色。

3. RGB方式 三原色配色方式

   • 优点：表示颜色种类多，使用较方便
   • 缺点：不支持透明颜色。
   • 每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

CSS3新增的颜色表示方法

1. RGBA方式三原色配色方式

   • 在RGB模式上新增了Alpha透明度。

   rgba(255, 0, 0, 0.5)

2. HSL模式

   • 语法:HSL(H,S,L)，HSL分别表示色调，饱和度，亮度
   • H:0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
   • S:(饱和度)。取值为：0.0% - 100.0%
   • L:(亮度)。取值为：0.0% - 100.0%

   hsl(120, 50%, 50%)

3. HSLA模式

   • HSL模式上新增了Alpha透明度。

   hsla(240, 50%, 50%, 0.5)

颜色值查询方法：

1. 百度查询，很多网站有提供
2. 下载相关手册等需要时查表
3. 运用绘图工具中的拾色器

CSS中常用的字体属性设置

1. font-size 规定文本的字体尺寸

   • 通常使用px,百分比，em来设置字体的大小
     • em是css中的相对单位，是相对于当前对象内的字体尺寸，若没有制定文字大小尺寸，则为浏览器默认字体大小

   #div1{font-size: 50px}
   #div2{font-size: 50%}
   #div3{font-size: 5em}
   

   • xx-small、x-small、small、medium、large、x-large、xx-large把字体的尺寸设置为不同的尺寸，默认值：medium。

   {font-size: xx-small}
   

   • smaller 把 font-size 设置为比父元素更小的尺寸。
   • arger 把 font-size 设置为比父元素更大的尺寸。

2. font-variant:规定是否以小型大写字母的字体显示文本。

   • normal 默认值。浏览器会显示一个标准的字体。
   • small-caps 浏览器会显示小型大写字母的字体。

3. font-style:规定文本的字体样式。

   • normal 默认值。浏览器会显示一个标准的字体。
   • italic 浏览器会显示一个斜体的字体样式。
   • oblique 浏览器会显示一个倾斜的字体样式。暂时不作讲解，了解即可

4. font-weight:规定字体的粗细。

   • normal 默认值。定义标准的字符。
   • bold 定义粗体字符。
   • bolder 定义更粗的字符。lighter 定义更细的字符。
   • 100-900;定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

5. font-family:规定文本的字体系列。

   #div5{font:italic bold small-caps   60px 楷体;}
   

6. font:在一个声明中设置所有字体属性。

   • 这个简写属性用于一次设置元素字体的两个或更多方面。
   • 至少要指定字体大小和字体系列
   • 可以按顺序设置如下属性：font-style/font-variant/font-weight/font-size/font-family

7. @font-face:嵌入字体

8. 注：字体的设置还有其他几个很少的用到的属性，比如font-size-adjust为元素规定 aspect 值；font-stretch 收缩或拉伸当前的字体系列。都很少用到或者多数浏览器不支持，

    #div1{font-size: 5em}
    #div2{font-variant: small-caps}
    #div3{font-style: italic}
    #div4{font-weight: bold}
    #div5{font:italic bold small-caps   60px 楷体;}
    #div6{font:italic small-caps 40px 宋体}

    @font-face {
      font-family: "abc";
      src: url('./telefono.ttf');
    }
    p{font-family: abc;font-size: 50px}

font.png

CSS中常用的文本属性设置

掌握

1. color 设置文本颜色

   color: rgb(46, 172, 185);

2. text-align 规定元素中的文本的水平对齐方式。

   • left 默认值/right/center/justify两端对齐
   • CSS3中新增了start和end属性值，在通常情况下，start相当于left，end相当于right

   text-align: justify;
text-align: end;

3. line-height 设置行高。

   • normal/数字/百分比/px/em

   line-height: 2em;

4. text-indent 设置文本的首行缩进

   • 常用单位像素/百分比/em

   text-indent: 50px

5. text-decoration 向文本添加修饰。

   • none 默认值。显示标准的文本。
   • underline 定义文本下划线。
   • overline 定义文本上划线。
   • line-through 定义穿过文本下的一条线。
   • blink 定义闪烁的文本。
   • CSS3中还有一些新增加的属性值但是目前浏览器多不支持，不再介绍

   text-decoration: underline;

6. letter-spacing 设置字符间距。

   • 定义字符间的固定空间
   • normal 默认。/像素：（允许使用负值）

   letter-spacing: 20px;

7. word-spacing 设置字/单词间距。

   • 增加或减少单词间的空白
   • normal 就等同于设置为 0。/如果指定为长度值，会调整字之间的通常间隔；（允许使用负值）。

   word-spacing: 2em;

8. text-transform 设置对象中的文本的大小写

   • none默认。标准的文本。/capitalize每个单词以大写字母开头。/uppercase转换为大写字母。/lowercase转换为小写字母

   text-transform: capitalize;

9. text-shadow 向文本添加阴影。

   text-shadow: 10px 10px 5px rgb(203, 130, 32), 15px 15px 5px rgb(80, 6, 187)(设置两个阴影)

熟悉

1. white-space 设置元素中空白的处理方式。

   • normal 默认。空白会被浏览器忽略
   • pre 空白会被浏览器保留。其行为方式类似 HTML 中的pre标签。
   • nowrap 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。
   • pre-wrap 保留空白符，但是正常地进行换行。
   • pre-line 合并空白符，但是正常地进行换行。

   white-space: pre-line;

2. direction 设置文本方向

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

   direction: ltr;

3. word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

   • normal默认值/break-word:在长单词或 URL 地址进行换行。

   word-wrap: break-word;

4. word-break 规定非中日韩文本的换行规则。

   • normal默认值/break-all：允许在单词内换行。/keep-all只能在半角空格或连字符处换行。

   word-break: break-all;

5. text-fill-color 文本填充颜色，指定文字填充部分的颜色.目前多数浏览器不支持

6. text-stroke 文本边框颜色，指定文字描边部分的颜色。目前多数浏览器不支持

   • text-stroke-width文字的描边宽度
   • text-stroke-color文字的描边颜色
   • 备注:使用该属性需要使用浏览器私有前缀

7. text-overflow 设置是否使用一个省略标记（...）标示对象内文本的溢出

   • clip： 默认值当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。
   • ellipsis：当对象内文本溢出时显示省略标记（...）。
   • 温馨提示:该属性需要和over-flow:hidden属性、white-space:nowrap配合使用

了解

1. text-outline 规定文本的轮廓

2. text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。

3. text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。

4. text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。

5. unicode-bidi 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

   • normal/embed/bidi-override
   • 不常用，了解即可

   direction: rtl;;
   unicode-bidi: bidi-override;
   

6. hanging-punctuation 规定标点字符是否位于线框之外。

7. punctuation-trim 规定是否对标点字符进行修剪。

8. tab-size:设定一个tab在页面中的显示长度

9. text-wrap 规定文本的换行规则。注释：目前主流浏览器都不支持 text-wrap 属性。