适合新手学的css教程:基础语法1

作者:divcss教程吧      点击次数:952次     发布日期:2014-09-18

我们学习CSS要明白一个重要的问题,CSS主要是解决与实现表现(CSS)与结构(HTML)的分离。我们编写完HTML之后,如何通过CSS对HTML实现控制呢。

行内样式
内嵌样式
链接样式
导入样式
我们这一节课的示例就先从行内样式开始

行内样式:就是直接在HTML上写样式,就是HTML上加属性style=””这种形式。如

<p style=”color:#f00”>divcss8</p>,但是这种方法并不是被我们推荐的,因为不利于实现表现与结构分离。也为后期维护带来很多不必要的困难。我们只需要知道即可。

内嵌样式:针对当前一个网页可以使用的样式,一般写在html的<head></head>标记中。而且要使用一个示明,我们的样式都要写到这个声明中如下:

<style type=”text/css”>写我们的样式</style>

我们看一个示例文件为我们段落文字改成红色的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>divcss8第一示例</title>

    <style type="text/css">

        p

        {

            color:#f00;

            }

    </style>

</head>

<body>

<p>divcss8</p>

<h2>www.divcss8.com</h2>

</body>

</html>

我们在这里又有一个新的知识点。如果我们想给段落添加一个样式的话。我们可以通过两步实现,第一步先找到这个段落,第二步添加CSS样式属性(PS:这些属性咱们现在可以理解为已经提供好的,咱们使用即可)。

那咱们现在就看一下这个CSS选择器:

CSS选择器的分类:

HTML标签选择器
群组选择器
包含选择器
自定义选择器有可以分为两种
Class选择器
ID选择器
HTML标签选择器:就是直接使用BODY中的HTML标记做为选择符,就像我们第一示例那样。

但是这种选择器有一种局限性。假设我们有两个段落。要设置不一样的效果。那怎么办呢?当然我们选择器必须结合起来用才可以。

假如我们要为网页中的H2和P的文字都要改成红色的,怎么办呢?这时候群组选择器就派上用场了。我们看个示例文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>divcss8第一示例</title>

    <style type="text/css">

        h2,p

        {

            color:#f00;

            }

    </style>

</head>

<body>

<p>divcss8</p>

<h2>divcss8提供CSS基础教程</h2>

</body>

</html>

语法规范就是

选择器,选择器{属性:属性值;}

总结:我们记得只要我们CSS属性一致的时候,都可以使用群组选择符。

包含选择器:找到含有的内容,就像我们HTML中UL LI a(PS:列表上加链接) 这种形式,如果我们要为列表中链接添加样式。这时候我们就能使用包含选择器

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>divcss8第三示例</title>

<style type=”text/css”>

ul li a{color:#f00;}

</style>

</head>

<body>

<ul>

<li><a href=”#”>项目编号1</a></li>

<li><a href=”#”>项目编号2</a></li>

</ul>

<a href=”#”>我不会被改变</a>

</body>

</html>

语法规范是:

选择器 选择器{属性:属性值;}

注意:这里面是空格隔开的 HTML中的父级空格HTML中的子级

自定义选择器

引入:如果网页中有多个P标签,我们想为其中某一个P添加样式。该怎么办呢,之前的选择器都不能满足。

ID选择器:为网页中某一个标签添加属于自己的选择器,而且规范要求我们这个ID名称的选择器只能使用一次。(PS:也是为了以后JS好调用)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>divcss8.com示例</title>

    <style type="text/css">

#diyi li a{color:#f00;}

    </style>

</head>

<body>

<ul>

<li><a href="#">项目编号1</a></li>

<li><a href="#">项目编号2</a></li>

</ul>

<ul id="diyi">

<li><a href="#">项目编号1</a></li>

<li><a href="#">项目编号2</a></li>

</ul>

<a href="#">我不会被改变</a>

</body>

</html>

语法规范就是:

#选择器名称{CSS属性:属性值;}

而在HTML中就是 id=”选择器名称”

分享DIVCSS8