CSS基础1——CSS样式表及样式规则
1、CSS(Cascading Style Sheets)层叠样式表。用于定义HTMl元素的显示形式,是W3C推出的格式化网页内容的标准技术
2、CSS作为每个网站设计者必须掌握的技术之一,有几个优点:
(1)提高页面浏览速度,比传统文本设计方法至少节约50%以上的文件尺寸
(2)缩短改版时间,降低维护费用
(3)结合CSS和DIV,更好的控制页面布局
(4)实现表现和结构、内容相分离
(5)更方便搜索引擎的搜索
3、CSS样式表
(1) 嵌入式样式表
用<style>元素将样式包含在网页内部的样式设置,<style>段必须出现在文档的<head>段内,可以有多个<style>段
如:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"> <style type="text/css"> div{ width: 100px; color: red; background: #eee; font-weight: bold; } </style> </head> <body> <div>嵌入式样式</div> </body> </html>(2)外部样式表
在外部创建.CSS文件,编写CSS代码,然后在.html文件中链接使用。
语法:<link rel="stylesheet" type="text/css" href="样式表中的URL"/>
(3)内联样式表
仅用于部分网页元素,其作用范围仅限于应用它的网页元素,内联样式在HTML标记中
如:<div style="color:red; font-weight:bold;"> 内联样式</div>
4、样式规则
(1)选择器:指定样式规则可作用于HTML文档中哪个元素或者那些元素,在样式规则中左大括号左边的就是选择器。
如: h1{ color:orange; background-color: #eea; }中的h1
(2)声明块:大括号之间的部分
如: h1{ color:orange; background- color: #eea;} 中的 color:orange; background- color: #eea; 部分
(3)声明:每个声明都要以分号(;)结束。
如:h1{color:red; } 中的 color:red; 部分就是一个声明
在一个声明块内,可以有多个声明,每个声明必须以分号隔开
(4)属性
如: h1{ color:red; } 中的color就是一个属性,每个声明只能有一个属性。
(5)注释
CSS的注释为:/* 注释内容 */
快捷键为:ctrl + "/"
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。