>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 21766 个阅读者 刷新本主题
 * 贴子主题:  CSS的style样式的三种用法 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2025-04-08 01:43:44     消息  查看  搜索  好友  邮件  复制  引用

  1、  css是什么,有什么用,  

css指的是层叠样式表,Cascading Style Sheets。解决是内容与表现相分离的问题

  2、一开始我们在html中设置字体是用font标签来设置字体的颜色大小类型的,而现在我们用css来设置,每一个标签都有自己的属性,于是我们用p标签,或者其他标签的属性style来设置字体的颜色大小类型:例子如下所示

<p style="color:red;  font-size:24px; font-family:'微软雅黑'">你好</p>

3、style样式写在哪里?各个写法有的优缺点

根据写在哪里,把style分为三类

行内样式:  例:<p style="color:red;  font-size:24px; font-family:'微软雅黑'">你好</p>

      好处:是能直接改,优先级也是最高,对于单个不重复页面处理容易,易于理解。

      缺点: 当页面重复使用一种类型的style时,容易造成冗余,后期代码量大,不易于维护。

内部样式: 实现了内容与表现相分离

                    例: <style>

                              p{ color:red;}

                         </style>

      好处:实现了内容与表现相分离,解决了内部样式出现的冗余的问题

      缺点:当页面较多,且用到同一种样式的时候,会造成冗余

外部样式:用单独的css文件表示,然后再在内部引用,即首先在css文件下新建一个css文件,用来放样式,然后在html或者是要展示的文件下引用样式: <link rel="stylesheet" href="css的目录地址">

  例:文件demo.css下有  p{ color:red;}

在文件index.html的body上下都可以,引用 <link rel="stylesheet" href="demo.css"> 即可

      好处:实现css的单个话,便于所用的要用的样式用

      缺点:几乎没有,除了引用复杂,每一种类型的样式都有他们独特的好处

4、如果都作用在同一个样式下的三种样式,css的优先级为:  行内样式>内部样式>外部样式


程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->类的生命周期
  JavaWeb开发-->Web运作原理(Ⅰ)
  JSP与Hibernate开发-->持久化层的映射类型
  Java网络编程-->用Swing组件展示HTML文档
  精通Spring-->组合(Composition)API
  Vue3开发-->Vue组件开发基础
  vue3.0-基本特性和用法
  勇闯28个关卡学会HTML与HTML5基础
  前端面试官指导前端面试攻略
  vue的CSS过渡和动画范例
  vue 项目中使用loadsh 的 防抖(debounce)和节流(throttle...
  Vue选项的用法
  把99%的程序员烤得外焦里嫩的JavaScript面试题
  jQuery 事件方法汇总
  jQuery 遍历过滤:缩小搜索元素的范围
  HTML DOM Script 对象
  HTML DOM Radio 单选按钮对象
  CSS3 文本效果
  CSS 属性选择器
  JavaScript HTML DOM EventListener
  JavaScript 函数 的定义和使用
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。