`

css笔记

 
阅读更多

 

样式表定义及引用

1 内联样式

在标记中直接使用style属性可以对该标记括起的内容应用该样式显示。

  <p style="font-family:宋体;color:green;background-color:yellow;font-size:9pt">

  <body style="font-family:宋体;font-size:12pt;background:yellow">

  使用style属性定义内容与值之间用：，可以定义多项，各项之间以;分隔。

  由于这种方式是在HTML标记内部使用样式，故称为“内联样式”。若要在一个HTML文件中使用内联样式，必须在该文件的头部对整个文档进行单独的样式表语言声明。即<META http-equiv="Content-type" content="text/css">内联样式因为其将样式和内容不能分离，可见这种方式应尽量少用。

  2 CSS样式表定义

  其中：选择符可以是要引用样式的标记，类选择符，ID选择符或上下文选择符等。规则表是由一个或多个样式属性组成的样式规则，各个样式属性间用分号隔开，每个样式属性的定义格式为“样式名：值”。样式定义中可以加入注解，格式为/**/.

  例如：

  p{font-family:"宋体";color:green;background-color:yellow;font-size:9pt;}

  H1,H2{font-family:"隶书","宋体";color:#ff8800}

  .heti{font-family:"黑体";color:#000000;}

  #id1{color:blue;}

  可以把上面这段直接定义在HTML的style标记中，也可以定义在独立的CSS文件中。

  外部CSS样式表的引用方式有两种：

  1 链接CSS样式文件。<LINK REL=stylesheet TYPE="text/css" HREF="style.css" media="screen">，这个应该定义在head中

  2 导入CSS样式表文件。引用样式文件的HTML文档也可以利用CSS @import 声明导入外部样式表。格式为：

  <style>@import URL("style.css");</style>     

  两种方式的区别：

  第二种导入外部样式表方式在浏览器下载HTML文件时就将样式文件的全部内容复制到@import关键字所在的位置，以替换该关键字。而链接方式在浏览器下载HTML文件时并不进行替换，而仅在HTML文档需要引用CSS样式文件中的某个样式时，浏览器才链接样式文件，读取需要的内容。

  样式表选择符

  1 标记符

  标记符可以是一个式多个，各个标记之间可以逗号分开。

  例如：  p{font-family:"宋体";color:green;background-color:yellow;font-size:9pt;}

  H1,H2{font-family:"隶书","宋体";color:#ff8800}

  2 类选择符和CLASS属性

  利用类选择符和标记的CLASS属性可以使相同的标记使用不同的样式。也可以不同的标记使用同样的样式，只要使标记的CLASS属性的值为样式表中定义的类选择符即可。

      <style type="text/css">

              P{font-family: 宋体;color:green;background-color:yellow;font-size:9pt;}

              p.back{font-family:"隶书","宋体";color:#ff8800}

              .heti{font-family:"黑体";color:#000000;}

       </style>

       <h2 class="heti">该内容以heti样式显示</h2>

    <h3 class="heti">该内容以heti样式显示</h3>

    <p>该内容以p样式显示</p>

    <p class="back">该内容以p.back样式显示</p>

    3 ID选择符和ID属性

       ID选择符用于定义一个元素的独有样式，它与类选择符的区别在于ID选择符在一个HTML文件中只能引用一次，而类选择符可以多次引用。ID选择符的定义格式。定义在sytle标记中或者单独的CSS文件中#id1{color:blue;}   <p id="id1">内容为id1样式</p>

       随着CSS的产生，<span>标记被新加入到HTML中，增加该标记的目的是允许我们给出样式而不必将样式附加在一HTML的原有标记上。它的存在纯粹是为工，可见，当样式表失效时它就没有任何作用了。<span>标记可以带有的属性class,id,style等与CSS样式有关的属性。

       4 伪类

       伪类是特殊的类，能自动被支持CSS的浏览器所识别。伪为厅区别标记的不同状态。伪类不能HTML的class属性来指定。伪类的定义格式如下。最常见的应用是指定超链接以不同的方式链接.例：

       <style type="text/css">

a:link {color: #FF0000}

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

a:active {color: #0000FF}

</style>

5 上下文选择符

上下文选择符定义嵌套标记的样式。H2 em{color:darkred},该定义指明HTMNL文件中出现嵌套标记<h2><em></em></h2>之处将引用该样式。上下文选择符由于应用场合十分特殊，故用的很少。

样式的继承和作用顺序

1 样式继承

将包含其他标记的标记称为父标记，则被包含的标记就是子标记。子标记将继承父标记的样式，即样式的继承。

2 样式的作用顺序

对一个标记来说，可能有多个样式都能对标记起作用，但样式表作用到标记上时有一个顺序

CSS属性

CSS属性包括字体属性，颜色和背景属性，文本属性，方框属性，分类属性，和定位属性等。

0
顶
4
踩
分享到：
| Web文件的ContentType类型大全
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics