目标:
CSS是什么?
名称:重叠样式表
HTML专注结构,CSS专注样式。
所以CSS就是改变展示效果的。
使用格式:
<style>
选择器 {
声明1;
声明2;
……
}
</style>
那选择器是什么?
选择器是用于选择文本中的标签的。
分类:基础 复合
基础选择器分类:
- 标签:
修改标签样式,如<h1></h1>
h1 {
声明1
}
注意:修改<body>标签的展示的时候,内部嵌套的标题标签不会改变对样式
- 类:
选择器名称格式:
.类名 {
}
标签内加属性 class =“类名”
- 通配符:
选择器: 修改所有标签
* {
}
- id:
只能使用一次
#定义 {
}
使用:
<标签 id = "定义">
字体属性
可修改:字体、大小、粗细、斜体
字体:font-family,逗号隔开多个字体,依次判断是否显示
文字大小:px是像素的意思
front-size 数值px
加粗:可用于给标题去加粗效果
front-weight: none/bold/数值
斜体:oblique我看了一下网上观点,不常用。
font-style:normal/italic/oblique;
复合使用:
front: front-style front-weight font-size/line-height font-family
注意: 可以省略,必须保留size和family属性。大小和字体必写。
front: - - font-size/- font-family
文本属性
文本属性相关关键词:
颜色、对齐、装饰、缩进、行距
CSS引用
行内:
<div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
内部:
在HTML页面内
外部:
单独建个CSS文件放样式:
引用找到的说明
link:<link rel="stylesheet" type="text/css" href="*.css" />
(1)link:
link语法格式中,rel指的是关联(relation),type指的是类型,href指的是链接文件路径。
link的作用主要用来引入CSS和网页图标,指示告知搜索引擎,网页之间的关系等。
调试
F12按出
选择ELEMENTS
左侧展示结构,右侧展示样式。选择页面上元素会自动展示使用的样式。被覆盖或者使用错误的样式,会有一个删除线出现。
所以用于测试、和调试。
右侧改动内容能立即展示效果,但是F12界面的改动不会被保存。
需要把改动内容移动到对应的HTML和CSS文件。