专栏首页老码农的一亩三分地IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/102719379

HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观。如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS)。CSS规范的工作原理在于允许用户制定一些规则,描述文档中元素内容的表现形式,通过设置不同的规则控制页面中每一个元素的外观,包括字体的颜色和大小、线的宽度和颜色、页面中各项之间的空白量,以便使页面看上去更令人感兴趣。CSS和HTML一样是所有网页制作技术的核心与基础,是为HTML制定样式的机制,能控制浏览器如何显示HTML中的每个元素及其内容。CSS是和HTML一起工作的,用来弥补HTML对网页格式化功能的不足。既可以将HTML和CSS写在同一个文件中,也可以分开编写,都是纯文本文件,也都是通过浏览器解析的。本章所介绍的CSS语法只覆盖了本书程序实例中所涉及的内容。

CSS简介

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言,所以学习CSS之前应该先去了解HTML。CSS的作用是定义网页的外观(例如,字体、背景、文本、位置、布局、边缘、列表及其他),它也可以和JavaScript等浏览器脚本语言合作做出许多动态的效果。

Ø 所谓样式表,是样式化HTML的一种方法。HTML是文档的内容,而样式表是文档的表现,或者说外观。

Ø 所谓层叠,就是将一组样式在一起层叠使用,控制某一个或多个HTML元素,按样式表中的属性依次显示。

一张样式表可以用于多个页面,甚至整个站点,因此CSS具有良好的易用性和扩展性。从总体来说,使用CSS不仅能够弥补HTML对网页格式化功能的不足,例如段落间距、行距、字体变化和大小等,还可以使用CSS动态更新页面格式、进行排版定位等。CSS的特点如下:

Ø 控制页面中的每一个元素(精确定位)。

Ø 对HTML语言处理样式的最好补充。

Ø 把内容和格式处理相分离,减少工作量。

我们可以将CSS定义在HTML文档的每个标记里,或者以<style>标记嵌入在HTML文档中,也可以在外部附加文档作为外加文档。本例使用嵌入样式表,改变同一个HTML文档中1个<h1>和4个<p>标记的输出效果。使用文本编辑器打开一个扩展名为.html的网页文件,将3个字符串分别编写在HTML的1个<h2>和两个<p>标记中。并在该文档中使用<style>标记嵌入CSS代码,控制这三个标记的显示效果。代码如下所示:

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,如图1所示。

图1 简单的CSS实例演示结果

本例中,HTML定义的网页结构使用CSS设置输出格式,可以将格式和结构分离。只要在CSS中改变某些属性,则使用这个样式的所有HTML标记都会更新。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 面试感悟:当经历所有大厂的实习面试后

    七月虽然不是一个丰收的季节,但却是一个十分酷热的月份。不知有多少小伙伴跟我一样,顶着大太阳奔波在各种面试的征途中。面试是一个漫长的过程。但是也是一个让你快速提升...

    用户4962466
  • 简明PHP进阶【4-HTML 和 CSS】

    HTML的英文全称是 Hypertext Marked Language,即超文本标记语言。

    Lemon黄
  • 让骨架屏更快渲染 - 知乎

    在之前「为vue项目添加骨架屏」一文中,介绍了骨架屏的概念以及在 Vue 项目中的应用。本文将介绍如何加快浏览器对骨架屏的渲染。

    ConardLi
  • 如何进行渗透测试XSS跨站攻击检测

    国庆假期结束,这一节准备XSS跨站攻击渗透测试中的利用点,上一节讲了SQL注入攻击的详细流程,很多朋友想要咨询具体在跨站攻击上是如何实现和利用的,那么我们Sin...

    技术分享达人
  • 8.使用scss,创建组件,scoped局部作用域

    然后在项目目录中的webpack.config.js中的rules里加入配置代码:

    玩蛇的胖纸
  • web性能优化的15条实用技巧

    1.访问DOM会影响浏览器性能,修改DOM则更耗费性能,因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数,把运算尽量留在JS这一端。

    方丈的寺院
  • Django学习-第五讲:模板中静态文件的加载

    一个网站中除了正常的html页面之外,还有相应的样式,以及js等其他的文件,我们把除了html网页外的文件称之为静态资源文件,下面我们介绍一下怎么在django...

    小海怪的互联网
  • web性能优化的15条实用技巧

    1.访问DOM会影响浏览器性能,修改DOM则更耗费性能,因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数,把运算尽量留在JS这一端。

    徐小夕
  • 如何更优雅的编写CSS代码

    直白的说:编写优秀的 css 代码可能是很痛苦的。很多程序员都不想从事 CSS 开发—我可以做任何事情,除了css以外。

    icepy
  • Vue与React的区别之我见

    react和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。

    coder_koala

扫码关注云+社区

领取腾讯云代金券