CSS文本样式/鼠标/溢出/显示与隐藏（二）

CSS（二）

颜色取值

1. 关键字

• 如pink,black,cyan,blue等。注意：并不是所有颜色的英文单词都可以作为关键字。需要在网址：https://developer.mozilla.org/zhCN/docs/Web/CSS/color_value#Color_keywords查看

2. 十六进制

• 用符号#加上十六进制数表示。

3. RGB函数

• 例：rgb(255,255,255)。其中三个参数分别对应红绿蓝三个颜色。

4. RGBA函数

• 例：rgba(255,255,255,0.5)。第四个参数为透明度程度，取值为0-1.

5. HSL

6. HSLA

字体样式

1. color 字体颜色

2. font-size 文字大小

3. font-family 给文字指定字体

• serif 有衬线字体

• sans-serif 无衬线字体

• fantasy 梦幻字体

• cursive 草书

• monospace 等宽

• 使用网络字体

  • 首先下载好字体
  • 然后用@font-face声明一种字体，里面带font-family和src样式。src填下载好的字体样式目录。
  • 最后在所引用的地方引用。

• 字体栈

  • font-family: 雅痞一简, 华文行楷, cursive, 宋体；设置多种字体，当第一种无效时，会自动显示下一种。

4. font-style 用于打开和关闭斜体文本

• italic 斜体

5. text-align 文字排列方式

6. text-decoration 设置或取消文本修饰

• ① none 去掉a标签下划线

• ② text-decoration-line，设置文本修饰线位置

  • line-through 中划线(删除线)
  • underline 下划线
  • overline 上划线
  • none 没有线

• ③ text-decoration-style，文本修饰线形状

  • solid 实线
  • dashed 虚线
  • dotted 点状线
  • wavy 波浪线
  • double 双实线

• ④ text-decoration-color， 文本修饰线颜色

• ⑤ 速写属性

  • text-decoration: line-through solid #444; 属性值顺序为：线的位置 线的形状 线的颜色

7. text-transform 设置或者取消字体改变

• ① upperscase 全大写
• ② lowercase 全小写
• ③ capitalize 首字母大写
• ④ full-width 等宽
• ⑤ 无修饰

8. text-shadow 设置或取消文本阴影

• text-shadow: 3px 3px 3px #444; 属性值的顺序为：水平阴影 垂直阴影 模糊距离(可选) 阴影颜色(可选)。通过把水平阴影和垂直阴影都设置为0，则四个方向上都有阴影。

列表样式

把li标签设置成同一行内显示

• 对li设置display：inline；

list-style-type列表项样式

• circle 空心圆
• dist 实心圆
• square 正方形
• lower-greek 小写希腊字符
• lower-roman 小写罗马字符
• lower-alpha 小写阿尔法字符
• lower-latin 小写拉丁字符
• upper-greek 大写希腊字符
• …

list-style-image 自定义列表项标志

• list-style-image: url(’./icons/add.png’);

list-style-position 列表项出现的位置，默认是outside

速写属性

• list-style：style image position；

cursor鼠标

• pointer 手型
• wait 等待
• help 帮助(问号)
• crosshair 十字交叉
• move 移动
• text 文本
• auto 默认，浏览器设置的光标
• default 默认光标，通常是一个箭头

溢出处理

出现原因：如果div不设置高，高度则由子元素撑起；如果div设置了高并且div内内容太多，就会出现溢出现象。

overflow

• auto 内容超出会自动产生滚动条，内容不超出则不显示滚动条
• hidden 超出内容隐藏
• scroll 强制产生滚动条

overflow-y overflow-x 单独设置y轴或x轴方向的滚动条

显示与隐藏

opacity

• 0 隐藏，位置保留
• 1 显示

display

• none 隐藏，位置不保留
• 元素对应的inline行内或block块，显示

visibility

• hidden 隐藏，位置保留
• visible 显示