css基础教程之CSS基础语法

2020-04-28 07:53:44易采站长站整理

<head>
<title>divcss8第一示例</title>
<style type=”text/css”>
h2,p
{
color:#f00;
}
</style>
</head>
<body>
<p>divcss8</p>
<h2>divcss8提供CSS基础教程</h2>
</body>
</html>

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></p>
<p>/body>
</html>

语法规范是:

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

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

自定义选择器

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

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