【前端学习之路——CSS】01样式表的选择

最新推荐文章于 2024-06-12 11:13:48 发布
最新推荐文章于 2024-06-12 11:13:48 发布
阅读量131 收藏
点赞数 1
分类专栏： 前端 文章标签： 前端 css 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42491859/article/details/123175653
版权
4、内部样式表

(只对当前页面有效果)

<head>
    <style type = "text/css">
        p{
            color:red;
            font-size:20px;
        }
    </style>
</head>

<body>
	<p>这是一段p标签文字</p>

</body>
5、外部样式表

（结构和表现分离，最大限度让样式复用，提高用于体验，最推荐）

外部文件新建一个 style.css文件，将相应的属性写到css文件中

HTML页面引入css文件的方法：

<link rel="stylesheet" type = "text/css" href="style.css(相对路径)">
五彩斑斓的黑。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端基础——CSS入门
01-20
web前端基础——CSS入门 1.css的引入方式 内部样式： 直接在style里面写 内联样式： 外部样式表 2.css选择器 id选择器： #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以...
Lucky带你玩转大前端之CSS
06-21
CSS（层叠样式表）用于设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其它装饰性的特征。本课程将通过由浅入深，展示语法示例，以及如何与HTML相...
我实现了客户要求的五彩斑斓的黑！！！
weixin_43152611的博客
07-06 1188
在前端圈有这么个段子，说客户想要五彩斑斓的黑。？？？？五彩斑斓？？？还黑？？之前只是笑笑就过去了。。那么能不能实现呢，，，今天他来了！！！ 效果图:展示出来的效果颜色和光晕的颜色都是用c3写成的动画效果，由于不支持上传视频，就截了几帧的图片，有想要自己实现这个动画效果的，最后代码附上（超级简单）！ 动画的实现原理主要就是色相的反转和光晕模糊度的设置 代码： html代码： <body> <div class="outer"> <div class
第4章编辑css样式,第4章 CSS样式基础
weixin_39890708的博客
08-03 241
《第4章 CSS样式基础》由会员分享，可在线阅读，更多相关《第4章 CSS样式基础(9页珍藏版)》请在人人文库网上搜索。1、第4章 CSS样式基础,本章主要讲述了CSS样式的应用方法，现如今网页的排版格式越来越复杂，很多效果需要通过CSS来实现，现代网页制作离不开CSS技术，采用CSS技术可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，只要对相应的代码做一些简单的编辑，就可以...
WEB前端进阶之路——CSS基础笔记 01
酸奶`的博客
05-12 260
WEB前端—CSS基础笔记 01CSS简介CSS基础选择器选择器作用：基础选择器分类：基础选择器总结字体属性：字体属性总结文本颜色文本对齐方式装饰文本文本缩进行间距文本属性总结CSS引入方式Chrome调试工具做个好人 ~ 爱我所爱 ~ 开开心心 ~ 多赚点钱 ~ just do it ~ CSS简介 CSS基础选择器 CSS字体属性 CSS文本属性 CSS引入方式 综合案例 Chrome调试工具 CSS简介       层叠样式表(英文全称：
【前端学习之路——CSS】03选择器(class选择器、css选择器、a标签伪类选择器)
weixin_42491859的博客
02-28 1401
7、id选择器 <style type="text/css"> #id_name{ font-size:20px; } </style> 8、class选择器 一个元素可以设置多个class，中间用空格隔开 class = “hello p” <style type="text/css"> .id_name{ font-size:20px; } </style> id选择器在当前页面是唯一的
前端HTML（三）—— CSS层叠样式表、div
Jsundoku的博客
02-22 1209
文章目录一、CSS层叠样式表二、div 一、CSS层叠样式表 1、CSS 基本概念 CSS：Cascading Style Sheets。CSS是一种用来表现HTML或XML等文件样式的计算机语言，能够统一设置页面的样式。 2、CSS 常用属性 color: red; 设置文字颜色； font-family: 楷体; 设置文字字体样式； font-size: 25px; 设置文字大小，后...
Web前端开发之CSS学习笔记1——内联样式、内部样式表、外部样式表
qq_45709187的博客
04-28 2033
1 内联样式 2 内部样式表 3 外部样式表
百度前端技术实战训练营——CSS基础之样式表
qq_62215764的博客
01-10 307
CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
Web前端基础——层叠样式表（CSS）
weixin_40013461的博客
09-05 1163
本文介绍了CSS层叠样式表的简单调用方法，可通过style在标签/文档中调用，做一简单了解即可。
web基础——CSS层叠样式表
威威的博客
12-28 3925
目录CSS的作用：基本语法选择器1.类选择器2.id选择器3.标签选择器4.包含选择器5.伪类选择器的优先级子选择器相邻选择器 div +p相邻所有选择器 div ~p属性选择器 input[type=“password”]过滤选择器 CSS的作用： 实现了样式和html的代码分离 弥补html对属性的控制不足 精确的控制页面的布局 可以提高页面的执行效率 css有特殊的功能 特性：继承性，层叠性 基本语法 <style type="text/css"> 选择器{ 属性1
学前端,css与javascript重难点浅析
11-20
表现（presentation）——设计网页的表现样式，即“如何显示有关内容” CSS是将样式信息与网页内容分离的一种标记语言，我们使用css为每个元素定义样式；它主要用于美化HTML页面。 语法为：selector {property：...
c1c1开发小组——自编辑词典前端代码.zip
04-18
总的来说，前端开发是一个不断发展与进步的领域，随着新的样式解决方案和组件库的不断涌现，以及前端框架的不断更新和演进，前端开发的技术栈和工具链也在不断完善和丰富。未来，前端社区将继续充满朝气与活力，为...
htmlcss多选题及答案,前端面试题含答案——HTML、CSS相关.docx
07-06
Strict DTD 适用于需要纯净标记的文档，Transitional DTD 适用于需要包含样式表的文档，Frameset DTD 适用于带有框架的文档。 2. 块级元素和内联元素 在 HTML 中，元素可以分为块级元素和内联元素。块级元素是指...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 374
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 531
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
最新发布
liyrbtqe_66w的博客
06-12 258
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 337
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
html5 video如何添加进度条_HTML5前端学习之路——从菜鸟到入门到入坑
05-31
要为HTML5视频添加进度条，需要使用HTML5的video标签和JavaScript的一些代码。以下是一种实现方法： 1. 为视频添加一个视频标签，例如： ```html <video id="my-video" controls> <source src="my-video.mp4" type="video/mp4"> <source src="my-video.webm" type="video/webm"> </video> ``` 2. 创建一个进度条，例如： ```html <div id="progress-bar"> <div id="progress"></div> </div> ``` 3. 使用JavaScript代码来控制进度条。例如： ```javascript var video = document.getElementById("my-video"); var progress = document.getElementById("progress"); video.addEventListener("timeupdate", function() { var percent = video.currentTime / video.duration; progress.style.width = percent * 100 + "%"; }); ``` 这段代码将监听视频的timeupdate事件，每当视频播放时间更新时，计算出视频播放的进度百分比，并将进度条的宽度设置为该百分比。可以通过CSS样式来美化进度条。 希望这能帮到你！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值