CSS stands for Cascading Style Sheets
– CSS 意思就是 层叠样式表
? Styles define how to display HTML elements
– 样式定义了HTML元素怎样去显示
? Styles are normally stored in Style Sheets
– 样式一般存储在样式表中
? Styles were added to HTML 4.0 to solve a problem
– 样式添加到HTML4.0中用来解决问题
? External Style Sheets can save you a lot of work
– 利用外部样式表可以提高你的工作效率
? External Style Sheets are stored in CSS files
– 外部样式表存储在CSS文件中
? With CSS, your HTML documents can be displayed using different output styles
? 样式表定义元素怎样去显示.外部样式表能够让你改变所有出现在你WEB中的外观和布局,而仅仅通过编辑一个单独的CSS文档.(原理就是一动多变)
? CSS是一个在设计领域中的突破,因为它允许开发者一下就能控制多个WEB页的样式和布局.作为一名WEB开发者你可以为每个HTML元素和应用他的每个页面定义一个你想要的样式.
来实现全面的改变,简单的改变样式,所有与之相关的元素都会自动更新
? 样式表允许样式信息用多种方式来定义.样式可以在一单独的HTML元素中指定,在<head>元素中或在一外部CSS文件中.甚至多个外部样式表能集中在一个单一的HTML文档中
当多于一种的样式指定一HTML元素时使用怎样的样式呢?
一般说来所有样式有下面的规则(第四个
最有优先性)
1. Browser default
浏览器默认
2. External style sheet
外部样式表(css文件)
3. Internal style sheet (inside the<head> tag)
内嵌样式表(在<head>标签内)
4. Inline style (inside an HTML element)
行内样式(在一HTML元素内)
所以写在HTML元素中的样式有最高的优先权(写在HTML元素内的),它会替代其他形式的样式
CSS语法:
The CSS syntax is made up of three parts: a selector, a property and a value:
– CSS的语法由三部分组成: 一个选择器,一个属性和一个值,例如:selector {property: value}
选择器是你希望去定义的HTML元素/标签,每个属性可以有一个值,属性和值由冒号区分开外面用大括号括起来
body {color: black}
如果值为多个单词则用双引号括起来:p {font-family: "sans serif"}
? 注意:如果你想指定多个属性,你就必须将每个属性用分号隔开,下面的例子就演示了怎样定义居中红色文字段落
p {text-align:center;color:red}
? 为了让样式定义更有可读性,你可以像这样分行描述属性
p{ text-align: center; color: black; font-family: arial }
? 你可以将选择器组合。用逗号分隔每个选择器。下的例子将所有的标题元素组合起来,它们的颜色都变为绿色
h1,h2,h3,h4,h5,h6 { color: green }
选择器类:
? 用选择器类你可以将同一类型的HTML元素定义出不同的样式。比如你想在你的文档中有两种不同样式的段落:一种是右对齐,另外是居中的。这就告诉你该怎么用样
式来做到这点:right,center是自定义的!
p.right {text-align: right} p.center {text-align: center}
? 你必须在你的HTML文档中使用类属性(才能显示出效果)
<p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
注意:每个HTML元素只能有一个类属性,下面的例子是不符合规范的
<p class="right" class="center">This is a paragraph.</p>
? 你也可以省略标签名称直接去定义,这样就可以在所有的HTML元素中使用了。下面的例子就能让所有HTML中所有带class="center"的元素居中文字:.千万不要省
.center {text-align: center}
? 下面的代码中H1和P元素都有class="center"。这就意味着这两个元素都将遵循选择器"center"的规则
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
id选择器
? 使用id 选择器你可以为不同的HTML元素定义相同的样式
? 下面的样式规则对任何一个带有id属性值为"green"的元素都是匹配的
#green {color: green}
? 上面的规则将匹配h1和p元素
<h1 id="green">Some text</h1> <p id="green">Some text</p>
? 下面的样式规则将匹配任何一个带有id属性值为"green"的p元素
p#green {color: green}
? 上面的规则与h1元素不匹配(也就是说不会产生样式效果)
<h1 id="green">Some text</h1>
? 和class一样,id的名称的开头也不要使用数字,不然就无法在Mozilla/Firefox中正常运作了
CSS注释
? 你可以在CSS中加入解释代码用的注释,这样可以方便你以后重新编辑代码。浏览器会忽略注释,注释一般以"/*"开头"*/"做结尾,像这样:
/* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }
怎么使用CSS
? 怎样插入样式表?
– 当浏览器阅读样式表,它会依据它(样式表)来格式化文档。有三种方法可以插入样式表
? 外部样式表(External Style Sheet)
? 内嵌样式表(Internal Style Sheet)
? 行内样式(Inline Styles)
外部样式表:
? 使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用<link>标签让每个页面都连接到样式表。 <link>标签在head区域使用
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
浏览器将从mystyle.css文件中读取样式定义信息,并依据它来格式化文档
? 外部样式表可以用任何一个文字编辑器来书写。文件不应该包含任何的html标签。并保存为一个后缀为.css的文件.下面是一个样式表文件的内容
hr {color: sienna} p {margin-left: 20px} body {background-image:url("images/back40.gif")}
内嵌样式表:
? 一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式,像这样
<head> <style type="text/css"> hr {color: red} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>
? 浏览器将立即读取样式定义,并依据它来格式化文档。
? 注意:浏览器一般会忽略未知的标签。这就意味着老的浏览器不能支持样式,会忽略<style>标签,但<style>里的内容会显示在页面上。在HTML注释元素中隐藏它
可以来避免这类情况在老的浏览器中发生
行内样式:
? 使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素需要改变样式的时候使用
? 在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red
<p style="color: red; margin-left: 20px"> This is a paragraph </p>