从前端小白到大佬第十天

CSS

1.emmet语法
2.css的复合选择器
①后代选择器
②子选择器
③并集选择器
④伪类选择器

1.emmet语法
emmet语法的前身是zen coding,它使用缩写来提高html/css的编写速度，vscode内部已经集成该语法。
①快速生成html’的结构语法
-输入标签名按tab键生成html框架如！+tab 生成html框架，div+tab生成<div></div>
-生成多个标签，标签名*n 如div*3+tab生成三个<div></div>
-父子级关系标签可写成父标签>子标签 如ul>li+tab生成<ul><li></li></ul>
-带类和id标签可写成标签名.类名（id名）如p.demo+tab生成

<p class="demo"></p>

$ *n 是从一开始自增到n 如div{$}*5+tab生成

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

②快速生成css样式语法
css基本采取简写形式即可，如
-w200+tab可以生成width：200px；
-lh26+tab可以生成line-height：26px；

③格式化代码
-shift+alt+f
-右键->格式化
-设置为保存时自动格式化
文件->首选项->设置->搜索emmet.include->再setting.json下的【用户】中添加以下语句：
“editor.formatOnType”:ture,
“editor.formatOnSave”:ture,

2.css的复合选择器
复合选择器就是由两个或多个基础选择器按照不同的方式组合而成的，可以做到更加准确、搞笑的选择目的元素。主要包括后代选择器、子选择器、并集选择器、伪类选择器等。
①后代选择器
元素一+空格+元素二+空格{
属性设置；
}
又称包含选择器，可以选择父元素中的子元素。
例子：只把ol里面的li改成红色，链接改成绿色。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网站</title><style>ol li {color: brown;}ol li a {color: rgb(11, 117, 82);}</style>
</head><body><ol>你在说什么？<li>各种字体之间必须使用英文状态下的逗号隔开</li><li>一般情况下，如果有空格隔开的多个单词组成的字体，要加引号</li><li>尽量使用系统默认自带字体，保证兼容</li><li>书写多个字体时，以第一个字体为最高优先级标准，如果系统里面没有这个字体，则以第二字体为优先，以此类推</li><li>字体设计可写在body标签内</li><li> <a href="#">孩子的孩子</a></li></ol></body>

效果：

例子二：如果有两组相同的元素
，可以用类或者id来区分，如改变第一组ol内的li的颜色改为红色，第二组ol中的链接改为绿色。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网站</title><style>.diyizu li {color: crimson;}#dierzu li a {color: darkgreen;}</style></head><body><ol class="diyizu">你在说什么？<li>各种字体之间必须使用英文状态下的逗号隔开</li><li>一般情况下，如果有空格隔开的多个单词组成的字体，要加引号</li><li>尽量使用系统默认自带字体，保证兼容</li><li>书写多个字体时，以第一个字体为最高优先级标准，如果系统里面没有这个字体，则以第二字体为优先，以此类推</li><li>字体设计可写在body标签内</li><li> <a href="#">孩子的孩子</a></li></ol><ol id="dierzu">你在说什么？<li>各种字体之间必须使用英文状态下的逗号隔开</li><li>一般情况下，如果有空格隔开的多个单词组成的字体，要加引号</li><li>尽量使用系统默认自带字体，保证兼容</li><li>书写多个字体时，以第一个字体为最高优先级标准，如果系统里面没有这个字体，则以第二字体为优先，以此类推</li><li>字体设计可写在body标签内</li><li> <a href="#">孩子的孩子</a></li></ol></body>

②子选择器
子元素选择器只能选择作为某元素最近一级子元素。即最近的一个被包含元素。
元素一>元素二+空格{
属性设置；
}

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网站</title><style>div>a {color: brown;}</style>
</head><body><div><a href="#">我是最近的被包含元素，我是div的大儿子</a><p><a href="#">我的爸爸是p，我的爷爷是div，所以我不是最近的被包含元素，我是孙子</a></p><a href="#">我是最近的被包含元素，我是div的三儿子</a></div>
</body>

效果：

③并集选择器
可以选择多组标签，同时为他们定义相同的样式。通常用于计题声明。
元素一，
元素二+空格{
属性设置；
}
例子：把熊大熊二和无序列表内的内容全改颜色

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网站</title><style>div,p,.pig li {color: coral;}</style>
</head><body><div>熊大 </div><p>熊二</p><span>光头强</span><ul class="pig"><li>小猪佩奇 </li><li>猪爸爸 </li><li>猪妈妈</li></ul>
</body>

④伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。
伪类选择器包括链接伪类、结构伪类等。
链接伪类
-a：link 选择所有未被访问的链接
-a：visited 选择所有已被访问的链接
-a:hover 选择鼠标指针位于其上的链接
-a：active 选择活动链接（鼠标按下未弹起的链接）

例子：链接样式看起来是黑色的，无下划线，鼠标放在上面时是蓝色的，点击时是紫色的，点击后是灰色的。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网站</title><style>/* 链接点击前的样式 */a:link {color: #333333;text-decoration: none;}/* 链接点击后的样式 */a:visited {color: darkgrey;}/* 鼠标经过的样式 */a:hover {color: dodgerblue;text-decoration: underline;}/* 鼠标按下，但是还没有弹起的时候 */a:active {color: indigo;}</style>
</head><body><a href="#">链接1</a></body>

看到的链接：

鼠标放上去:

点击时：截不到图

点击后：

注意：
-为了伪类链接生效，需要按照LVHA（link、visited、hover、active）的顺序声明。
-链接需要单独声明。
-实际开发中最常用形式.

a {color：#333；/*黑色无下划线*/text-decoration：none；}
a:hover {color: #369;/*蓝色下划线*/text-decoration: underline;}

：focus光标链接伪类
：focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也是主要针对于表单元素来说的。

input：focus {
background-color: yellow;
}

例子：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网站</title><style>input:focus {background-color: rgb(65, 236, 241);}</style>
</head><body><input type="text"><input type="text"></body>

效果光标在第一个text里面时，text框背景色变蓝：

从前端小白到大佬第十天相关推荐

从前端小白到大佬第九天
CSS上 1.css简介 2.css语言规范 3.css代码风格 4.css基础选择器 5.css字体属性 6.css文本属性 7.css样式 ①内部样式 ②行内样式 ③外部样式 8.综合案例-新闻页 ...
bootstrap设计登录页面_前端小白如何在10分钟内打造一个爆款Web响应式登录界面？...
对于前端小白(例如:专注后端代码N年的攻城狮),自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘,不懂UI设计,颜色搭配极度的混乱(主色,辅助色,配色,色彩渐变,动画效果等等,看起来一堆乱七八 ...
前端小白学习路线及知识点汇总（三）-- JavaScript基础
前端小白学习路线及知识点汇总(三)-- JavaScript基础一. JavaScript的组成 ECMAScript:由ECMA国际进行标准化的一门编程语言,往往被称为JavaScript或Jsc ...
前端小白分享|canvas用户上传图片选择相框并长按保存到本地
结合了几篇文章写(拼凑)出的用户上传图片然后选择相框并长按保存到本地的功能兼容苹果手机!!! 分享给像我一样的前端小白~ 先上图: 上代码: upload.html <!DOCTYPE ht ...
前端面试查漏补缺--(十) 前端鉴权
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
不带头节点的链表有哪些缺点_23张图！万字详解「链表」，从小白到大佬！
链表和数组是数据类型中两个重要又常用的基础数据类型. 数组是连续存储在内存中的数据结构,因此它的优势是可以通过下标迅速的找到元素的位置,而它的缺点则是在插入和删除元素时会导致大量元素的被迫移动,为了解 ...
Web前端小白入门指迷
大前端之旅大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR 前端等.当然在这篇文章,集中讨论一下身为小白,我们怎样去了解 Web 前端,以至达到 ...
四年，如何从前端小白蜕变为前端技术专家？
简介:作者简介:珑晴--淘系技术部前端技术专家,16 年校招实习转正进入的阿里,当时是在聚划算前端团队,随着业务变化一路从聚划算到天猫至今加入淘系技术部,负责日常活动营销的同时,也多次参与大促会场&a ...
前端小白也能快速学会的博客园博客美化全攻略
前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介一般而言,需要选一个默认的 ...

从前端小白到大佬第十天

CSS

从前端小白到大佬第十天相关推荐

最新文章

热门文章

从前端小白到大佬 第十天

CSS

从前端小白到大佬 第十天相关推荐

最新文章

热门文章

从前端小白到大佬第十天

从前端小白到大佬第十天相关推荐