一 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的学习,使得网页设计更加美观并且不单一