CSS基础----------入门学习笔记（简单清晰版）

CSS基础

简介

整体将CSS分为CSS基础，CSS进阶和CSS高级三个部分，方便不同水平的读者进行阅读和学习，后续会逐一发布。

一、基础认知

1、CSS引入方式

1. 内嵌式：CSS写在style标签中

   • 提示：style标签虽然可以写在页面任意位置，但通常约定写在head标签中
   • 使用场景：小案例，一个页面

2. 外联式：CSS写在一个单独的.css文件中

   • 提示：需要通过link标签在网页中引入
   • 使用场景：项目中，多个页面

3. 行内式：CSS写在标签的style属性中

   • 提示：之后会配合js使用
   • 使用场景：当前标签，配合js使用

二、基础选择器

选择器的作用：
选择页面中对应的标签，方便后续设置样式

1、标签选择器

• 结构：标签名{CSS属性名：属性值；}
• 作用：通过标签名，找到页面中所有这类标签，设置样式
• 注意点：
  1. 标签选择器选择的是一类标签，而不是某一个
  2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

2、类选择器

• 结构：.类名{CSS属性名：属性值；}
• 作用：解决标签选择器不能单一设置的问题
• 注意点：
  1. 所有标签上都有class属性，class属性的属性值称为类名
  2. 一个标签可以同时有多个类名，类名之间以空格隔开
  3. 类名可以重复，一个类选择器可以同时选中多个标签
  4. 类名只能由数字，字母，下划线，中划线组成，但不能以数字或者中划线开头

3、id选择器

• 结构：#id属性值{CSS属性名：属性值；}
• 作用：主要配合JS找标签，设置样式
• 注意点：
  1. 所有标签上都有id属性
  2. id属性值一个页面中是唯一的，不可重复！！！
  3. 一个标签上只能由一个id属性值
  4. 一个id选择器只能选中一个标签

4、通配符选择器

• 结构：*{CSS属性名：属性值；}
• 作用：找到页面所有标签，设置样式
• 注意点：
  1. 开发极少使用
  2. 一般用于清除标签默认的margin和padding

三、字体和文本样式

字体

1、字体大小

• 属性名：font-size
• 取值: 数字+px
• 注意点：
  1. 谷歌浏览器默认字体大小是16px
  2. 单位需要设置，否则无效

2、字体粗细

• 属性名：font-weight

• 取值:

  • 关键字：

    正常	normal
    加粗	bold

  • 纯数字： 100-900的整百数(常用）

    正常	400
    加粗	700

• 注意点：

  1. 谷歌浏览器默认字体大小是16px
  2. 单位需要设置，否则无效

3、字体倾斜

font-style:italic;

4、字体样式 font-family

• 属性名：font-family
• 常见取值: 数字+px
• 注意点：
  1. font-family:宋体，sans-serif;(意思是如果电脑没有宋体字体，就用任意无衬线字体）
  2. 网页中的字体一定是非衬线字体

5、样式的层叠问题

• 问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染？
• 结果：此时样式会层叠（覆盖），写在最下面的会生效
• 注意点：
  1. CSS（层叠样式表），表示样式可以一层一层的层叠覆盖

6、字体font相关属性的连写

• 属性名：font（符合属性）
• 取值：font: style weight size/line-height family;（必须按顺序写）
• 省略要求：只能省略前两个，如果省略了相当于设置了默认值

7、字体间距

letter-spacing: 2px ;

文本样式

1、文本缩进

• 属性名：text-indent
• 取值：
  1. 数字+em（推荐: 1em=当前标签的font-size的大小)(相当于1em=1个字的大小）
  2. 数字+px

2、文本（内容）水平对齐方式

• 属性名：text-alignt
• 取值：

  属性值	效果
  left	左对齐
  center	居中对齐
  right	右对齐

水平居中方式总结

• text-align： center能让哪些元素水平居中？

1. 文本
2. span标签，a标签
3. input标签，img标签

• 注意点：如果需要让有四行元素水平居中，text-align：center需要给以上元素的父元素设置

3、文本修饰（加各种线）

• 属性名：text-decoration

• 取值：

  属性值	效果
  underline	下划线（常用）
  line-througt	删除线（不常用）
  overline	上划线（几乎不用）
  none	无装饰线(常用）

  • 注意点：开发中会使用**text-decoration:none；**清除a标签默认的下划线

4、行高

• 作用：控制一行的上下行间距
• 属性名：line-height
• 取值：
  1. 数字+px
  2. 倍数(当前标签font-size(自己字号)的倍数）
• 行高与font连写：
  font: style weight size/line-height family;（必须按顺序写）；

标签水平居中方法总结：

如果让div,p,h水平居中：通过 margin:0 auto;实现