前端小扫盲
快捷键
-
快速写head头：英文状态下，输入“!”，然后回车
-
输入div然后enter，可快速输入< div>< /div>模块
-
输入“h200”然后enter，可快速输入height：200px
-
输入“w200”然后enter，可快速输入width：200px
-
代码块缩进：[前缩进] shift + tab；[后缩进] tab
-
输入“div{hello world}”可快捷输入
<div>hello world</div> -
输入“div.hello”然后回车，可快捷输入
<div class="hello"></div> -
输入“div#world”然后回车，可快捷输入
<div id="world"></div> -
输入“ul>li>a”然后回车，可快捷输入三级标签
<ul> <li><a href=""></a></li> </ul> -
输入“ul>li*8{qcby$}”然后回车，可快捷输入8个最后数字不同的li标签
<ul> <li>qcby1</li> <li>qcby2</li> <li>qcby3</li> <li>qcby4</li> <li>qcby5</li> <li>qcby6</li> <li>qcby7</li> <li>qcby8</li> </ul> -
输入“div.hello+div.world+div.qcby”然后回车，可快捷输入如下标签
<div class="hello"></div> <div class="world"></div> <div class="qcby"></div>
查看网页的方法
- 直接在文件夹中打开html文件
- 安装扩展插件Live Server后，在Visual Studio中右击[open with Live Server]运行
样式的使用
方法1：行内样式（仅对当前行起作用）
<body>
<div style="color: blue;font-size: 30px;font-weight: bold;">小茶宝最喜欢蓝色了</div>
<div>可爱的宝宝</div>
</body>
展示效果：
方法2：内部样式（在head中添加style）
<head>
...
<style>
/*语法：
选择器{
样式属性1:样式值1;
样式属性2:样式值2;
样式属性3:样式值3;
}*/
</style>
</head>
优点：
1、对于多个相同模块使用
2、降低代码耦合度，方便复用
方法3：外部样式（在head中添加link）
<head>
...
<link rel="stylesheet" href="xxx.css">
</head>
说明：
1、需在同目录下创建一个css文件
2、在css文件中使用语法同方法2
3、该方法达到了文件级的分离（多个网页统一样式做到了方便管理）
覆盖
- 样式必须相同才会覆盖，不同的属性会叠加
- 优先级关系：行内样式 > 内部样式 = 外部样式（谁后写的覆盖掉之前的）
盒子模型【使用display来设置】
块级盒子模型特征：
- 独占一行；
- 对宽度、高度支持（即使设置了宽度，仍会独占一行）；
- 支持对齐方式（text-align:center）
（在设置的宽度或者整行中，有空隙是居左、居右、居中）- 常见的标签：div、h1~h6、ul、ol、li等
- 默认属性为 display：block（可更改为inline、inline-block）
内联级盒子模型特征：
- 不独占一行；
- 对宽度、高度不支持
- 不支持对齐方式
- 常见的标签：span、a等
- 默认属性为 display：inline（可更改为block、inline-block）
内联块级盒子模型特征：
- 不独占一行；（摆到放不下了会自动换行）
- 对宽度、高度支持
- 支持对齐方式
- 常见的标签：img、input等
- 默认属性为 display：inline-block（可更改为block、inline）
弹性盒子模型【display：flex】
- 字段为display：flex
- 默认总会让内部的子元素始终横着排列
- 不设置该属性会按照盒子自己的特征显示
盒子内部结构
内到外分为：内容区、填充区、边框区、外边距区
- 内容区
height、width默认是对内容区起作用
- 填充区
- padding-设置内容与边框的距离
- 分开设置填充区：padding-top、padding-bottom、padding-left、padding-right
- 合并设置填充区：以上为开始，顺时针旋转，不够对称
- padding填充默认是外扩的方式
div{
padding-top:10px;
padding-right:30px
padding-bottom:20px;
padding-left:30px;
}
与下方效果等同：
div{
padding:10px 30px 20px;
}
- 边框区：border 复合属性
方面来区分：
- border-style：边框的样式
- border-width：边框的宽度
- border-color：边框的颜色
方向来区分
- border-top：上边
- border-bottom：下边
- border-left：左边
- border-right：右边
div{
border-top-style:solid；
border-top-color：bule；
border-top-width：10px；
}
与下方效果等同：
div{
border-top:10px solid blue;
}
上左右边框效果一样，下无样式，可：
div{
border:10px solid blue;
border-bottom:none;
}
- 外边距区margin（调盒子与盒子之间的距离）
- 增加外边距后，不会影响盒子的大小
- 分开设置填充区：margin-top、margin-bottom、margin-left、margin-right
- 合并设置填充区：以上为开始，顺时针旋转，不够对称
- 特例：左右外边距可以使用auto，对上下是不起作用的
margin：10px auto；：居左居右的宽度是一样的
- 设置盒子大小：box-sizing
- 其默认值是：content-box
- border-box（内容区+填充区+边框区，会内压内容区的宽度）
选择器：找寻html元素
-
第一类：基本选择器
-
1、原色选择器 E{}，*{}代表所有html元素
// 所有div内都是红色 // 所有盒子内部都是蓝色 dvi{ *{ color:red; color:blue; } } -
2、属性选择器 E[attr=value]{} ^=前缀 $=后缀 *=包含 =严格的等于
<div>hello world</div> <div id="aa">div:id=aa</div> <div id="bb">div:id=bb</div> <div id="aaeebb">div:id=aaeebb</div> <div id="bbee">div:id=bbee</div> <div id="ccaa">div:id=ccaa</div> <div class="aabbcc">div:class=aabbcc</div>div[id]{color: green;}
div[id^=aa]{color: red;}
div[id$=ee]{color: blue;}
div[id*=aa]{color: purple;}
div[id=aa]{color: yellow;}
-
3、id选择器 #id值（属性选择器的简化）
// 等同于 div[id=aa] #aa{ color:yellow } -
4、class选择器 [.class值]（属性选择器的简化,可以前边加上元素）
<div class="zz">div:class=zz</div> <div id="bbee">div:id=bbee</div> <div id="ccaa">div:id=ccaa</div> <h1 class="zz">h1:class=zz</h1>.zz{color:blue}
div .zz{color:blue}
-
5、包含选择器 selector1 selector2 …{}
<div> <h1> <a href="#" class="jl">百度</a> </h1> </div> <h1 href="#" class="jl">京东</h1>h1 .jl{color:red}
-
6、子选择器 selector1>selector2> …{}
<ul> <li> <a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> <li><a href="#">二级菜单3</a></li> </ul> </li> <li><a href="#">一级菜单2</a></li> </ul>
body>ul>li>a{ color:red}// 孩子级的找人
-
7、兄弟选择器 selector1~selector2{} 从selector1之后寻找兄弟关系的selector2元素
（选择器只能往下走）<ul> <li>qcby1</li> <li>qcby2</li> <li class="java">qcby3</li> <li>qcby4</li> <li>qcby5</li> <li class="jl">qcby6</li> <li>qcby7</li> <li>qcby8</li> </ul> <ul> <li>qcby1</li> <li>qcby2</li> <li>qcby3</li> <li>qcby4</li> <li>qcby5</li> <li>qcby6</li> <li>qcby7</li> <li>qcby8</li> </ul>展示效果
.java~li{ color: red; }
.java~.jl{ color: blue; }
-
8、选择器组合 selector1,selector2,…{}
<h1><a href="#">aabbcc</a></h1> <a href="#">1234</a> <h1>1111</h1> <div>2222</div> <p class="jl">jl</p>h1 a,a,div,h1,.jl{ color:red}// 指定标签标红
-
-
第二类：伪元素选择器
- 1、首字符伪元素选择器【::first-letter】
- 使用前提：块级元素
<div>内容管理</div>div::first-letter{ color:red; font-size: 30px; }
- 2、首行伪元素选择器【::first-line】
- 使用前提：块级元素
- 3、自定义前置伪元素选择器【::before】
-
使用要求：必须使用content属性
-
除自定义文本外，也可以放置图片，使用url()即可
// 在“青城博雅”前增加“qcby”内容 <div>青城博雅</div>div::before{ content: "qcby"; color:red; font-size: 30px; }```
-
- 4、自定义后置伪元素选择器【::after】
- 使用要求：必须使用content属性
- 除自定义文本外，也可以放置图片，使用url()即可
- 1、首字符伪元素选择器【::first-letter】
-
第三类：伪类选择器
-
1、结构性伪类选择器：nth-child()
- nth-child(1)等价于 :first-child
- nth-last-child()倒着找
- 用法1：从1开始代表第一个元素
- 用法2：预定义词 odd(奇数)、even（偶数）
- 用法3：加法表达式，从0开始，比如2n+1
- nth-last-child(1) 等价于：last-child
// 对第四个位置的内容标红 <ul> <li>qcby1</li> <li>qcby2</li> <li>qcby3</li> <li>qcby4</li> <li>qcby5</li> <li>qcby6</li> <li>qcby7</li> <li>qcby8</li> </ul>[奇数行展示为红色]
ul li:nth-child(odd){ color: red;}
[偶数行展示为蓝色]ul li:nth-child(even){ color: blue;}
[第4行展示为绿色]ul li:nth-child(4){ color: green;}
[奇数行展示为红色]ul li:nth-child(2n+1){ color: red;}
[前4行展示为红色]ul li:nth-child(-n+4){ color: red;} //不识别减法
[除前3行外展示为红色]ul li:nth-child(n+4){ color: red;}
[倒着找的第一行展示为红色]ul li:nth-last-child(1){ color: red;} -
2、UI状态伪类选择器
-
:hover 悬停状态。全部元素可用
ul li:hover{ color: red; }
-
:foucs 焦点状态。主要使用是表单元素，单行文本输入框元素
<input type="q" name="" id="">input:focus{ background-color: green; }
-
-
3、其他伪类选择器
-
:not 排除选择器。可以连续排除，写法就是连续书写:not
<ul> <li>qcby1</li> <li class="java">qcby2</li> <li>qcby3</li> <li>qcby4</li> <li class="hello">qcby5</li> <li>qcby6</li> <li>qcby7</li> <li>qcby8</li> </ul>ul li:not(.java):not(.hello){ color: red; font-size: 20px; }
-
-
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
