emmet的使用
emmet是一个插件,Emmet 是 Zen Coding 的升级版,由 Zen Coding 的原作者进行开发,可以快速的编写 HTML、CSS 以及实现其他的功能。很多文本编辑器都支持,我们只是学会使用它:
生成html结构
<!-- emmet语法 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--div*3-->
<div></div>
<div></div>
<div></div>
<!--ul>li-->
<ui>
<l></l>
</ui>
<!--div+p-->
<div></div>
<p></p>
<!--.classname-->
<div class="nav"></div>
<!--#idname-->
<div id="user"></div>
<!--p.classname-->
<p class="numb"></p>
<span class="hello"></span>
<!--结合使用--><!--ui>li#username-->
<ul>
<li id="username"></li>
</ul>
<!--生成五个一样的,但是有序号区分,¥:自增--><!--.demo$*5-->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!--生成标签内默认文字--><!--div{文字}-->
<div>橘绿之泉</div>
<p>清晨茉莉</p>
</body>
</html>
生成css样式
可以用缩写,例如设置文本布局的时候需要输:text-align:center来设置在中间对齐,但是因为emmet的加持,输入tac(首字母缩写)就可以了
想设置长宽只要输入w100,h100,就可以把长和宽设置为100了
复合选择器
上一篇提到了选择器包括基础选择器和复合选择器,基础选择器包括:标签选择器,类选择器,id选择器,通配符选择器
复合选择器常用的包括:后代选择器、子选择器、并集选择器、伪类选择器等等
复合选择器就是把我们常用的基础选择器进行了组合使用
后代选择器
后代选择器也叫包含选择器,可以选择父元素内的子元素
元素1和元素2 中间一定要空格隔开
元素1 元素2 {样式声明}
<!-- emmet语法 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选中ol里的li */
ol li {
color: deeppink
}
</style>
</head>
<body>
<ol>
<li>我是ol的子元素1</li>
<li>我是ol的子元素2</li>
<li>我是ol的子元素3</li>
</ol>
<ul>
<li>我是ul的子元素1</li>
<li>我是ul的子元素2</li>
<li>我是ul的子元素3</li>
</ul>
</body>
</html>
因为我们是后代选择器,所以元素2可以是子代,也可以是孙代,总之是后代就行
<!-- emmet语法 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选中ol里的li */
ol li {
color: deeppink
}
ol li a{
color: cornflowerblue;
}
</style>
</head>
<body>
<ol>
<li>我是ol的子元素1</li>
<li>我是ol的子元素2</li>
<li>我是ol的子元素3</li>
<li><a href="#">我是ol的孙元素,li的子元素</a></li>
</ol>
<ul>
<li>我是ul的子元素1</li>
<li>我是ul的子元素2</li>
<li>我是ul的子元素3</li>
</ul>
</body>
</html>
这个元素1 除了是标签,也可以是类名。
例如一个body里有多个ul,我们就需要用class名来获取改变样式的对象,class也是一样可以这样一级一级索引的:
<!-- emmet语法 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ol li {
color: deeppink
}
ol li a {
color: cornflowerblue;
}
.ol2 li a {
color: darkslateblue
}
</style>
</head>
<body>
<ol>
<li>我是ol的子元素1</li>
<li>我是ol的子元素2</li>
<li>我是ol的子元素3</li>
<li><a href="#">我是ol的孙元素,li的子元素</a></li>
</ol>
<ol class="ol2">
<li>我是ol的子元素4</li>
<li>我是ol的子元素5</li>
<li>我是ol的子元素6</li>
<li><a href="#">我是ol的孙元素,li的子元素</a></li>
</ol>
<ul>
<li>我是ul的子元素1</li>
<li>我是ul的子元素2</li>
<li>我是ul的子元素3</li>
</ul>
</body>
</html>
子选择器
只能选择某元素的最近一级子元素,只能选亲儿子元素
元素1>元素2{
样式声明;
}
并集选择器
选择多组标签一起定义样式
任何形式的选择器都可以作为并集选择器的一部分
用逗号分割:
元素1,元素2{
声明
}
div,
p,
ul>li {
text-decoration: line-through;
}
这句的意思就是把div,p,ul下的子li都变成line-through样式的
伪类选择器
给处于不同状态的选择器添加特殊效果,例如当我把鼠标放在一个链接上,这个链接的字体会改变:
伪类选择器有很多种,例如链接伪类、结构伪类
a:link /*选择所有未被访问的链接 */
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
链接伪类
伪类选择器的特定是用冒号书写:
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: aquamarine;
}
a:hover {
color: blue;
}
a:active {
color: fuchsia;
}
四种样式:没点击过的是黑色,点击过的是青色,鼠标放置其上的是普鲁士蓝,按住链接的颜色是粉色
一样的代码放谷歌上可以,edge就不行,想把默认浏览器改成谷歌而也不行
怎么把浏览器默认改成谷歌啊啊啊啊啊edge一直爆bug
弹幕说在链接前面加一个#就会变为未访问,确实但是:
#
符号表示锚点链接,通常用于页面内跳转。例如:<a href="#section1">Go to section 1</a>
。如果
href
是以#
开头并且没有指定具体的锚点 ID,那么它不会跳转到外部网址,而是仍停留在当前页面。这是为何你在不加井号时无法触发样式的问题,因为浏览器默认将其视为尚未访问的页面。
也就是说真的变成了一个访问不了的新连接,才会变成未访问
好了现在换了个插件,叫preview on web server,除了每次打开右上角会提示链接成功和需要自己ctrl+s以外没什么讨厌的东西,默认浏览器缓存谷歌了
(vscode中f11是全屏)
注意事项:
为了确保生效,按照:live-:visited-:hover-:active的顺序
链接和标题一样,需要自己单独指定样式,单独选择body标签是不会对里面的链接起作用的
按需写功能:有时候不需要写link和visited
focus伪类选择器
对表单的选择器,一般情况下作用在<input>类元素
input:focus {
background-color: aquamarine;
}
元素显示模式
元素<标签>是以什么方式进行显示,就叫元素显示模式
块元素
块元素一般用于结构化布局,特性是:
独占一行
高度、宽度、外边距和内边距可以自己控制
宽度是默认容器(也就是它的父级)的100%
他们自己也是一个容器,里面可以放行内元素或块元素
有的元素里是不能放块元素的,例如<p>,里面一般都是存放文字的,是放不了<div>等块元素,当然<h1>~<h6>.这种也不可以
常见的块元素有:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>,<div>是最典型的块状元素
行元素
行元素也叫内联元素,主要用于文本内容中
相邻行内元素在一行上,一行可以显示多个
设置不了宽和高
默认宽度就是内容的宽度
只能容纳文本和其他行内元素,不能容纳块元素
ps:链接里不能再放链接,特殊情况可以在里面放块级元素,例如一个块表示一个链接,但是这种情况需要转换
其中<span>是最典型的行内元素,一行可以放多个
ps:行内块元素
官方不这么叫,但是有些资料将有行也有块特性的元素称为行内块元素,例如<img/><input/><td>
特点:
相邻行内块元素在一行,但是直接略有空隙,一行可以显示多个(行内元素特点)
默认宽度就算内部内容的宽度(行内)
可以调整高、行高、外边距、内边距(块级)
并列的表单:
显示模式的转换
一个模式的元素需要另一个模式元素的特性的时候,就需要转换。比如我们需要一个链接作用到一个块上,比如这种:
一个小咒语:
display:block
这样用:
a {
width: 150px;
height: 50px;
background-color: hotpink;
display: block;
}
可以把元素转换未块元素,点击块就可以进入链接
转换为行内元素:
display:line
本来是这样:改完以后是这样:
可以看见宽度变成和内容一样长了(行内元素的特性)
转换为行内块元素:
display: inline-block;
小tip:如何使单行文字垂直居中
行高=盒子的高度
行高=一行文字距离上层文字底部的高度+文字高度+一行文字距离下层顶部的高度
一个小示例:
.css:
a {
background-color: rgb(150, 144, 187);
color: black;
width: 230px;
height: 40px;
display: block;
text-indent: 2em;
text-decoration: none;
line-height: 40px;
}
a:hover {
color: rgb(255, 255, 255);
background-color: khaki;
}
.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo3</title>
<link rel="stylesheet" href="demo3.css">
</head>
<body>
<a href="#">大学英语</a>
<a href="#">数理方程</a>
<a href="#">模拟电子技术</a>
<a href="#">概率论与数理统计</a>
<a href="#">嵌入式与微机原理</a>
<a href="#">大学物理</a>
</body>
</html>
等有时间了来聊聊行高