01课、导读
02课、CSS简介
1、用途:美化网页
2、html的局限性:只关注内容的语义,主要任务是布局网页元素(美化的写法可以写,但是非常麻烦)
3、CSS(Cascading Style Sheets层叠样式表)或称为CSS样式表,级联样式表。
4、也是一种标记语言
5、主要用于设置html页面中的文本内容(字体大小、对其方式等)、图片的外形(宽高、边框、边距)以及版面布局和外观显示样式
6、CSS最大价值:由html专注于去做结构呈现,样式交给CSS
03课、体验CSS语法规范
1、主要组成:选择器+一条或多条声明
给谁该样式{改什么样式}
2、位置:在<head></head>
标签内添加CSS语言!!!并在<style></style>
标签内部编写
3、eg:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 下面p为选择器,后面花括号内为声明,声明内部包含,属性:值 */
p{
color: forestgreen;
}
</style>
</head>
4、属性与属性之间以键值对存在,用冒号:
关联
5、属性之间以分号;
分割!!!
04、CSS代码风格
1、格式书写:
①、紧凑格式
p{color: forestgreen;font-size: large;}
②、展开式(推荐)
p{
color: forestgreen;
font-size: large;
}
2、样式大小写——尽量使用小写
3、空格规范:
①冒号后面加一个空格
②选择器和{}之间保留空格
05、CSS的选择器作用
1、作用:正确选择要装饰的标签
06、标签选择器
1、选择器可以分为基础选择器和复合选择器,
其中基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器、通配符选择器
2、标签选择器:(元素选择器)指用html标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的css样式
3、eg:
(在head中的style标签内)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
4、优点:快速为页面中的同类型标签统一样式
缺点:无法差异化表达
07、类选择器
1、单独选择某一个或几个标签
2、语法
结构需要用class属性来调用
.类名{
属性1:属性值1;
属性2:属性值2;
}
具体实例:只把a1和b2改为粉红色
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.my_class{
color: pink;
}
</style>
</head>
<body>
<!-- 只把a1和b2改为粉红色 -->
<div class="my_class">a1</div>
<div>a2</div>
<div>a3</div>
<div>a4</div>
<span>b1</span>
<span class="my_class">b2</span>
</body>
</html>
类选择器口诀:
样式点定义
结构类调用
一个或多个
开发最常用
3、细节:
①类名自己起的
②类名不能与标签同名
③长名称用_分割
④不能用中文
⑤基本命名规范:有命名规范开发手册.doc
08、使用类选择器画盒子(课堂按例)
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red_box {
width: 100px; /*设置宽度*/
height: 100px; /*设置高度*/
background-color: red;/* 背景颜色 */
}
.green_box {
width: 100px; /*设置宽度*/
height: 100px; /*设置高度*/
background-color: green;/* 背景颜色 */
}
</style>
</head>
<body>
<div class="red_box"></div>
<div class="green_box"></div>
<div class="red_box"></div>
</body>
</html>
09、类选择器特殊使用-多类名
1、可以给一个标签制定多个类名,从而达到更多的选择目的,这些类名都可以选出这个标签
2、多类名使用方式
多个类名在一个“”
中,之间用空格分开,一个标签中就有了多个类的属性(类似于面向对象)
eg:
<div class="green_box my_class"></div>
3、使用场景,统一修改
10、id选择器
1、id选择器可以为标有特定id的html元素指定特定的样式
2、html元素以id属性来设置id选择器,CSS中id选择器以#
来定义
3、语法
#id名{
属性1:属性值1;
属性2:属性值2;
}
例如将id为nav元素中的内容设置为红色:(与类选择器极其相似)
#nav{
color: red;
}
<div id="nav">id选择器尝试</div>
4、id与class的功能区别(用法一致,一个.类名
另一个#id名
)
id只能被调用一次,而class可以被多个标签同时调用
5、class选择器常用于修改样式,id选择器一般用于页面唯一性的元素上
11、通配符选择器
1、通配符选择器用*
定义,表示选取页面中所有元素(标签)
2、语法:
* {
属性1:属性值1;
属性2:属性值2;
}
3、通配符选择器不需要调用,自动给所有元素使用样式