本章目标
1、CSS的定义、优势
2、css的基本语法
3、引入css的方式
4、css的选择器
重点与难点
1、 Css的引用方式和选择器
要讲的内容
1. 基本的语法
选择器的名称{
属性名:属性值(有些情况要加上引号);
属性名:属性值(有些情况要加上引号);
}
比如 标记选择器的语法:
div{
color:red;
font-size:20px;
}
2. 三种选择器的命名方式,引用方式以及适用的范围
a) 标记选择器
命名方式:
tagname{
color:red;
font-size:20px;
}
Tagname指的是已有标签的名称 所以该选择器只能采用已有标签作为选择器的名称
适用范围:页面中所有该标签的元素都适用 页面中的标签不需要引用即可实现效果
b) 类型选择器
命名方式:
.anyname{
color:red;
font-size:20px;
}
Anyname指的是任意的名称 不受命名的限制
适用范围:页面中某些class属性值等于该选择器的名称的元素起作用 适用于单个的元素
只需在需要用到该选择器的元素加上class属性使其值等于该名称即可 可以在页面中多次使用同一个类型选择器
c) ID选择器
命名方式
#anyname{
color:red;
font-size:20px;
}
其中anyname可以是任意的名称
适用范围:页面中的id属性值为该选择器名称的元素起作用 使用于单个的元素
注意:与类型选择器的区别
1. 定义和引用方式不同
2. 类型选择器可以在页面中重复使用 而id选择器在页面中只使用一次
3. 引用css的三种方式
1. 第一种引用方式 定义内部样式块对象
在head中写<style type="text/css"></style> 然后再改style标签中写css的代码
2. 内联定义
在制定的标签的style属性直接写该标签的css的样式
比如 <h3 style="color: orange;font-size: 40px">专题 扫描用户硬盘文件 股票1日缩水百亿 </h3>
3.引入外部css文件 真正意义上实现表现形式和表现内容完全相分离 推荐使用的方式