CSS简介
CSS 指层叠样式表 (Cascading Style Sheets)
CSS被用来同时控制多重网页的样式和布局。
样式定义如何显示 HTML 元素
样式通常存储在样式表中
样式解决了内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
CSS基本语法
CSS样式由选择器和声明组成，声明又由属性和值组成。
基本选择器
- 标签选择器：就是HTML中的标签
h2{color:red}
-将h2标题中的字体的颜色设置为红色
- ID选择器：#id属性值
#p1{color:green}
-将id属性值为p1的标签中的额字体设置为绿色
- 类选择器：.class属性值
.p2{color:blue}
-将class属性值为p2的标签中的内容设置蓝色
- 分组选择器
h2,#p1,.p2{font-size:60px}
-分别将标题、id属性值为p1、class属性值为p2的标签中的字体的大小设置为60像素�
引入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
优先级：
内联样式> 内部样式>外部样式> 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：<p style="color:sienna;margin-left:20px">这是一个段落。</p>`
CSS中颜色的表示方式
- 通过英语单词
红色：red - 通过rgb值
红色：rgb(255,0,0) - 通过十六进制数
红色：#FF0000=#ff0000=#F00=#f00
网友评论