【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键

行间样式、内部样式和外链样式

写在style属性中的样式叫行间样式

写在style标记的样式叫内部样式

写在css文件里的样式叫外链样式，需要link链入html文件

内部样式和外链样式需要用选择器找到要设置样式的元素

选择器

通配符选择器：* 选中所有的元素

标记名选择器：div 选中所有标记名为div的元素

类名选择器：.d1 选中所有类名为d1的元素

id选择器：#a 选中id值为a的唯一元素

伪类

元素的一种状态，激活时其css会生效

hover伪类：鼠标与元素发生接触

active伪类：鼠标击中元素触发

样式

width：宽度

height：高度

transition：过渡动画：样式运动曲线动画时长

开发者工具

在浏览器中按F12键或fn+F12，打开开发者工具，选择元素，点击对应元素，显示对应样式

快捷键

/* width: 200px; */
/* w200px宽度的简写 */
/* h200px */
/* bgc背景颜色 */
/* fz20px字体大小简写 */

代码展示：

<!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>Document</title><link rel="stylesheet" href=""><style>.day{background-color: hotpink;color: black;font-size: 70px;transition: all linear 0.5s;}.day:hover{width: 1000px;height: 100px;background-color: rgb(105, 255, 173);color: rgba(0, 0, 0, 0.315);font-size: 80px;}.week{background-color: hotpink;color: black;font-size: 70px;transition: all linear 0.5s;}.week:hover{width: 700px;height: 100px;background-color: rgb(105, 255, 173);color: rgba(0, 0, 0, 0.315);font-size: 80px;}.time{background-color: hotpink;color: black;font-size: 70px;transition: all linear 0.5s;}.time:hover{width: 700px;height: 100px;background-color: rgb(105, 255, 173);color: rgba(0, 0, 0, 0.315);font-size: 80px;}.time:active{width: 90px;background-color: greenyellow;color: brown;font-size: 90px;}</style>
</head>
<body><div class="day">今天是2022年1月25日</div><div class="week">星期二</div><div class="time">下午</div>
</body>
</html>

【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键相关推荐

伪类如何动态在html设置样式,用js实现before和after伪类的样式修改的示例代码
本文介绍了使用javascript,jQuery实现修改before,after伪类的样式,分享给大家,具体如下: 最近遇到一个需要改变:before,:after 伪类的样式,发现css中并不能直接 ...
如何去掉a标签的下划线及伪类样式
首先,来了解下<a>标签的一些样式: <a>标签的伪类样式一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择 ...
同时设置伪类样式a:link和a:visited，a:link样式被a:visited样式覆盖问题
根据爱恨原则,正常书写顺序如下 :link :visited :hover :active 问题同时设置伪类样式 a:link 和 a:visited ,在超链接未被访问时,a:link 样式无效, ...
外链式样式表_CSS外链式与内联式的区别是什么
区别:CSS外链式是将css代码单独写一个以".css"为扩展名的文件中,然后使用link标签链接到html中.CSS内联式是直接使用style属性将css代码写在HTML标签中. ...
html中伪类的兼容性,css,ie8兼容性_CSS 伪类在IE8中样式无法生效，css,ie8兼容性,伪类 - phpStudy...
CSS 伪类在IE8中样式无法生效写了一个纯CSS的竖版流程样式,效果如下起始 1 2 结束使用:before生成左侧圆,首尾两头的li用:after生成竖条,其余都用border-left填补 ...
使用CSS样式对表格进行美化并对伪类的使用进行解析
 <html> <head> <tit ...
html 伪类样式偶数,CSS伪类nth-child怎么使用
CSS中有一个伪类nth-child,这个伪类该怎么使用呢?接下来的这篇文章就来给大家介绍一下CSS中的伪类nth-child的使用方法,我们来看具体的内容. nth-child是一个伪类,它为选择器 ...
安卓app和iosapp开发有什么不同呢?-综合外链_郑州专业银行管理系统设计开发工具-北京百邦视觉科技有限公司...
郑州专业银行管理系统设计开发工具 [jdfihsqw] Rushcrm客户管理系统是一款专业以客户管理为核心的CRM系统,客户管理模块拥有潜在客户.客户.联系人等功能模块,可快速.全面的记录与更新客户 ...
借Vue-iview样式修改，熟悉:before和:after伪类的用法
需求:将下图中的tag右侧的小叉背景颜色改成边框颜色,只改变css ⇓ 由于没有vue环境(还没有系统学过vue哈哈哈哈哈--),朋友给我发了iview地址: https://www.iviewui. ...

【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键

行间样式、内部样式和外链样式

选择器

伪类

样式

开发者工具

快捷键

代码展示：

【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键相关推荐

最新文章

热门文章