1.chrom调试工具的使用:
右键点击检查,仅供检查错误,代码需自己更改;
有属性值写错和类选择器名字忘记加.等情况。
2.Emmet语法
HTML:
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成
<div></div>
- 如果想要生成多个相同标签 加上 * 就可以了 比如
div*3
就可以快速生成3个div - 如果有父子级关系的标签,可以用 > 比如
ul > li
就可以了 - 如果有兄弟关系的标签,用 + 就可以了 比如
div+p
- 如果生成带有类名或者id名字的, 直接写
.demo
或者#two tab
键就可以了,默认给div加类名或者id名字,如果要给指定标签添加,标签+.类名
Tab键即可。 - 如果生成的div 类名是有顺序的, 可以用 自增符号
$
,如.demo$*5
- 如果想要在生成的标签内部写内容可以用
{ }
表示,如div{咸咸爱吃福鼎肉片}
div{$}*5
CSS:
1.CSS 基本采取简写形式即可
2.比如 w200 按tab 可以 生成 width: 200px;
3.比如 lh26px 按tab 可以生成 line-height: 26px;
3.VSCode快速格式化代码:
Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1)文件 ------.>【首选项】---------->【设置】;
2)搜索emmet.include;
3)在settings.json下的【工作区设置】中添加以下语句:
"editor.formatOnType": true, "editor.formatOnSave": true
4.复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签)
1)后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素。
元素1 元素2 { 样式声明 }
元素1 和 元素2 中间用空格隔开
元素1 是父级,元素2 是子级,最终选择的是元素2
元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
元素1 和 元素2 可以是任意基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
ol li a {
color: pink;
}
.nav li a {
color: yellow;
}
</style>
</head>
<body>
<ol>
变态写法
<li>ol的后代</li>
<li><a href="#">假连接</a>ol的后代</li>
<li>ol的后代</li>
</ol>
<ul>
<li>ul的后代</li>
</ul>
<!-- 存在多个ul,给ul加上类名,符合选择器把该类当为元素1 -->
<ul class="nav">
<li>我是ul的人</li>
<li>我是ul的人</li>
<li>我是ul的人</li>
<li><a href="#">链接</a>我是ul的人</li>
<li><a href="#">链接</a>我是ul的人</li>
<li><a href="#">链接</a>我是ul的人</li>
</ul>
</body>
</html>
2)子元素选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
元素1 > 元素2 { 样式声明 }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子元素选择器</title>
<style>
.nav>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
3)并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。
元素1,元素2 { 样式声明 }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
/* 要求1:熊大熊二改为粉色 */
div,
p,
.pig li {
color: pink;
}
/* 要求2:并且小猪佩奇一家改为粉色 */
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
</html>
4)链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果
用冒号(:)表示
a:link
没有点击过的(访问过的)链接
a:visited
点击过的(访问过的)链接
a:hover
鼠标经过的那个链接
a:active
鼠标正在按下还没有弹起鼠标的那个链接
按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
实际开发中,先给链接定义样式,再进行链接伪类选择器的设置。
5)focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素
复合选择器总结:
5)CSS的元素显示模式
元素显示模式就是元素(标签)以什么方式进行显示
块元素和行内元素,如div和span标签
1)块元素
常见的块元素有<h1>-<h6><p> <div> <ul> <ol> <li>
,其中<div>
是最典型的块元素。块元素特点如下:
比较霸道,自己独占一行。
高度,宽度、外边距以及内边距都可以控制。
宽度默认是容器(父级宽度)的100%。
是一个容器及盒子,里面可以放行内或者块级元素。
注意:文字类的元素内不能使用块级元素。
2)行内元素
行内元素的特点:
相邻行内元素在一行上,一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注意:链接里面不能再放链接;
特殊情况链接里面可以放块级元素,但是转换一块级模式最安全。
3)行内块元素
在行内元素中有几个特殊的标签——<img/> <input/> <td>
,他们同时具有块元素和行内元素的特点。
行内块元素的特点:
和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
一行可以显示多个(行内元素特点)。
默认宽度就是它本身内容的宽度(行内元素特点)。
高度,行高、外边距以及内边距都可以控制(块级元素特点)。
元素显示模式总结:
常用的块级标签有:
div、p、标题标签、列表标签
常用的行内标签有:
a标签、span标签、ins/u、em/i、del/s、strong/b
常用的行内块标签有:
表单标签、td标签
显示模式的转换
<style>
a {
width: 200px;
height: 50px;
background: pink;
display: block;
}
div {
width: 300px;
height: 50;
background: pink;
display: inline;
}
</style>
6)snipaste工具的使用
1.F1 可以截图. 同时测量大小, 设置箭头 书写文字等
2.F3 在桌面置顶显示
3.点击图片, alt 可以取色 (按下shift 可以切换取色模式)
4.按下esc 取消图片显示
7)案例:简洁版小米侧边栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简洁版小米侧边栏</title>
<style>
a {
width: 230px;
height: 40px;
background-color: #55585a;
display: block;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
line-height: 40px;
/* 保证文字垂直居中 行高包括三部分 */
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿越</a>
<a href="#">智能 路由器</a>
<a href="#">电源 配件</a>
<a href="#">健康 儿童</a>
<a href="#">家电 插线板</a>
<a href="#">耳机 音箱</a>
<a href="#">生活 箱包</a>
</body>
</html>
8)背景:
适用很小的图片,超大背景,精灵图
背景颜色:background-color
属性定义了元素的背景颜色。
background-color:颜色值;
背景图片:background-image
属性描述了元素的背景图像
background-image : none | url (url)
背景平铺:background-repeat
属性对背景图像进行平铺
background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景位置:background-position
属性可以改变图片在背景中的位置background-position: x y;
1、参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
2、参数是精确单位
如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
省略其中一个坐标,默认居中显示。
背景图片位置案例:王者荣耀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片案例1</title>
<style>
h3 {
width: 118px;
height: 40px;
/* background-color: pink; */
font-size: 14px;
font-weight: 400;
line-height: 40px;
background-image: url(images/icon.png);
background-repeat: no-repeat;
background-position: left center;
text-indent: 1.5em;
}
</style>
</head>
<body>
<h3>
成长守护平台
</h3>
</body>
</html>
超大背景图片:
body {
background-image: url(images/bg.jpg);
background-position: center top;
}
精确单位:background-position: 50px 50px;
混合单位:background-position: center 20px;
背景固定:background-attachment
设置背景图像是否固定或随着页面的其余部分滚动 background-attachment : scroll | fixed
背景属性复合写法:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: pink url(images/bg.jpg) no-repeat fixed center 40px;
背景颜色半透明的效果:
background: rgba(0, 0, 0, .3);
透明度可以把整数位省
背景总结:
综合案例:五彩导航
要点提示:
a链接属于行内元素, 要宽度高度,需要模式转换
display:inline-block;
文本水平居中、垂直居中
text-align: center; line-height: 48px;
鼠标经过标签的时候,修改背景图
.nav .bg1:hover { background-image: url(images/bg11.png); }
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五彩导航</title>
<style>
.nav a {
/* 转换为块元素 */
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height: 48px;
text-decoration: none;
color: #fff;
}
.nav .bg1 {
background-image: url(images/bg1.png);
}
.nav .bg2 {
background-image: url(images/bg2.png);
}
.nav .bg3 {
background-image: url(images/bg3.png);
}
.nav .bg4 {
background-image: url(images/bg4.png);
}
.nav .bg5 {
background-image: url(images/bg5.png);
}
/* 鼠标经过背景图片 */
.nav .bg1:hover {
background-image: url(images/bg11.png);
}
.nav .bg2:hover {
background-image: url(images/bg22.png);
}
.nav .bg3:hover {
background-image: url(images/bg33.png);
}
.nav .bg4:hover {
background-image: url(images/bg44.png);
}
.nav .bg5:hover {
background-image: url(images/bg55.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#" class="bg3">五彩导航</a>
<a href="#" class="bg4">五彩导航</a>
<a href="#" class="bg5">五彩导航</a>
</div>
</body>
</html>