1.什么是Css(层叠样式表)
Css是Cascading Style Sheet(层叠样式表)的缩写。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
Css不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
Css2.1是目前被使用最广泛的版本,而目前还在开发中的Css3具有更吸引人的特性。
2.样式语法
Selector{property:value;property:value;property:value;...}
样式语法解释:
Selector:选择器
property:属性
value:属性值
3.如何将样式表加入网页
可以用如下三种方式将样式表加入网页。而最接近目标的样式定义优先级最高。高优先级样式将继承低优先级样式的未重叠的样式。高优先级样式表会覆盖低优先级样式表中重叠的样式。
3.1内联方式 Inline Styles
内联方式即是在对象的标记内使用style属性定义适用其的样式表属性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css引入</title> </head> <body> <!-- 内联方式 --> <p style="color:red">这一行的字体颜色将显示为红色</p> </body> </html>
3.2内部样式表对象 Embedding a Style Block
你可以在你的Html文档的<head>标记里插入一个<style>块对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css引入</title> <!-- 内部样式表对象 --> <style type="text/css"> body{background:#C90;color:#000;} p{font-size:14px;} </style> </head> <body> <!-- 内联方式 --> <p style="color:red">这一行的字体颜色将显示为红色</p> </body> </html>
3.3外部样式表 Linking to a Style Sheet
可以先建立外部样式表*.css,然后使用Html的link对象。
@charset "utf-8"; /* CSS Document */ body{background:#C90;color:#000;} p{font-size:14px;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css引入</title> <!-- 外部样式表 --> <link href="a.css" type="text/css" rel="stylesheet"/> </head> <body> <p >这一行的字体颜色将显示为红色</p> </body> </html>