内嵌式: <head> <style type="text/css"> body {background-color: #f2f2f2;} h1 {color: #0099cc;} </style> </head> 外部式: <head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
内嵌式是将CSS代码直接嵌入到HTML文档的头部,使用style标记包裹。这种方式的优点是可以直接修改样式,但是当页面需要大量样式时,代码可读性差,且维护不方便。
外部式是将CSS文件保存到外部,使用link标记引入。这种方式的优点是代码可读性高,维护方便,易于重复使用,但是需要与HTML文件分离,增加了文件量。
CSS样式通常由选择器和声明块组成。选择器定义了需要修改样式的HTML元素,声明块则定义了具体的样式规则。如下:
h1 { color: #0099cc; font-size: 28px; }
在本例中,选择器为h1,声明块中使用了两个属性,分别是color和font-size,用冒号和分号进行分隔。其中color属性定义了字体颜色,值为#0099cc,font-size定义了字体大小,值为28px。
除此之外,CSS还包括了常见的盒模型,可以通过修改元素的内边距、外边距、边框等属性实现对元素框模型的调整。此外,还包括如位置属性、浮动属性、背景属性等等。总之,熟练掌握CSS标记方式,是成为一名优秀前端工程师的必备技能。