入门
一.前端三剑客
html
完成页面架构的搭建
文件: .html
css
完成页面样式布局(装修)
文件: .css
js
完成页面功能(特效/渲染/用户交互/数据刷新)
文件: .js
二.编辑器
- 安装
官网傻瓜式安装
- 插件
插件管理器 ctrl+~ 安装 package control
使用:
安装: ctrl+shift+p =>package: install ** => 搜索插件名
卸载: ctrl+shift+p =>package: remove ** => 选取插件名
退出: esc
三.第一个页面
python
html三个组成部分
标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾)
指令: <!开头> => <!doctype> <!-- -->
`: &; 包裹 => 特殊的字母 | #十六进制数
html
<!doctype html>
<!-- 页面根 -->
<html>
<!-- 后勤 -->
<head>
<meta charset="utf-8" />
<title>first page</title>
</head>
<!-- 显示内容 -->
<body>
</body>
</html>
四.基本标签
// 最基本
div => 搭页面架构
span => 搭文本架构
换行显示
h1~h6 => 标题, h1有且只有一个,作为页面总标题
p => 段落
同行显示
文本类标签
i,em => 斜体
b,strong => 加粗
del | ins | sup | sub
组合
table>tr>th+td
form>input
功能
img 图片 | a 超链接 | hr 分割线 | br 换行
五.标签分类
单双标签
单:主功能
双:主内容(具有作用域)
行块标签(display)
行:同行显示
块:换行显示
组合标签
自定义标签
css入门
一.架构分析
页面 => div的层级结构 => 具有采用哪些功能标签显示内容
结构层 > 位置层(布局层) > 内容层
二.css引入
- 行间式
<div style=" 100px; height: 100px">
</div>
<!-- 简单直接,针对性强 -->
- 内联式
html
<head>
<style>
选择器 {
100px;
height: 100px;
}
</style>
</head>
<!-- 解耦合了,可读性强 -->
- 外联式
/* index.css */
选择器 {
100px;
height: 100px;
}
/* 适合团队高效率开发, 耦合性低, 复用性强 */
<!-- index.html -->
<link rel='stylesheet' type='text/css' href='./index.css'>
三.三种引入"优先级"分析
1.没有优先级
2.不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
3.行间式一定是逻辑最下方的样式
四.基础选择器
* | div | . | #
通配 < 标签 < 类 < id (优先级:同一标签同一属性)
标签: 一般用于最内层样式修饰
类:使用范围最广,布局的主力军
id:唯一标识的布局,不能重复
五.文本样式
/*字体样式*/
.box {
/*字族*/
/*STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";
/*字体大小*/
font-size: 40px;
/*字重*/
font-weight: 900;
/*风格*/
font-style: italic;
/*行高: 某一段文本在自身行高中可以垂直居中显示 => 文本垂直居中*/
line-height: 200px;
/*字体整体设置*/
/*字重 风格 大小/行高 字族 (风格可以省略) ***** */
font: 100 normal 60px/200px "STSong", "微软雅黑";
}
i {
/*normal清除系统字体风格*/
font-style: normal;
}
.box {
/*水平居中: left | center | right ***** */
/*text-align: center;*/
/*字划线: overline | line-through | underline */
text-decoration: overline;
/*字间距*/
letter-spacing: 2px;
/*词间距*/
word-spacing: 5px;
/*缩进*/
/*1em相当于一个字的宽度*/
text-indent: 2em;
}
a {
/*取消划线*/
text-decoration: none;
}
六.display
.box {
block: 块级标签, 独占一行, 支持所有css样式
display: block;
inline: 内联(行级)标签, 同行显示, 不支持宽高
display: inline;
inline-block: 内联块标签, 同行显示, 支持所有css样式
display: inline-block;
标签的嵌套规则:
block可以嵌套所有显示类型标签, div | h1~h6 | p
注: hn与p属于文本类型标签,所有一般只嵌套inline标签
inline标签只能嵌套inline标签, span | i | b | sup | sub | ins
inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | inpu
}
css高级选择器与盒模型
1.组合选择器
- 群组选择器
每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个
div, #div, .div {
color: red
}
- 后代(子代)选择器
.sup .sub {
后代
}
.sup > .sub {
子代
}
- 兄弟(相邻) 选择器
.up ~ .down {
兄弟
}
.up + .down {
相邻
}
交集选择器
section.ss#s {
标签类名id名综合修饰
}
2.复杂选择器的优先级
1.与修饰符位置无关
2.属性选择器与类选择器权重相同
3.id 无限大于 类[属性] 无效大于 标签
4.权重只与个数相关,个数(类型)均相同时,最后由位置决定
3.伪类选择器
链接标签四大伪类
:hover(悬浮) | :active(点击集合)
:link :visited
位置相关
:nth-child() | :last-child 先确定位置再匹配类型
:nth-of-type() 先匹配类型再确定位置
取反
选择器:not(修饰词) | div:not(:nth-child(2))
4.盒模型
margin + border + padding + content(width x height)
都具有自身区域
margin参与布局,不参与盒子显示,其他都参与盒子显示
border颜色自身定义,padding和content颜色有背景色填充
python
整体设置
padding: 上 右 下 左 (无值边取对边)
分开设置
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
python
整体设置
border: 10px solid black;
分开设置
border-top: 10px solid black;
border-right: 10px solid black;
border-bottom: 10px solid black;
border-left: 10px solid black;
如何要保证显示区域大小不变,增加了padding和border,可以相应减小content的区域
5.盒模型布局
完成自身布局: margin-left | margin-top
下移|右移: top取正值|left取正值
上移|左移: top取负值|left取负值
作为兄弟,上盒子的垂直布局会影响下盒子垂直方位, 上盒子的结束位置为下盒子的开始位置