当前位置: 永利棋牌 > 书评随笔 > 正文

CSS基础知识,css常用属性总结第二弹

时间:2019-10-01 13:17来源:书评随笔
承接上一篇class选择器,这一篇我们来说说css的id选择器。 一、css样式表的分类 CSS(Cascading StyleSheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现。CSS是1

承接上一篇class选择器,这一篇我们来说说css的id选择器。

一、css样式表的分类

CSS(Cascading Style Sheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现。CSS是1996年由W3C审核通过并且推荐使用的。CSS的引入,就是为了使HTML语言更好地适应网页的美工设计。CSS详细规范说明要查阅CSS手册,或登录W3C官网(

id选择器类似于类选择器,不过也有一些重要的差别,首先,id选择器前面有一个#号----称它为棋牌号吧,class为点号,用法就和class
选择器类似,基本用法如下:

首先介绍一下css中的样式表  a、外部样式表  将需要的样式放在单独的外部文件中,需要使用是直接调用,通常放在.css文件中。例如:/*以下部分是放在(my.css)自定义名称的css文件中*/

使用CSS,要了解常用的各种选择器。

#element{属性名:属性值}

h1,h2,h3{color:blue;}

1.标记选择器:

我们来看一个列子吧:
<html>
<head>
<style type="text/css">
#p1{color:red;font-weight:600;}
</style>
</head>

h1{font-size:18px;}

一个HTML页面由很多不同的标记组成,而CSS选择器就是声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的标记选择器的名称。示例:
  <style>
     h1 {
        color: red;
        font-size:25px;
     }
  </style>
每一个选择器都包含选择器本身、属性和值,其中属性和值可以设置多个,从而实现对同一标记名称声明多种样式。
CSS语言对于所有属性和值都有相对严格的要求,如果声明的属性在CSS规范中没有,或者某个属性的值不符合该属性的要求,都不能使该CSS语句生效。
还有一种通配选择器“*”,表示其中设置的样式会应用于所有的网页元素。示例:
  * {
   font-family:Verdada,Arial,sans-serif;
  }

<body>
<p id="p1">
This paragraph will also be center-aligned.
</p>
</body>
</html>

h2{font-size:35px;}

2.类选择器:

在浏览器里运行上面一段上面一段代码,就可以看到p元素的文字为加粗红色,看到了吧,id选择器用法就是这么简单。
不过我们知道,可以为多个元素指定相同的类名,但是对于id名,html文档中只能出现一个id名,所以我们得记住:保持id的唯一性。

p{font-size:10px;}

类选择器的名称可以由用户自定义,属性和值与标记选择器一样,必须符合CSS规范。示例:
  <html><head><title>class选择器</title>
  <style type="text/css">
     .red{
        color: red;
        font-size:18px;
     }
     .green{
        color: green;
        font-size:20px;
     }
  </style></head>
  <body>
     <p class="red">class选择器1</p>
     <p class="green">class选择器2</p>
     <h3 class="green">h3使用class</h3>
  </body></html>
任何一个class选择器都适用于所有HTML标记,只需要用HTML标记的class属性即可。

不过有的人会说,如果一个html文档中出现了多个相同的id名会出现什么情况。实际上,浏览器通常不检查html中id的唯一性,这就意味着如果你在
html文档中设置了多个相同id属性值的元素,就可能为这些元素应用相同的样式.
如:

注意:.css文件中不需要写头文件等内容,直接开始写样式内容即可。

3.ID选择器:

<html>
<head>
<style type="text/css">
#same{color:red;font-weight:600;}
</style>
</head>

/*以下部分是在html中调用上面的.css文件*/

ID选择器只能在HTML页面中使用一次,利用HTML标记中的ID属性,有更强的针对性。示例:
  <html><head><title>ID选择器</title>
  <style type="text/css">
     #bold{
        font-weight: bold;
     }
     #green{
        font-size:30px;
        color:#009900;
     }
  </style></head>
  <body>
     <p id="bold">ID选择器1</p>
     <p id="green">ID选择器2</p>
  </body></html>
ID选择器也可以用于多个标记,但因为JavaScript等脚本语言也使用id,如果一个HTML中有两个相同的id标记,会导致查找id时出错,所以一个id最好只能赋予一个HTML标记。ID选择器不支持像class那样的多风格同时使用。

<body>
<p id="same">
This paragraph will also be center-aligned.
</p>
<h4 id="same">This is a title</h4>
</body>
</html>

在<head></head>中间添加  <link rel="stylesheet" type="text/css" url="my.css (样式表的地址)"  />

4.交集选择器:

结果p元素和h4元素中的文字也是红色粗体,证明有相同id的元素都会有该样式,但这种用法是错误的,如果只是想让多个元素拥有相同样式,
请记住使用class属性!这里顺便提一下,多个相同id名会导致编写dom脚本变得困难。我们后面会提到的。
好了,今天的文章就到这里了,谢谢大家!

 

交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,其中第1个必须是标记选择器,第2个必须是类别选择器或者ID选择器。交集选择器是两个选择器连续书写,之间不能有空格。示例:
  <html><head><title>交集选择器</title>
  <style type="text/css">
     p{ /*标记选择器*/
        color: blue;
     }
     p.special{ /*标记.类别选择器*/
        color: red;
     }
     .special{ /*类别选择器*/
        color: green;
     }
  </style></head>
  <body>
     <p >普通段落文本(蓝色)……</p>
     <h3 >普通标题文本(黑色)……</h3>
     <p class="special">指定了.special类别的段落文本(红色)……</p>
     <h3 class="special">指定了.special类别的标题文本(绿色)……</h3>
  </body></html>
上面的代码中,定义了<p>标记的样式,也定义了.special类别的样式,此外还单独定义了p.special用于特殊的控制,而这个p.special中定义的风格样式仅仅适用于 <p class="special">标记,而不会影响使用了.special样式的其他标记。

b、嵌入式样式表

5.并集选择器:

格式

并集选择器,也称为集体声明,是同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成。示例:
  <html><head><title>并集选择器</title>
  <style type="text/css">
     h1,h2,h3.h4.h5.p{ /*并集选择器*/
        color: purple;
        font-size:15px;
     }
     h2.special,.special,#one{ /*集体声明*/
        text-decoration:underline;
     }
  </style></head>
  <body>
     <h1 >示例文字h1……</h1>
     <h2 class=”special” >示例文字h2……</h2>
     <h3 >示例文字h3……</h3>
     <p >示例文字p1……</p>
     <p class="special">示例文字p2……</p>
     <p id="one">示例文字p3……</p>
  </body></html>
显示结果中,所有颜色都是紫色purple,字体大小都为15px。
对于网站中的一些小页面,例如弹出的小对话框和上传附件的小窗口等,希望这些页面中所有标记都使用同一种CSS样式,可以使用全局选择器“*”,就不用逐个声明了。

 <head>

6.后代选择器:

       <style type="text/css">  该处是嵌入的样式内容 ,例如 #id={color:red;}</style>    

可以通过嵌套的方式对特殊位置的HTML标记进行声明,把外层标记写在前面,内层标记写在后面,之间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。嵌套示例:
  <p>最外层文字<span>中间层文字<b>最内层文字</b></span></p>
后代选择器示例:
  <html><head><title>后代选择器</title>
  <style type=”text/css”>
     p span{ /*嵌套声明*/
        color: red;
     }
     span{
        color:blue;
     }
  </style></head>
  <body>
     <p >嵌套使<span>用CSS(红色)</span>标记的方法</p>
     嵌套之外的<span>标记(黑色)</span>不生效
  </body></html>
通过将span选择器嵌套在p选择器中进行声明,显示效果只适用于<p>和</p>之间的<span>标记,而其外的<span>标记并不产生任何效果。
后代选择器的使用很广泛,不仅标记选择器可以这样组合,类别选择器和ID选择器都可以进行嵌套。示例:
  .special i{color:red;}
  #one li{padding-left:5px;}
  td.out .inside strong{font-size:16px;}
三层嵌套的对应HTML为:
  <td class="out">
     <p class="inside">
        其他内容<strong>CSS控制的部分</strong>其他内容
     </p>
  </td>
选择器的嵌套在CSS编写中可以大大减小对class和id的声明,因此在构建页面HTML框架时通常只给外层标记定义class或者id,内层标记能通过嵌套表示的则利用嵌套的方式,而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时,才单独进行声明。例如一个<ul>标记中包含多个<li>标记,而需要对其中某个<li>单独设置CSS样式时才赋给该<li>一个单独id或者类别,而其他<li>同样采用“ul li{...}”的嵌套方式设置。

</head>

7.子选择器:

注意:文档的<style >段必须写在<head></head>之间,可以有多个<style >段。

后代选择器产生的影响不仅限于元素的直接后代,而且会影响到它的各级后代。因此,CSS还规定了子选择器,也就是只对直接后代有影响的选择器,而对以后的多个层的后代不产生作用。子选择器是用>连接。示例:
  p>span{
     color:blue;
  }

c、内联样式表

8. 相邻兄弟选择器

例如:<h1 style="color:red;">红色的标题</h1>

相邻选择器描述的是页面标记里两个元素左右相邻的关系。示例:
  li+li {
     color:blue;
  }
相邻选择器用+来连接。

该样式表仅用于某一部分网页元素,在新的web标准中,最好把样式放在<style>或者外部样式表文件中使用。

9. 属性选择器:

一个样式规则由一个选择器和一个申明块组成。

  a[link]{
     text-decoration:none;
  }
  input[type="text"]{
     width:33%;
  }

二、选择器的分类

10.伪类:

1、元素选择器又称为类型选择器

常用的伪类是基于超链接的a:link、a:visited、a:hover和a:active,分别表示平常的超链接、以点击过的超链接、鼠标移动经过的超链接和激活的超链接样式。
还有3个伪类,分别是first-child、:focus和:lang(n)。

例如:em{cloor:red;}

11.伪元素:

p{font-size:10px;}

开发者还可以使用伪元素,而不必依赖元素标记来样式化Web文档里的某个项目。示例:
     p:first-letter{
        font-size:200%;
        font-weight:bold;
     }
伪元素包括:first-letter、:first-line、:before和:after。可以使用“:first-line”样式化第1行元素:
     p:first-line{
        font-size:200%;
        font-weight:bold;
     }

编辑:书评随笔 本文来源:CSS基础知识,css常用属性总结第二弹

关键词: