$ 2022.8.2 $
$ 学习进度 : $
完成 $html$ 作业
$ css(1) \ 30 : 05 $
样式的定义方法
首先 y总 大概给我们介绍了一下 css 的作用 , 就是对 html 里面的标签产生作用 .
并举例 :
"很多标签就是在 <div> 和 <span> 的基础上加上 css 样式 , 例如 <p> , <a> 它们很常用就单独提了出来"
css 定义的三种形式 ( 行内样式表 内部样式表 外部样式表 )
1 . 行内样式表
<body>
<img width="300" src="/static/images/logo.png" alt="logo">
<img src="/static/images/logo.png" alt="" style="width: 300px; height: 100px;">
</body>
以前我们需要加上 width 来控制图片的长度 , 现在有了 style="xxx: ;" 来控制一些元素
注意不能 < ... style="width: 300px" , style="height: 100px" , 那么图片只有 width 的变化
" 300px " px一定不能省
2 . 内部样式表
类似作用是 c++ 里面的 stl , 提前预处理 , 直接拿来用
注意内部样式表的实现在 <head> 里面
基本格式
<style type="text\css"> //这里最好加上 type="text\css"
<\style>
例子 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
/*这里对所有的 img 标签产生影响*/
p {
width: 50px;
height: 50px;
background-color: lightgreen;
}
.blue-p {
background-color: lightblue;
}
/*有选择性地对 blue-p 产生影响*/
.big {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<img class="big" src="/static/images/logo.png" style="width: 300px;">
<!--也可以加 big --> //既有img 又有 big 的效果
<p class="blue-p">1</p>
<p class="big">2</p> //用 class="" 来进行引用 , 这样可以进行选择
<p class="blue-p big">3</p> <!-- 同一个class允许有多个类 只需用空格隔开即可 -->
<p>4</p>
</body>
</html>
3 . 外部样式表
相当于 c++ 里面的多文件合作
内部样式表是针对于一个页面的 , 那么多个页面每个把这些 sytle 写上去不是很傻吗
外部样式表提供类似于 "头文件" 的作用
例子:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
<link rel="stylesheet" href="/static/css/style1.css" type="text/css">
<!-- 可以加多个style -->
</head>
style.css 内部 :
p {
width: 50px;
height: 50px;
background-color: lightgreen;
}
.blue-p {
background-color: lightblue;
}
/*有选择性地对 blue-p 产生影响*/
.big {
width: 70px;
height: 70px;
}
我们把这些预设写在同一个工程里面的文件夹
直接在 <head> 里面用 <link> 引用即可.
如果有引用多个文件的配置有冲突 ( 比如一个要蓝色 , 一个要绿色 ) , 那么会执行在 <head> 中后引入的文件
"后面的会把前面的覆盖掉"
同理一个标签里面也会是这个原则
注意 css 的注释方式是 /* */