前端学习第二天（下）---使用css，打开控制台，css基本选择器，css字体标签，css背景

已于 2022-03-09 07:49:09 修改
阅读量922 收藏 2
点赞数
文章标签： 前端 photoshop vscode
于 2022-03-08 08:34:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bestier/article/details/123341187
版权

css是啥？
css被称为层叠样式表/级联样式表。用来美化html。

使用css

有三种方式：内部，外部和行内
在这里插入图片描述
在这里插入图片描述
Css不会报错，只会按照优先级进行覆盖，优先级最高的事行内样式表，最低的是外部样式表。

打开控制台

即从浏览器看结构与样式，三种办法：
1.右键 选择检查
2.F12 或者 Fn+F12
3.右上角菜单–>更多–>开发者工具

最低0.47元/天 解锁文章
白桃苏打水
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS第三章 CSS选择器
晓葉斑比
05-11 351
CSS选择器三、CSS选择器ID选择器CLASS选择器(类选择器)标签选择器(TAG选择器) chrome控制台快捷键f12 可在elements中查看属性有没有生效 三、CSS选择器 ID选择器 格式： css: #elem{} html: id=“elem” 1. ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。 2. 命名的规范，由字母、下划线_、中划线-、字母（并且第一个不能是数字） 3. 驼峰写法 : searchButton (小驼峰)推荐 SearchButton (大驼峰)
css选择器
yyjnhs18s的博客
03-30 84
选择器可以做到在同一时间统一修改大量数据的格式，包括颜色、字体大小、高度、宽度、文本修饰、背景图片等。其中，选择器可以大略分为五种不同的选择器。
CSS模拟实现windows控制台界面
KD的疯狂实验室
10-04 2578
文章目录效果:代码制作流程涉及知识点如果你希望掌握待改进之处 只从前天晚上学了CSS的部分知识后，现在看到什么都想拆成CSS布局来制作：所以就有了这件小Demo: 效果: 代码 <!DOCTYPE html> <html> <head> <meta name="descri
CSS选择器
lm12032015的博客
03-22 292
选择器按照权重,从前到后执行 权重相同时,后面的会覆盖前面的
css控制台带颜色输出
welcome to my blog!
04-07 282
css控制台带颜色输出 要输出的值需要拼接一下字符串,%c后边跟css样式，注意用逗号隔开。 let HHH = 'test'; console.log('%c' + HHH + '', "color:#036;font-size:20px"); console.warn(HHH) console.error(HHH) console.log('%c' + HHH + '', "colo...
CSS基础1-基础选择器+字体文本相关样式
12-05
本资源摘要信息涵盖了CSS基础知识点，包括基础认知、基础选择器、字体和文本样式、Chrome调试工具、综合案例等方面的知识点。 一、基础认知 * CSS的介绍：层叠样式表（Cascading style sheets） * CSS的作用：给...
social-media-dashboard:使用React.js和CSS制作的社交媒体仪表板
05-09
yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且...
twin-macro-page:使用样式化组件，Tailwind CSS和Twin.Macro构建的简单登录页面
04-14
在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名...
Portfolio-Site:我的个人投资组合网站使用React.js和Tailwind.css构建
04-02
yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且...
markdown-editor:使用ReactJs + TailwindCSS制作的实时Markdown编辑器
04-18
在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且...
Bootstrap控制台模板HTML加CSS样式代码
07-09
Bootstrap控制台模板HTML加CSS样式代码,Bootstrap控制台模板HTML加CSS样式代码
如何在控制台修改html样式,js如何添加css3样式
weixin_39603537的博客
06-03 1422
js如何添加css3样式这里只介绍比较好用的方法，使用起来比较麻烦的方式不再介绍。1、直接在元素style上添加属性element.style.boxShadow = "0 4px 4px red";2、更改cssText的值element.style.cssText = "box-shadow: 0 4px 4px red";3、调用setProperty方法添加css(相关课程推荐：JS视频教...
Chrome console使用类css选择器选择所有匹配项
Lyndon的专栏
09-06 5915
1.匹配项第一个$('a.author')返回： 2.全部匹配项$$('a.author')返回： 3.匹配项第二个$('a.author')返回：
监听事件+CSS样式增删改
ypuzhiyuan的博客
04-28 1690
**element.addEventListener(event, function, useCapture);** 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的 第一种为按钮添加事件- html: <P>该实例使用addEve...
HTML 、JS、CSS 添加控制面板例子---01
aganliang的专栏
09-12 634
h1 { font-size: 20px; line-height: 30px; }; h2 { font-size: 14px; line-height: 20px; margin-bottom: 10px; } a { text-decoration: none; color: #2dc4b2; }; #console { position: absolute; width: 300px; top: 30px; marg.
CSS 调试指南
liuhao9999的博客
07-25 438
然后，您可以创建一个适合您需要的支持级别的解决方案，而不是拥有一个完整的解决方案，然后您必须在收到错误报告后对其进行调试和定义回退。而且，虽然您可能不会将这些属性中的差异视为“错误”，但了解它们不是跨浏览器的默认默认值是有帮助的，因为这些样式是最有影响力的。由于CSS的全局性，一个元素的有问题的样式可能位于其父级、祖父级，甚至更远的树中。好的，所以您觉得您正在使用受良好支持的CSS功能。因此，这些百分比可能与您的受众不匹配，并且应该只是尝试确定为您的项目使用特定功能是否“安全”的一个数据点。...
控制台常用命令大全
weixin_30435261的博客
06-13 847
一、显示信息的命令 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; chars...
CSS的选择器
2201_75899444的博客
05-20 136
首先是web标准一系列的标准中，用于修饰装饰网页的美观度的标准，其中选择器是CSS的一部分。
前端开发练习：天气页面
APythonC的博客
11-05 1627
效果图如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气</title> <link rel="stylesheet" href="TQ.css"> </head> <body> <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1&
利用CSS_SELECTOR查找元素并在控制台中输出。
最新发布
05-26
好的，下面是一个例子： 假设我们要查找百度首页的搜索框元素，可以使用以下代码： ``` var searchBox = document.querySelector('#kw'); console.log(searchBox); ``` 解释一下： - `document` 代表整个文档对象。 - `querySelector` 方法可以接收一个 CSS 选择器，返回匹配的第一个元素。 - `#kw` 是搜索框元素的 ID，表示查找 ID 为 `kw` 的元素。 - `console.log` 方法可以在控制台中输出查找到的元素。 你可以在浏览器的开发者工具中的控制台中尝试这段代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值