web前台入门到实战:HTML CSS百科及常用嵌入方式

作者 : 开心源码 本文共1168个字,预计阅读时间需要3分钟 发布时间: 2022-05-13 共219人阅读

CSS(Cascading Style Sheet)可译为“层叠样式表”或者“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观。通过使用CSS实现页面的内容与体现形式分离,极大提高了工作效率 。样式存储在样式表中,通常放在<head>部分或者存储在 外部CSS文件中。作为网页标准化设计的趋势,CSS获得了浏览器厂商的广泛支持,正越来越多的被应用到网页设计中去。

网页现在的新标准是W3C。目前的模式是html+css+javascript,如何了解呢,就是html是网页的结构,CSS是网页的样式,javascript是行为。结构就是盖房子先要把结构建出来,而后用CSS来装饰。其实你在用dreamweaver做网页时就已经用到了CSS,比方你用DW的属性面板来设置一个字的字体、颜色和大小,当你选好后,就会自动生成一个.style1的红色代码,在<style></style>之间不知道你注意过没有,这就是CSS。

如何使用CSS?CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.CSS 可以通过以下方式增加到HTML中:

  1. 内联样式- 在HTML元素中使用”style” 属性
  2. 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  3. 外部引用 – 使用外部 CSS 文件

什么是内联样式?当特殊的样式需要应用到个别元素时,即可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

1  <p style="color:#fff;margin-left:20px;background-color:yellow;">This is a paragraph.</p> 

注释:早期背景色属性(background-color)是使用 bgcolor 属性定义。

什么是内部样式表?当单个文件需要特别样式时,即可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

1 <head>2  <style type="text/css"> 3 body {background-color:yellow;}4 p {color:blue;}5  </style>6  </head> 专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停升级最新的教程和学习技巧(从零基础开始到前台项目实战教程,学习工具,全栈开发学习路线以及规划)

什么是外部样式表?当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你即可以通过更改一个文件来改变整个站点的外观。

1 <head>2  <link rel="stylesheet" type="text/css" href="mystyle.css">3  </head> 
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战:HTML CSS百科及常用嵌入方式

发表回复