当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

HTML基础学习第七天

2020-04-08 00:23前端开发基础 人已围观文章来源:成都SEO文章作者:小成站长

简介1.emmet语法快速生成html标签和样式 样式快速生成 列如 样式 text-align: center; 快捷方式 tac + Tab; 技巧,样式首字母 wid...

1.emmet语法快速生成html标签和样式
 
样式快速生成
 
列如 样式
text-align: center;
 
快捷方式
tac + Tab; 技巧,样式首字母
 
width: 20px;
 
w20 + tab 
--------------------------------------------------------
2.快速格式化代码
 
文件-------------》首选项-------------》设置
 
2.搜索 emmet.include;
 
3.在settings.json下的用户 添加语句
 
"editor.formatOnType":true,
"editor.formatOnSave":true
 
ALT+Shift+F 格式化代码
 
----------------------------------------------------
选择器
 
分为 基础选择器 
复合选择器
 
复合选择器包括
--------------------------------------------------
后代选择器
 
语法 
 
元素1 元素2 {} 有儿子属性的时候才用 列入    ul > li >a
 
ul li {
color: blue;
}
 
ul li a {
color: red;
}
------------------------------------------------------
可以使用类名
 
.learn li a {
 
}
------------------------------------------------------
(儿子)子选择器
div > p
选择所有 div儿子 p标签 
 
----------------------------------------------------
并集选择器
div 和 p
 
div,
p {
 
}
 
 
伪类选择器
 
: 就是伪类选择器
--------------------------------------------------------------
1.链接伪类选择器
a:link 没有访问的链接
 
a:visited 访问过的链接
 
a:hover 鼠标经过的链接
 
a:active 鼠标按下,没有弹起
----------------------------------------------------------------------
链接伪类注意事项
 
1.顺序不能颠倒
 
focus 伪类选择器
 
//把获得的光标input表单元素选取出来 //
input:focus {
 
background-color:yelow;
}
 
-----------------------------------------------------------------------
复合选择器总结:
 
选择器 作用 案例 特征 使用情况 用法
后代选择器 用来选择后代 ul li 可以是子孙后代 较多 符号是空格 ul li  .nav a
子代选择器 选择下级元素 ul > li 只选亲儿子 较少 符号是大于 ul>li .nav>p
并集选择器 选择相同样式元素 ul,ol,.nav 用于集体声明 较多 符号是逗号 .nav, .header
链接伪类选择器 选择不同状态的链接 a:hover 跟链接相关 较多 a{} a:hover 实际开发
:focus选择器 选择获得光标的表单 input:focus 跟表单相关 较多 input:focus 鼠标选中改变背景颜色
 
 
 
--------------------------------------------------------------------------
 
CSS的元素显示模式
块级元素
 
行类元素
 
 
注意:文字类元素不能使用块级元素
 
<p>  里面不能放<div>
 
<h1>-<h6>不能放div
-------------------------------------------------------------------------
行内元素
<a> <strong><b><em><i><del><ins><u><span>
 
行内元素特点
 
1.行内元素,一行可以显示多个
 
2.高,宽无效
 
3.默认宽度就是它本身
 
4.行内元素只能容纳文本,其他行内元素
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们