好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML中放置CSS的三种方式和CSS选择器_html/css_WEB-ITnose

(一)在HTML中使用CSS样式的方式一般有三种:

1 内联引用

2 内部引用

3 外部引用。

 第一种:内联引用(也叫行内引用)

  就是把CSS样式直接作用在HTML标签中。

  

   使用CSS内联引用表现段落.

  

  特点:内联的样式比其他方法更加灵活,但需要和展示的内容混淆在一起,内联样式会失去一些样式表的优点。

第二种:内部引用(也叫内嵌式)

  使用style标签直接把CSS文件中的内容加载到HTML文档内部的 标签里。

  

  ……

  

  /* 设置本页面p标签中的文字为以下样式*/

   p{

  font-size: 10px;

  color: #FFFFFF;

   }

  

  

  特点 : 适合用于一个HTML文档具有独一无二的样式时。

第三种:外部引用

  CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.

  外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.

  外部引用是W3C推荐使用的

  实现外部引用有两种方式:

    (1)使用link标签引用CSS

    (2)使用@import导入CSS

  

   ……

  

  

  @import "mystyle2.css"

   ……. /*其它CSS定义*/

  

  

  注 : 如果在同一个选择器上使用几个不同的样式表时,这个属性值将会叠加几个样式表,遇到冲突的地方会以最后定义的为准。

(二)CSS选择器有六种选择符:

1 HTML选择符

2 类选择符

3 ID选择符

4 关联选择符

5 组合选择符

6 伪元素选择符

 1 HTML选择符 : 即是HTML标签,用来改变一个指定标签的样式,任何HTML元素都可以是一个CSS的选择符。

  语法:HTML标签名{属性:值}

  p { text-indent:3em; } /*当中的选择符是p*/

  h1{ color:red; } /*当中的选择符是h1*/

 2 类选择符 : 匹配文档中元素E的class属性的属性值为classname的元素

  语法:标记名.类名{属性:值} 或 .类名{属性:值}

  类选择符名称的定义方式是,"."符号,英文"dot",后加类名称classname

  类选择符的定义需要有.符号(.符号标明是类选择符),但是HTML文档中的标签的class属性名不能出现.符号,见下面示例:

  p.dark-row{ background:#EAEAEA; }    /*设置p标签中class属性为dark-row的*/

  .note{ font-size:small }           /*为note的类可以被用于任何元素*/

  

第一段

  

   第二段  

   第三段  

  

第四段

查看更多关于HTML中放置CSS的三种方式和CSS选择器_html/css_WEB-ITnose的详细内容...

  阅读:46次