CSS相关

标签：output   code   语法   保存   文档   应用   通过   阅读   文字   

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元素中指定,在元素中或在一外部CSS文件中.甚至多个外部样式表能集中在一个单一的HTML文档中

当多于一种的样式指定一HTML元素时使用怎样的样式呢? 
一般说来所有样式有下面的规则(第四个
最有优先性)
1. Browser default
浏览器默认
2. External style sheet
外部样式表(css文件)
3. Internal style sheet (inside the tag)
内嵌样式表(在标签内)
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 texth1>
p id="green">Some textp>

? 下面的样式规则将匹配任何一个带有id属性值为"green"的p元素

p#green {color: green}

? 上面的规则与h1元素不匹配（也就是说不会产生样式效果）

h1 id="green">Some texth1>

? 和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）

外部样式表：
? 使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用标签让每个页面都连接到样式表。 标签在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")}

内嵌样式表：

? 一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用

head>
    style type="text/css">
        hr {color: red}
        p {margin-left: 20px}
        body {background-image: url("images/back40.gif")}
    style>
head>

? 浏览器将立即读取样式定义，并依据它来格式化文档。
? 注意：浏览器一般会忽略未知的标签。这就意味着老的浏览器不能支持样式，会忽略
可以来避免这类情况在老的浏览器中发生

行内样式：

? 使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素需要改变样式的时候使用
? 在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red

p style="color: red; margin-left: 20px"> This is a paragraph p>

CSS相关

标签：output   code   语法   保存   文档   应用   通过   阅读   文字   

原文地址：http://www.cnblogs.com/winner-0715/p/7148254.html