一 Emmet语法
Emmet是用缩写来提高html/css的编写速度,在Vscode内部已集成该语法。
1 快速生成HTML结构语法。
1.快速生成标签只需输入标签名然后tab键。
2.快速生成多个相同的标签在标签后面加上*即可。
3.如果有从属关系使用>,例如ul>li就可以了。
4.如果有平行关系就使用+,例如div+p.
5.生成带类名或者id时,可直接使用.red或则#red。
6.如果想要使用自增的操作,使用自增符号$。
7.想要快速生成标签内部的内容,使用{},例如div{你好}+tab键。
2 快速生成CSS样式。
CSS采用简写的方式单词的第一个字母+数字。
例如w100表示width: 100px;
二 复合选择器
复合选择器是建立在基础选择器上的,对基础选择器进行组合而形成的。
常用的复合选择器有:后代选择器,子选择器,并集选择器,伪类选择器等等。
2.1 后代选择器
后代选择器有别叫为包含选择器,可以选择父元素里面的子元素。
语法规范:
元素1 元素2 {样式声明}(选择1里面的2 两个元素之间用空格隔开)
<!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>后代选择器</title>
<style>
ol li {
color: red;
}
</style>
</head>
<body>
<ol>
<li>我是ol</li>
<li>我是ol</li>
<li>我是ol</li>
</ol>
<ul>
<li>我是ul</li>
<li>我是ul</li>
<li>我是ul</li>
</ul>
</body>
</html>
2.2子选择器
子选择器只能选择作为某一元素的最近一级的子元素。
语法:
元素1>元素2{样式声明} 表示选择选择元素1里面所有的最近一级的元素2.
<!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>子选择器</title>
<style>
.gary>a{
color: red;
}
</style>
</head>
<body>
<div class="gary">
<a href="#">你好</a>
<p>
<a href="#">他好</a>
</p>
</div>
</body>
</html>
2.3并集选择器
并集选择器可以选择多组标签,为他们定义相同的样式。
并集选择器是各选择器通过,连接。
语法:元素1,元素2{样式声明}
并集选择器一般竖着写标签名。
<!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>并集选择器</title>
<style>
div,
p,
.yang li {
color: red;
}
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>喜羊羊</span>
<ul class="yang">
<li>懒洋洋</li>
<li>美羊羊</li>
<li>沸羊羊</li>
</ul>
</body>
</html>
2.4伪类选择器
伪类选择器用于向某些选择器添加特殊效果,最大的特点是用冒号表示(:)比如:hover, :first-child.
链接伪类选择器
a:link 选择所有未被访问的链接
a;visited 选择已经被访问的链接
a:hover 选择鼠标位于其上的链接
a:active 选择活动链接
链接伪类的注意事项:
为了确保可以生效保证link vistited hover active书写顺序
a链接在浏览器中有默认的样式,所以在实际开发中需要给链接单独的样式。
focus伪类选择器
用于选取获得焦点的表单元素。
input focus{
background-color:yellow;
}
三 CSS元素显示模式
网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的来布局我们的网页。
元素显示模式就是标签以什么方式进行显示,比如<div>独占一行,一行中可以有多个<span>标签。
1.HTML元素一般分为块元素和行内元素两种类型
1 块元素
常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<li>,<ol>等等。
块元素的特点:
1.自己独占一行。
2.高度,宽度,外边距以及内边距都是可以控制的
3.宽度默认是容器的100%。
4.其是一个容器及盒子,里面可以放行内或者快级元素。
注意:文字类的元素不能使用块级元素,(<p>里面不能放块级元素,特别是不能放<div>,同理,<h1>~<h6>也不能放。)
2.行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<span>
其中<span>标签是最经典的行内元素。
3.行内块元素
在行内元素里有几个特殊的标签,例如<img/>,<input>,<td>,他们同时具有块元素和行内元素的特点。
特点:当相邻的行内块元素在同一行时,他们之间有空隙,一行可以显示多个。
默认的宽度就是它自身的宽度。
高度,行高,外边距以及内边距都是可以控制的。
2.元素显示模式的转换
就是一个模式的元素想要另外一种模式的特性。
转化为块元素:display:block;
转化为行内元素:display:inline;
转化为行内块元素:display:inline-block;
<!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>显示模式转化</title>
<style>
a {
width: 150px;
height: 60px;
background-color: blue;
display: block;
}
</style>
</head>
<body>
<a href="#">你好</a>
</body>
</html>
3.小工具使用snipaste
一个强大的截图工具,可以将截图贴回到屏幕上。
Snipaste 下载(下载链接)
快捷键 F1截图 同时显示大小,并且可以直接修改。
F3截的图在桌面显示。
摁住alt可以取色。(shift可以换你选取颜色的模式 )