米拓cms 网站模板在哪,无锡论坛网本地网站,上海搬家公司哪家好,南昌网站优化公司emmet的使用
emmet是一个插件#xff0c;Emmet 是 Zen Coding 的升级版#xff0c;由 Zen Coding 的原作者进行开发#xff0c;可以快速的编写 HTML、CSS 以及实现其他的功能。很多文本编辑器都支持#xff0c;我们只是学会使用它#xff1a;
生成html结构 !-- emme…emmet的使用
emmet是一个插件Emmet 是 Zen Coding 的升级版由 Zen Coding 的原作者进行开发可以快速的编写 HTML、CSS 以及实现其他的功能。很多文本编辑器都支持我们只是学会使用它
生成html结构 !-- emmet语法 --!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbody!--div*3-- div/divdiv/divdiv/div!--ulli--uil/l/ui!--divp--div/divp/p!--.classname--div classnav/div!--#idname--div iduser/div!--p.classname--p classnumb/pspan classhello/span!--结合使用--!--uili#username--ulli idusername/li/ul!--生成五个一样的,但是有序号区分自增--!--.demo$*5--div classdemo1/divdiv classdemo2/divdiv classdemo3/divdiv classdemo4/divdiv classdemo5/div!--生成标签内默认文字--!--div{文字}--div橘绿之泉/divp清晨茉莉/p /body/html
生成css样式
可以用缩写例如设置文本布局的时候需要输text-align:center来设置在中间对齐但是因为emmet的加持输入tac首字母缩写就可以了
想设置长宽只要输入w100,h100就可以把长和宽设置为100了 复合选择器
上一篇提到了选择器包括基础选择器和复合选择器基础选择器包括:标签选择器类选择器id选择器通配符选择器
复合选择器常用的包括后代选择器、子选择器、并集选择器、伪类选择器等等
复合选择器就是把我们常用的基础选择器进行了组合使用
后代选择器
后代选择器也叫包含选择器可以选择父元素内的子元素
元素1和元素2 中间一定要空格隔开
元素1 元素2 {样式声明}
!-- emmet语法 --
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 选中ol里的li */ol li {color: deeppink}/style
/headbodyolli我是ol的子元素1/lili我是ol的子元素2/lili我是ol的子元素3/li/olulli我是ul的子元素1/lili我是ul的子元素2/lili我是ul的子元素3/li/ul
/body/html 因为我们是后代选择器所以元素2可以是子代也可以是孙代总之是后代就行
!-- emmet语法 --
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 选中ol里的li */ol li {color: deeppink}ol li a{color: cornflowerblue;}/style
/headbodyolli我是ol的子元素1/lili我是ol的子元素2/lili我是ol的子元素3/lilia href#我是ol的孙元素li的子元素/a/li/olulli我是ul的子元素1/lili我是ul的子元素2/lili我是ul的子元素3/li/ul
/body/html 这个元素1 除了是标签也可以是类名。
例如一个body里有多个ul我们就需要用class名来获取改变样式的对象class也是一样可以这样一级一级索引的
!-- emmet语法 --
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleol li {color: deeppink}ol li a {color: cornflowerblue;}.ol2 li a {color: darkslateblue}/style
/headbodyolli我是ol的子元素1/lili我是ol的子元素2/lili我是ol的子元素3/lilia href#我是ol的孙元素li的子元素/a/li/olol classol2li我是ol的子元素4/lili我是ol的子元素5/lili我是ol的子元素6/lilia href#我是ol的孙元素li的子元素/a/li/olulli我是ul的子元素1/lili我是ul的子元素2/lili我是ul的子元素3/li/ul
/body/html 子选择器
只能选择某元素的最近一级子元素只能选亲儿子元素
元素1元素2{样式声明
}
并集选择器
选择多组标签一起定义样式
任何形式的选择器都可以作为并集选择器的一部分
用逗号分割
元素1,元素2{声明
} div,p,ulli {text-decoration: line-through;}
这句的意思就是把divpul下的子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#section1Go to section 1/a 。 如果 href 是以 # 开头并且没有指定具体的锚点 ID那么它不会跳转到外部网址而是仍停留在当前页面。这是为何你在不加井号时无法触发样式的问题因为浏览器默认将其视为尚未访问的页面。 也就是说真的变成了一个访问不了的新连接才会变成未访问
好了现在换了个插件叫preview on web server除了每次打开右上角会提示链接成功和需要自己ctrls以外没什么讨厌的东西默认浏览器缓存谷歌了
vscode中f11是全屏
注意事项
为了确保生效按照:live-:visited-:hover-:active的顺序
链接和标题一样需要自己单独指定样式单独选择body标签是不会对里面的链接起作用的
按需写功能有时候不需要写link和visited
focus伪类选择器
对表单的选择器一般情况下作用在input类元素
input:focus {background-color: aquamarine;} 元素显示模式
元素标签是以什么方式进行显示就叫元素显示模式
块元素
块元素一般用于结构化布局特性是 独占一行 高度、宽度、外边距和内边距可以自己控制 宽度是默认容器也就是它的父级的100% 他们自己也是一个容器里面可以放行内元素或块元素 有的元素里是不能放块元素的例如p,里面一般都是存放文字的是放不了div等块元素当然h1~h6.这种也不可以
常见的块元素有h1~h6p,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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo3/titlelink relstylesheet hrefdemo3.css
/headbodya href#大学英语/aa href#数理方程/aa href#模拟电子技术/aa href#概率论与数理统计/aa href#嵌入式与微机原理/aa href#大学物理/a
/body/html 等有时间了来聊聊行高
