首页 > 代码库 > css基础系列教程:CSS基础语法2

css基础系列教程:CSS基础语法2

作者:www.divcss8.com

在上一节中我们讲到了自定义ID选择器,为了以后JS获取内容方便,所以说我们只能使用一次。如果CSS代码想多次重复使用怎么办呢。那么就时候就可以用自定义的class选择符。

我们看一个下面这个示例:

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

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

<head>

   <title>divcss8.com class选择器示例</title>

   <style type="text/css">

.diyi li a{color:#f00;}

   </style>

</head>

<body>

<ul>

<li><a href="http://www.mamicode.com/#">项目编号1</a></li>

<li><a href="http://www.mamicode.com/#">项目编号2</a></li>

</ul>

<ul>

<li><a href="http://www.mamicode.com/#">项目编号2</a></li>

<li><a href="http://www.mamicode.com/#">项目编号3</a></li>

</ul>

<a href="http://www.mamicode.com/#">我不会被改变</a>

</body>

</html>

那么这两个项目列表都会发生变化。并且还要注意的就是CLASS选择符可以一次使用多个。在每个名称后边加一个空格即可,如 class=”diyi  clear”这样就可以了。

还有一种选择符就是通用选择符是可以针对所有HTML标签应用如下:

*{padding:0px;margin:0px;}

这个我准备放到布局时在详细讲解。

咱们一直使用的都是内嵌样式,我们现在学习一个新的引入CSS样式的方式,也是我们日后经常用的链接样式。

使用链接样式有什么好处呢:

1、  为了SEO方便,如果直接使用内嵌样式。那么会造成蜘蛛在爬行的时候,要爬行很多CSS代码

2、  如果我们的样式需要针对网页中的多个文件应用。而内嵌明显不太适合,这时候就得用到我们讲的链接样式了。

语法格式:

<link type="text/css"rel="stylesheet" href="http://www.mamicode.com/css.css" />

最关键的是href需要大家改成自己写的CSS样式文件

总结:通过使用链接的方式这样就实现了我们之前所说的HTMLCSS的分离。如果想更换网页的风格,只需要更换CSS样式文件即可。大家可以百度搜一下CSS禅意花园。Html是固定的通过更换的CSS样式文件,可以看到不同的风格的网页。也是新手学习CSS推荐看的编码,样式文件。

样式文件的优先级:

行内样式 > 内嵌样式 > 链接样式 > 导入样式

咱们通过一个实例认识一下

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

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

<head>

   <title>divcss8示例</title>

   <style type="text/css">

       p{color:#666;font-size:24px;}

   </style>

   <link rel="stylesheet" type="text/css"href="http://www.mamicode.com/divcss.css"/>

</head>

<body>

<pstyle="color:#f00;">www.divcss8.com</p>

</body>

</html>

Divcss.css文件

p{color:#0f0;font-weight:bold;}

总结:行内样式,内嵌样式以及链接样式分别对P中的实现了样式的更改。由于行内样式的优先级比较高所以最终结果显示红色。

大家还需要注意的是后面的样式会覆盖上边的样式。

CSS选择器命名

CSS选择器命名要有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法,我们下边分别看一下:

骆驼命名法:指混合使用大小写字母来构成,也是为了以后工作中有一个团队交流中比较方便。它的特点如下:

第一个单词以小写字母开始;第二个单词的首字母大写或每一个单词的首字母都采用大写字母,例如:myFirstName

帕斯卡(pascal)命名法:

CSS命名规则与骆驼命名法类似。只不过骆驼命名法是首字母小写,而帕斯卡命名法是首字母大写

匈牙利命名法:名称前面加上一个或多个小写字母作为前缀

red_navMenu

以上命名并不是说特定使用哪一个。主要是让你写的CSS代码得让别人一看显得很专业。很明白。在下边我给大家分享一些网上总结好的命名规范。

大家学了这么多选择符了。给大家考试一下:请大家说出如下选择符会选择什么对象。答案会在下篇课程中公布。

问题:

1h1 .p1{}

2#content h1{}

3 h1 .p1 #content h1

4h1#content h2{} 


本文出自 “石景山电脑培训” 博客,请务必保留此出处http://jiefei.blog.51cto.com/6994042/1557752

css基础系列教程:CSS基础语法2