CSS设置样式的三种方式

最新推荐文章于 2024-04-06 22:43:58 发布
最新推荐文章于 2024-04-06 22:43:58 发布
阅读量5.1k 收藏 4
点赞数 2
分类专栏： JavaWeb 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43786395/article/details/121277034
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

对css的学习进行总结

提示：以下是本篇文章正文内容

1.CSS

网页分为三个部分：
①结构(HTML)
②表现(CSS)
③行为(JavaScript)
CSS（层叠样式表）：网页实际上是一个多层的结构，通过css可以分别为网页的每个层设置样式，而最终我们能看到的只是网页的最上层，css就是用来设置网页元素的样式。
css修改元素样式的方式有三种：(1)内联样式，也叫行内样式 （2）内部样式表 （3）外部样式表

1.1内联样式

在标签内部使用style属性来设置元素的样式。
特点：内联样式只对一个标签生效
问题：对于多标签使用同样式的情况，需要大量重复的内联样式；样式发生变化时，修改不方便。

<p style
最低0.47元/天 解锁文章
二水笔记
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS设置CSS样式的方式汇总
11-30
1. 直接设置style的属性 某些情况...2. 直接设置属性（只能用于某些属性，相关样式会自动识别） element.setAttribute('height', 100); element.setAttribute('height', '100px'); 3. 设置style的属性 element.setA
css行内样式,内嵌样式,外部引用样式的三种使用方式
12-14
css行内样式</title> </head> <body> <div xss=removed></div>> </body> </html> 内嵌样式：   <!!doctype html> <html> <head> <meta charset="UTF-8"> &...
CSS相关样式设置
CheryW的博客
06-14 657
样式水平、居中设置
CSS常用样式
weixin_53988377的博客
07-24 1万+
CSS常用属性集合
CSS基础：插入CSS样式的3种方法
最新发布
u013179804的博客
04-06 2375
ok，我们来举 2 个案例，一下就能看出来区别了。
CSS 常用效果样式以及布局技巧
来杯卡布奇诺的博客
11-30 2792
CSS 高级技巧1. 圆角边框2. 盒子阴影3. 文字阴影4. 元素的显示与隐藏4.1 display 属性实现元素的显示与隐藏4.2 visibility 属性实现元素的显示与隐藏4.2 overflow 属性实现元素的显示与隐藏5. 精灵图5.1 为什么需要精灵技术5.2 精灵技术讲解5.3 精灵技术使用的核心总结25.4 制作精灵图6. 字体图标6.1 字体图标的产生6.2 字体图标的优点6.3 使用字体图标 - 下载6.4 字体图标 - 引入6.5 字体图标 - 追加7. CSS 三角形7.1 CS
CSS三种样式
sysu_Mid的博客
03-13 1608
CSS样式的使用分为三种类型,分别为内联样式,内部样式,外部样式, 下面会介绍这三种样式,并分析它们优缺点. 1.内联样式 内联样式就是将css代码直接写进style属性里面.style是所有HTML元素都支持的一个属性,下面给出样例代码: 内联样式 2.内部样式 内部样式就是将css代码写在标签里面,标签通常位于标签之间,下面给出样例代码: Insert title her
CSS的三种使用方法
Tech in Pieces
12-31 5281
CSS使用方法1：行内样式，只对当前标签生效。 比如像这样 <h1 style="height:20px;color:red"> CSS使用方法2—内联样式+选择器 行内样式虽然直观易懂，但是有个问题：不便于维护和修改，而且占内存。但是 如果批量修改，文本中的< p >标签，想让文字变为红色。 所以 我们使用CSS选择器。 <html> <head> <title>Evan Sun</title> <style type="te
详解CSS文件的三种引入方式
01-19
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。 一、行内样式 使用style属性引入CSS样式。 示例： <h1 xss=removed>style属性的应用 直接在HTML标签中设置的样式 实际在写页面时不提倡使用，在测试的...
CSS 控制页面样式的4种方式和优先级问题
09-25
"CSS 控制页面样式的4种方式和优先级问题" CSS 控制页面样式的四种方式是指在 HTML 页面中应用 CSS 样式的四种方法，它们分别是行内方式、内嵌方式、链接方式和导入方式。这些方式的应用可以使得页面样式变得丰富...
精通CSS-添加样式
qq_36973122的博客
08-16 2674
精通CSS-添加样式
如何使用CSS来修改元素的样式
m0_67176957的博客
03-04 2532
使用CSS来修改元素的样式 第一种方式(内联样式/行内样式)：在标签内部通过style属性来设置元素的样式 问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍。并且当样式发生变化时，我们必须要一个一个修改，非常不方便。 【注意】：开发时绝对不要使用内联样式。 <p style=“color:yellow; font-size: 60px;”少小离家老大回，乡音无改鬓毛衰</p>【注意不要缺少字符】 第二种方式【内部样式表】：样式编写到
CSS常见样式的介绍和使用（附加案例）
PIKapikaaaa的博客
03-21 6761
CSS常见样式的介绍和使用（附加案例） 选择器的理解与应用 常见样式 附加案例
css 样式设置
dre的博客
08-11 555
慕课网的HTML+css基础课程 p{color:red;} p{color:green;} 三年级时，我还是一个胆小如鼠的小女孩。层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。 显示样式为绿色 p{color:red!important;} p{color:gree
css设置表格样式
qq_40135955的博客
04-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置表格的边框</title> <style type="text/css"> .t{ border: 1px gray solid; bo...
Html设置css的4种方式和css 6种声明方式
aosica321的专栏
02-08 3132
来源：http://www.pdjz.qdedu.net/showarticle.asp?articleid=1959 css 层叠样式表  引入层叠样式表的方法包括： 1，外联式样式表 2，内嵌样式表 3，元素内定 4，导入样式表 外联式样式表 例： .... 属性：rel 用来说明元素在这里要完成的任务是连接一个独立的cs
jQuery动态设置样式（style、css）
热门推荐
xiaoyuncc的博客
04-27 23万+
一、jQuery设置css样式 测试jQuery动态获取padding-left 1、用css()方法返回元素的一个或多个样式属性 $("div").css("padding-left")); 2、用css()设置样式 $("div").css("color","yellow"); 3、设置多个样式 $("div").css({"background-color":"ye
在HTML中使用CSS样式的几种方式
境由心生
06-09 2万+
1.内联方式（行内样式）就是在HTML的标签中使用style属性来设置css样式 格式：<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签><p style="color:orange;font-size:18px">在HTML中如何使用css样式</p>特点：仅作用于本标签。2. 内部方式（内嵌样式）就是在head标签中使用标签来设置css样式 格式：
autocad不能画图_Autocad中的文字样式及标注样式设置
weixin_39658759的博客
11-20 183
我刚开始工作的时候，主任就安排我出去设代了，刚好运气很不错，遇上了善解人意的业主、热心助人的跟审、技术强大的后方以及没那么事逼的施工方，小日子总的来说过的不错。但是有一天突然接到电话，让我五天之内出一套隧道设计图，当时的我还没有用过autocad，每天熬夜找教程边学边画，最终，还是没有完成任务，被同事嘲讽画的图完全不能看。在此期间，我发现除了cad各种比例很烦人以外，文字样式和标注样式的设置也属于...
css样式的三种定义方式
04-04
1.内联样式：在HTML标签中使用style属性定义样式。 例如： <div style="color:red;">Hello World!</div> 2.内部样式表：在HTML头部使用<style>标签定义样式。 例如： <head> <style> div { color: red; } </style> </head> <body> <div>Hello World!</div> </body> 3.外部样式表：将样式定义在一个单独的.css文件中，然后在HTML头部使用<link>标签引入。 例如： 在style.css文件中定义样式： div { color: red; } 在HTML头部使用<link>引入样式表： <head> <link rel="stylesheet" href="style.css"> </head> <body> <div>Hello World!</div> </body>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值