一 什么是css?
●css指层叠样式表(cascading style sheets)
●样式定义如何显示html元素
●样式通常存储在样式表中
●把样式添加到html4.0中,是为了解决内容与表现分离的问题
●外部样式表可以极大提高工作效率
●外部样式表通常存储在css文件中
●多个样式定义可层叠为一
注意:在学习css之前,你需要具备html的基本知识.之前已经粗略介绍过.后边还会详细介绍
css允许你针对html元素应用特定的样式
css的主要好处在于,它允许你将样式和页面内容进行分离
仅适用html,样式和页面内容混在一起,这样的页面将会变得难以维护
所有的web页面样式都可以(也应该)从html文档中分离出来,建立成一个单独的css文件使用
二 内联 嵌入式 外部引用css
在web文档中插入一个样式表是内联样式的使用方法之一.使用内联样式,将独特的样式应用于单个元素
为了使用内联样式,将样式属性添加到相关的标签中.
下面的例子展示了如何创建一个灰色背景和白色文本的段落:
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
运行效果如下:
◆在<head>标签中,将内部样式定义在<style>元素中
例如:下面代码中的样式将作用在所有<p>段落中
<html>
<head>
<style>
p{
color:white;
background-color:gray;
}
</sytle>
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
</body>
</html>
结果所有的段落都变成白色字体和灰色背景
◆外部引用css:将所有的css样式保存在同一个后缀名.css的拓展文件中
然后通过html标签<link>在html页面的<head>部分将css文件引入
举例说明:
html代码:
<head>
<link rel="stylesheets" href="example.css">
</head>
<body>
<p>这是我的一个段落</p>
<p>这是我的第二个段落</p>
<p>这是我的第三个段落</p>
</body>
css部分:
p{
color:white;
background-color:gray;
}
所有段落都是统一的样式
●相对路径和绝对路径都可以用来定义css文件的href.在我们的示例中,路径是相对的,因为css文件和html文件位于同一目录下
三 css规则与选择器
css是由浏览器解释的样式规则,然后应用于文档中相应的元素.
样式规则有三部分:选择器 属性 属性值
例如,标题颜色可以定义为:
h1 { color:orange;}
选择器指向需要设置样式的html元素;
声明块包含一个或多个用分号分隔的声明;
每个声明都包含一个由冒号分隔的属性名称和值
例如:
h2{
color:red;
background:#fff;
}
●最常见和最易于理解的选择器是类型选择器.该选择器以页面上的元素类型为目标
例如,要定位页面上的所有段落
p{
color:red;
font-size:130%;
}
●css声明总是以分号结尾.而声明块则由大括号包围.
id选择器允许你设置具有id属性的html元素,而不管他们在文档树中的位置.
举例说明:
html部分:
<div id="intro">
<p>今年过节送什么?</p>
</div>
<p>w3cschool会员,送了都说好!</p>
css部分:
#intro{
color:white;
background-colot:gray;
}
要选择具有特定ID的元素,请使用"#",然后使用元素的id跟随它
class选择器以类似的方式工作.主要区别在于每个元素的id具有唯一性,id每个页面只能应用一次,而class可以在页面上多次使用.
●要选择具有特定类的元素,请使用"."符号,后跟该类的名称
避免使用数字来命名id和class
.mytext{
color:black;
}
设置class="mytext"的文本颜色为黑色
●这些选择器用于选择另一个元素的后代的元素.选择后代的层级时,你可以根据需要选择尽可能多的层级
例如,要仅定位"intro"部分第一段中的<em>元素
html部分:
<div id="intro">
<p class="first">这是一个<em>段落.</em></p>
<p>这是第二个段落.</p>
</div>
<p class="first">这个段落不在intro部分</p>
<p>这个段落也不在intro部分</p>
css部分:
#intro .first em{
color:pink;
background-color:gray;
}
因此,只有选中的元素<em>会受到影响.
#test p{
color:red;
}
上边的例子:为属于id="test"的元素的所有段落设置颜色为红色.
四 css注释
/* 这是一个注释 */ 注释用于解释你的代码 ,浏览器会自动忽略注释 .类似于java中的多行注释
五 css的级联与继承
页面的最终外观是不同的样式结合的结果
通过样式的三个主要来源形成一个级联:
●由页面的作者创建的样式表
●浏览器的默认样式
●用户自定义的样式
继承是指属性在页面上的流动方式.除非另有定义,子元素通常会继承父元素的特征
例如:
<html>
<head>
<style>
body{
color:green;
font-family:Arial;
}
</style>
</head>
<body>
<p>
路人甲
</p>
</body>
</html>
结果:路人甲的颜色为绿色,样式效果和它的父元素<body>是一样的
由于段落标记(子元素)位于正文标记(父元素)内,因此它将采用指定给正文标记的任何样式.
