html和css基础知识总结（3）

5-4.标签选择器

​ 选择页面上所有同类标签

5-5.类选择器.

• 谁调用谁生效 调用class=‘类名’

• 一个类选择器可以被多个标签调用

• 个标签可以同时调用多个类选择器

5-6.ID选择器#

• 需要调用 id=‘id名’
• 一个id选择器只能调用一次，多次调用不符合w3c规范
• 一个标签只能调用一个id选择器
• 一个标签可以同时调用类选择器和id选择器

5-7.通配符选择器*

5-8.文字属性font

字体设置

• 浏览器默认字体大小为16px
• 中文字体加单引号
• 多个字体之前用逗号隔开 英文字体在前面 中文字体在后面
• unicode字体写法：
• 在控制台上输入escape(‘中文字体名称’)
• 把%u替换为,最终得到文字的unicode编码

font-size:文字大小

• h1 2倍
• h2 1.5倍
• h3 1.17倍
• h4 1倍
• h5 0.83倍
• h6 0.75倍

font-family:arial ‘宋体’

font-weight 文字加粗

• 100-900不带单位
• normal默认 不加粗 400
• bold 700

font-style 文字风格

• normal默认值 不倾斜
• italic 斜体
• oblique 倾斜

font:font-style font-weight font-size/line-height font-family 其中font-size和font-family为必写 （s，w，s，f）稍微舒服

5-9.CSS外观属性

• 设置字体颜色
  • color：red; 颜色单词
  • color:rbg(0,0,255);
  • color:#000000; 十六进制
• 设置首行缩进：text-indent：2em；（1em相当于一个汉字的大小）
• 文本修饰text-decoration：underline；
  • none 无
  • underline下划线
  • line-through 删除线
  • overline上划线
• 控制盒子水平对齐方式text-align
  • left左对齐 默认
  • center 居中对齐
  • right 水平右对齐
• 注意：行内元素不能直接使用text-align和text-indent

5-10.复合选择器

• ​ 后代选择器：

  • 发生前提是嵌套的关系
  • 父元素在前 子元素在后，用空格连在一起
  • 后代选择器可以无限制的隔代
  • 只要能代表父元素，子元素，后代选择器可以是任意选择器的组合

  

• 子代选择器

• 选择是父元素的直接下一代（亲儿子），用>连接，父元素在前子在后，可以是任意选择器的组合

• 交集选择器

• 找到页面中，既是p标签，又有red这个类名的标签，设置样式

![1647700791762](http://md.zbztb.cn/uploads/1188715492662/1647700791762.png) 

• 并集选择器

  • ​ 样式相同或者部分相同的选择器，通过逗号连在一起，进行集体的声明，最后一个并集选择器没有逗号

    

• 相邻选择器

• 选择器1+选择器2

• 为了精确的选择到选择器1后面的选择器2，必须是并列关系，紧挨着的元素

5-11.emmet语法

​ 通过简写语法，快速生成代码

5-12.链接伪类选择器

• 未访问状态:link,可以省略

  

• 访问之后的状态:visited

• 鼠标悬停

• 激活状态:active

•