从零开始学习CSS：第一课带你了解CSS基础

发表时间: 2018-07-02 20:27

一什么是css?

●css指层叠样式表(cascading style sheets)

●样式定义如何显示html元素

●样式通常存储在样式表中

●把样式添加到html4.0中,是为了解决内容与表现分离的问题

●外部样式表可以极大提高工作效率

●外部样式表通常存储在css文件中

●多个样式定义可层叠为一

注意:在学习css之前,你需要具备html的基本知识.之前已经粗略介绍过.后边还会详细介绍

css允许你针对html元素应用特定的样式

css的主要好处在于,它允许你将样式和页面内容进行分离

仅适用html,样式和页面内容混在一起,这样的页面将会变得难以维护

所有的web页面样式都可以(也应该)从html文档中分离出来,建立成一个单独的css文件使用

二内联嵌入式外部引用css

在web文档中插入一个样式表是内联样式的使用方法之一.使用内联样式,将独特的样式应用于单个元素

为了使用内联样式,将样式属性添加到相关的标签中.

下面的例子展示了如何创建一个灰色背景和白色文本的段落:

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>

</head>

<body>

<p>这是我的一个段落</p>

<p>这是我的第二个段落</p>

<p>这是我的第三个段落</p>

</body>

css部分:

color:white;

background-color:gray;

}

所有段落都是统一的样式

●相对路径和绝对路径都可以用来定义css文件的href.在我们的示例中,路径是相对的,因为css文件和html文件位于同一目录下

三 css规则与选择器

css是由浏览器解释的样式规则,然后应用于文档中相应的元素.

样式规则有三部分:选择器属性属性值

例如,标题颜色可以定义为:

h1 { color:orange;}

选择器指向需要设置样式的html元素;

声明块包含一个或多个用分号分隔的声明;

每个声明都包含一个由冒号分隔的属性名称和值

例如:

h2{

color:red;

background:#fff;

}

●最常见和最易于理解的选择器是类型选择器.该选择器以页面上的元素类型为目标

例如,要定位页面上的所有段落

color:red;

font-size:130%;

}

●css声明总是以分号结尾.而声明块则由大括号包围.

id选择器允许你设置具有id属性的html元素,而不管他们在文档树中的位置.

举例说明:

html部分:

<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部分:

<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>是一样的

由于段落标记(子元素)位于正文标记(父元素)内,因此它将采用指定给正文标记的任何样式.

从零开始学习CSS：第一课带你了解CSS基础

热门阅读

推荐阅读