Day 1
(一)安装vscode
安装：插件
chinese 汉化
open-in-browser ---> 启用
设置自动保存：文件 —> 自动保存
(二)认识页面结构：
Emmet：?
直接出结构： ！
<!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>页面标题-Hello</title>
</head>
<body>
</body>
</html>
(三)常用标签
1.标题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vHs1wbuF-1635241238541)(/Users/zhuzuo/Library/Application Support/typora-user-images/image-20211026105959303.png)]
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>二级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.段落
<p>段落</p>
3.图片
src=“” 属性
scr 属性名
“” 中的是属性值
scr 指定图片路径 ： 本地 or 网页
alt 当图片无法正常显示时 显示出来
" ./ " 根目录
<img src="./1.webp" alt="本地图片描述">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic15.nipic.com%2F20110612%2F7573962_131346185125_2.jpg&refer=http%3A%2F%2Fpic15.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637809590&t=ade1057264d767700dc55683dbb5dbcf?" alt="网页图片描述">
4.超链接
a标签
href 跳转地址
<a href="http://www.baidu.com">百度一下、你就知道</a>
5.块 div
<div>
用于放其他标签
</div>
6.列表
1.无序
<ul>
<li>三国</li>
<li>水浒</li>
<li>红楼梦</li>
</ul>
2.有序
<ol>
<li>三国</li>
<li>水浒</li>
<li>红楼梦</li>
</ol>
7.文字
<span>span标签一般用于设置文字</span>
(四)元素分类
1.块级元素 display ：block
? 特点：独占一行
? 默认宽度100% 与父元素等宽
? 高度默认是0（由内容撑开）
? 可以设置宽度高度
<div>块级元素</div>
div {
width: 100px;
height: 100px;
background-color: red;
border-radius: 5px;
}
2.行元素 display ：inline
? 不独占一行 从左到右
? 默认宽度内容撑开
? 默认高度0（由内容撑开）
? 设置宽度和高度无效
<span>span</span><span>span</span><span>span</span>
span {
width: 100px;
height: 100px;
background-color: yellow;
}
3.行内块元素 inline-block;
? 不独占一行 从左到右
? 默认宽度内容撑开
? 默认高度0（由内容撑开）
? 可以设置宽度和高度
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
button {
width: 100px;
height: 100px;
}
(五)文档流
文档流：
内联元素（行元素、内块元素):
默认从左到右
? 默认遇到阻碍 or 宽度不够 自动换行，继续按照从左到右的方式布局
块元素 :
? 独占一行
? 并按照从上到下的方式布局
–> 称为 流式布局
(六)Css简介
前段：
? 1.Html Hyper Text Markup Language 超文本标记语言
? 2.css Cascading Style Sheets 层叠样式表
? 3.JavaScript 交互
1.内联式
<div style="color: red;font-size: 30px;">
床前明月光，
疑是地上霜，
举头望明月，
低头思故乡
</div>
2.内嵌式
<style>
.box {
font-family: '楷体';
font-size: 30px;
color: greenyellow;
}
</style>
<div class="box">
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</div>
3.外引式
文件夹📁新建一个index.css 代码如下：
.box{
background-color: green;
}
<head>
<link href="./index.css" rel="stylesheet">
</head>
（七）选择器
1.通配符
*{
margin: 0;
padding: 0;
}
2.标签选择器
p{
font-family: "楷体";
}
3.id选择器
#first{
color: hotpink;
}
<p id="first">锄禾日当午</p>
4.class选择器
.box{
font-style: italic;
}
<h1 class="box">悯农</h1>
<h2 class="box">李绅</h2>
<p class="box">汗滴禾下土</p>
5.后代选择器
<div class="header">
<h1>咏鹅</h1>
<div><h1>咏鹅</h1></div>
<h2>罗兵王</h2>
<div>鹅鹅鹅</div>
</div>
<div class="main">
<div>
<p>曲项向天歌</p>
</div>
<div>白毛浮绿色</div>
</div>
<div class="footer">
<div>红掌拨清波</div>
</div>
.header h1{
color: red;
}
<div class="header">
<h1>咏鹅</h1>
<div><h1>咏鹅</h1></div>
<h2>罗兵王</h2>
<div>鹅鹅鹅</div>
</div>
#tips：
会先找到 所有的h1
然后向前寻找 只要能找到 class=header的 就成
无需是父元素，所以，这里会有两个红色的咏鹅
6.子代选择器
<div class="header">
<h1>咏鹅</h1>
<div><h1>咏鹅</h1></div>
<h2>罗兵王</h2>
<div>鹅鹅鹅</div>
</div>
<div class="main">
<div>
<p>曲项向天歌</p>
</div>
<div>白毛浮绿色</div>
</div>
<div class="footer">
<div>红掌拨清波</div>
</div>
.main >div> p{
color: yellowgreen;
}
<div class="main">
<div>
<p>曲项向天歌</p>
</div>
<div>白毛浮绿色</div>
</div>
#tips：
会先找到 所有的p
然后向前寻找 必须父元素是div 并且div的父元素的class = mian
所以这里 只有曲项向天歌 会变色
7.并列选择器
<div class="header">
<h1>咏鹅</h1>
<div><h1>咏鹅</h1></div>
<h2>罗兵王</h2>
<div>鹅鹅鹅</div>
</div>
<div class="main">
<div>
<p>曲项向天歌</p>
</div>
<div>白毛浮绿色</div>
</div>
<div class="footer">
<div>红掌拨清波</div>
</div>
.main,.footer{
font-size: 40px;
}
#tips：
会先找到 所有的class 为 main or footer的
然后修改字体大小
so 曲项向天歌，白毛浮绿色，红掌拨清波 字体都被设置成了40px
(八)选择优先级和权重
1.样式冲突：
优先级：
!important > 内联 >id >class >tag >* > 继承
无穷大∞ > 1000 > 100 > 10 > 1 > 0 > 无
<style>
div{
color: red;
font-size: 500px;
}
.box{
color: green ;
}
#box{
color: blue !;
}
</style>
<div id="box" class="box">
11
</div>
#tips
颜色会优先选择blut 字体大小为500px
2.相同优先级
P{
color: red;
}
P{
color: blue;
}
<p>222</p>
#tips
颜色会就近选择 最终是blue
|