第三周 CSS基础 盒子模型 选择器

一 CSS基础

1 CSS概念

CSS即层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
简单说来，HTML帮助我们的网页有了内容，CSS语言就是来修饰网页一种工具。

2 CSS语言的用法

(1)引用CSS的方法

• 行内
  
  在行内添加可以使这一行文字得到我们通过CSS添加的效果。
• 内嵌样式
  
  内嵌样式在head标签内提前设置CSS，如图，代码中所有带p标签的段落都会变成红色。
  使用内嵌样式需要注意的点
  
• 单独文件
  
  通过单独创建一个CSS文件，放在单独的文件夹，在需要设置CSS样式的HTML文件里通过link链接
  
  （在VScode里可以通过直接输入link:css得到这行代码哦）
• CSS的优先级
  • 多重样式可以重叠，可以覆盖
  • 样式的优先级按照“就近原则”
  • 行内样式>内嵌样式>链接外部样式>浏览器默认样式

(2)通过CSS语言设置文字样式

• 字体大小font-size（注意单位！）
• 文本颜色color（常用的颜色的单词）
• 字体粗细font-weight（bold-加粗 normal-正常）
  颜色也可以通过设置数值来定义
  
  常用的单位里 px是像素 pt是点 pc是派卡
  
  

二 CSS选择器

(1)标签选择器

• 以标签命名的选择器 选中所有的这个标签都会生效
  
  如图，上面内嵌在body标签里的css语言对下面HTML的代码通过它们的标签进行修饰，h1标签里的文字就会是黑体 20px大小，下面同理。

(2)类别选择器

• 就是根据css和html语言里不同的类别设置不同的css，使用类别选择器时，都已<p class=" " 开头

(3)id选择器

• 与类别选择器里class的区别
  • 类别选择器里的可以被多次引用，而id选择器里的仅可以引用一次

三 盒子模型

1 什么是盒子模型？

2 内容的宽度和高度content

利用width和height属性默认设置盒子内容区域的大小

3 overflow属性

4 边框border

• 作用 属性名 属性值
• 边框粗细 border-width 数字+px
• 边框样式 border-style 实线solid、虚线dashed、点线dotted
• 边框颜色 border-color 颜色取值

四 总结

通过对于css的学习，使得网页设计更加美观并且不单一