HTML的CSS
1 标签 分为两种 单标签 与 双标签
2 div容器 : 作用就是 分地 难点就是 地址
3 绝对地址为什么不用
因为别人无法访问
4 相对路径
当前文件 或 当前目录 ./ ../ /
5 span ul li a 【超链接】
6 img【图片】 srt = “地址”
7 a 【超链接】 href = "地址"
8 head :主要做不显示的数据
9 body :主要做显示的数据
10 css的使用方式:
1行内样式 style属性
2外部样式 css文件
3内部样式 style标签
选中元素 选择器
11 id #id名 class .class 标签 关键字
12 id的范围是 0 到 n class的范围是 0 到 n 值唯一的 一个不是唯一的
13 class 多个值怎么表达
class名1 + 空格 + class名2 + 空格
css
层叠模式表
样式 属性:属性值 描述不同的效果
一个元素可以多个样式
属性:属性值;
属性:属性值:
属性:属性值;
css 实现方式:
分3种:
1行内样式
用的是 style属性= "样式"
2外部样式
外部文本 css
3内部样式
style标签 =“ ”
px : 是像素
css选择器:导航 锁定元素
分3种:id class 标签
id选择器:
1目标元素肯定有id属性
2通过id选择符选中
2.1 id选择符 #id名
3添加样式
class选择器:
1目标元素肯定有class属性
2通过class选择符选中
2.1 class选择符 .class名
3添加样式
标签选择器:
1目标元素肯定有名字【关键字】
2通过关键字选择符选中
标签选择器 关键字
1添加样式
发现问题 分析问题 解决问题 论证
head :不直接显示在页面的数据
那如果出现多个同名的class,怎么锁定元素
1不要出现多个同名的class
多个模块用同一样式的话,可以不用额外再规定,直接写为同一个class
1class属性值:可以的多个 “属性值1 + 空格 + 属性值2 + 空格 + 属性值3”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二节课</title>
<!-- link标签
rel;确定链接的文件类型
href:“地址” 最好用相对地址别对绝对地址因为会出现一些问题-->
<link rel="stylesheet" href="03.css">
<style>
/*圆形幅度*/
#data1{border-radius: 50%}
.book{
/*元素的阴影*/
box-shadow: 10px 10px 10px 5px;
}
.diss{
/*字体颜色 */
color: red;
}
</style>
</head>
<body>
<div id="data1"
class="book diss"
style="width: 200px;height: 200px;background-color: red;
">
<p>英雄联盟</p>
</div>
<div id="data2" class="book"></div>
</body>
</html>