前端学习笔记day04-CSS文本属性-CSS字体属性-CSS选择器

CSS文本属性-CSS字体属性-CSS选择器

一.css属性-文本

1.1. text-decoration

• 装饰线
• 常见的值:
  • none:无任何装饰线(可以去除a元素默认的下划线)
  • underline:下划线
  • overline:上划线
  • line-through:中划线(删除线)

1.2. text-transform

• 形变
• 常见的值
  • capitalize:将每个单词的首字符变为大写
  • uppercase:将每个单词的所有字符变为大写
  • lowercase:将每个单词的所有字符变为小写
  • none:没有任何影响

1.3. text-indent

• 首行缩进
• 常见的设置方式
  • text-index:10px
  • text-index:2em(刚好是缩进两个文字)

1.4. text-align(重要)

• 设置文本的对其方式
• MDN:定义行内内容(例如文字)如何相对它的块元素对齐
• 常见的值:
  • left:左对齐
  • right:右对齐
  • center:正中间显示
  • justify:两端对齐

1.5. letter-spacing word-spacing

• letter-spacing:设置字母之间的间距
• word-spacing:设置单词之间的间距
• 默认值是0可以设置负数

二.CSS属性-字体

2.1. font-size

• 文字的大小
• 常用的设置
  • 100px
  • em(1em代表100%;2em代表200%;0.5em代表50%)
  • 百分比(比如百分之50代表父元素font-size的一半)

2.2. font-family

• 文字的字体名称
• 可以设置一个或者多个字体名称
• 浏览器会选择列表中第一个计算机上有安装的字体

2.3. font-weight

• 设置文字的粗细

• 常见的值:

  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900:每一个数字表示一个重量
  • normal:等于400
  • bold:等于700

• strong丶b丶h1~h6等标签的font-weight默认就是bold

2.4. font-style

• 设置文字的样式;常规或者斜体显示
• 常见的值:
  • normal:常规显示
  • italic(斜体):用字体的斜体显示(通常会有专门的字体)
  • oblique(倾斜):文本倾斜显示(仅仅是文字倾斜)

2.5. font-variant

• 可以使小写字母的显示形式发生变化

• 值:

• normal:常规显示

• small-caps:将小写字母替换为缩小过的大写字母

• 例子

• /* 将小写英文字母变成大写,在原来字体高度不变的情况下 */
      .box{
        font-variant: small-caps;
      }
  

2.6. line-height

• 设置文本的行高

• 为什么要设置行高

  • 为了使用户更好的阅读

• 行高的严格定义:

  • 两行文字基线之间的间距

    

2.7. font缩写

• font属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height和font-family属性的简写

• 规则:

  • font-style 丶 font-variant 丶 font-weight可以随意调换顺序,也可以省略
  • /line-height可以省略,如果不省略,必须跟在font-size后面
  • font-size 丶 font-family不可以调换顺序,不可以省略

• 举例:

   .box{
        /* 1.5的行高是相对font-size的 */
        font:20px/1.5 serif;
      }
  

三.CSS常见选择器

3.1. 什么是选择器

• 按照一定规则选出符合条件的元素,为之添加CSS样式

3.2. 选择器分类

• 通用选择器
• 元素选择器
• 类选择器
• id选择器
• 属性选择器
• 伪类选择器

3.3. 通用选择器

• 所有元素都会被选中

• 一般用来给所有元素做一些通用行性的设置

  • 比如内边距,外边距
  • 比如重置一些内容

• 效率比较低,尽量不要使用

3.4. 简单选择器

• 元素选择器:使用元素的名称

• 类选择器:使用.类名

• id选择器:使用#id
  

• id注意事项:

  • 一个html文档里id值是唯一的,不能重复
  • id值如果由多个单词组成单词之间可以用中划线-,下划线_链接,也可以使用驼峰标识
  • 最好不要用标签名作为id值
  • 中划线又叫连字符

3.5. 属性选择器

• 拥有某一个属性[att]
• 属性等于某个值[att=val]
  

3.6. 后代选择器

• 后代选择器一:所有的后代(直接/间接的后代)

  • 选择器之间以空格分割
    

• 后代选择器二:直接子代选择器(必须是直接子代)

  • 选择器之间以 > 分割
    

3.7. 兄弟选择器

• 兄弟选择器一:相邻兄弟选择器

• 使用符号 + 连接
  

• 兄弟选择器二:普遍兄弟选择器

  • 使用符号 ~ 连接
    -

3.8. 交集选择器

• 需要同时符合两个选择器条件(两个选择器紧密连接)
• 为了进准的选择某一个元素
  

3.9. 并集选择器

• 符合一个选择器条件即可(两个选择器以,号分割)
  

4.0. 伪类

• 伪类是选择器的一种,它是用于选择处于特定状态的元素

• 常见的伪类: :link、:visited、:hover、:active、:focus

• 使用举例

  • a:link 未访问的链接
  • a:visted 已访问的链接
  • a:hover 鼠标挪动到链接上(悬浮)
  • a:active 鼠标按住链接没有松开

• 使用注意:

  • :hover必须放在:link和:visted后面才能生效
  • :active必须放在:hover后面才能完全生效
  • 顺序::link , :visted, :hover, :active

• 除了a元素, :hover和:active也能用在其他元素上

• focus指当前拥有输入焦点的元素

  • 文本框输入时可以聚焦

• 因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素

• 动态伪类编写顺序建议为

  • :link、:visited、:focus、:hover、:active