样式表基本知识点和应用.pptVIP

CSS基础知识及应用 CSS基础知识及应用 CSS入门 CSS英语意思是：Cascading Style Sheets，即层叠样式表 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在CSS文件中 外部样式表可以层叠为一 CSS基本语法 CSS 语法由三部分构成:选择器,属性和值 selector {property: value} 例如：body {color: blue} 值的不同写法和单位 p { color: #ff0000; }也可简写：#f00 p { color: red; } 记得写引号(如果值为若干单词，则要给值加引号) p {font-family: sans serif;} 多重声明： p { text-align: center; color: black; font-family: arial; } CSS高级语法 选择器的分组 h1,h2,h2,h3,h5,h6 { color: green; } 继承：通过 CSS 继承，子元素将继承最高级元素所拥有的属性 摆脱继承 body { font-family: Verdana, sans-serif; } p { font-family: Times, Times New Roman, serif; } CSS选择器 派生选择器 id选择器 类选择器 CSS派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 li { font-style: italic; } li strong { font-style: normal; } 查看例子 CSS派生选择器-示例 html head title派生选择器简单示例/title style type=text/css strong {color: red;} h2 {color: red;} h2 strong {color: blue;} /style /head body p The strongly emphasized word in this paragraph is strongwhat color/strong. /p h2This subhead is what color./h2 h2 The strongly emphasized word in this subhead is strongwhat color/strong. /h2 /body /html 查看例子 CSS id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以”#”定义。 #red {color:red;} #green {color:green;} p id=red这个段落是红色。/p p id=green这个段落是绿色。/p 注：id 属性尽可能在每个 HTML 文档中只出现一次 查看例子 id 选择器和派生选择器 在现代布局中，id 选择器常常用于建立派生选择器。 p {text-align: left; } #table p { font-style: italic; text-align: right; margin-top: 5px; } 查看例子 CSS 类选择器 在 CSS 中，类选择器以一个点号显示： .center {text-align: center} 例如： h1 class=center This heading will be center-aligned /h1 p class=center This paragraph will also be center-aligned. /p 注：不要使用数字起始类名！它无法在 Mozilla 或 Firefox 中起作用。 类选择器和id选择器一样被用做派生选择器 如何创建 css 如何插入样式表 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种： . 外部样式表 . 内部样式表 . 内联样式 外部样式表 外部样式表引用格式： head link rel=stylesheet type=text/css href=mystyle.css / /head 外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进