(一)在HTML中使用CSS样式的方式一般有三种:
1 内联引用
2 内部引用
3 外部引用。
 
 第一种:内联引用(也叫行内引用)
  就是把CSS样式直接作用在HTML标签中。

  <p style="font-size: 10px; color: #FFFFFF;">

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

  </p>

  特点:内联的样式比其他方法更加灵活,但需要和展示的内容混淆在一起,内联样式会失去一些样式表的优点。
 
  第二种:内部引用(也叫内嵌式)
  使用style标签直接把CSS文件中的内容加载到HTML文档内部的<head>标签里。

  <head>

  ……

  <style type="text/css">

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

   p{

  font-size: 10px;

  color: #FFFFFF;

    }

  </style>

  </head>

  特点 : 适合用于一个HTML文档具有独一无二的样式时。
 
  第三种:外部引用
  CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.
  外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.
  外部引用是W3C推荐使用的
  实现外部引用有两种方式:
    (1)使用link标签引用CSS

    (2)使用@import导入CSS

  <head>

   ……

   <link rel="stylesheet" type="text/css" href="mystyle.css">

  <style type="text/css">

  @import "mystyle2.css"

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

   </style>

  </head>

 
  注 : 如果在同一个选择器上使用几个不同的样式表时,这个属性值将会叠加几个样式表,遇到冲突的地方会以最后定义的为准。
 
(二)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的类可以被用于任何元素*/

  <p class="dark-row">第一段</p>             <!– 具有类dark-row样式 -->

  <span class="dark-row">第二段</span>    <!– 没有类dark-row样式 -->

  <span class="note">第三段</span>           <!– 具有类note样式 -->

  <div class="note">第四段</div>        <!– 具有类note样式 -->

 
 3 ID选择符 : 匹配文档中元素E的id属性的属性值为idname的元素
  语法:ID名称{属性:值}
  ID选择符名称的定义方式是,#符号,英文"pound",后加ID名称idname
  ID选择符的定义需要有#符号(#符号标明是ID选择符),但是HTML文档中的标签的id属性名不能出现#符号,见下面示例
  id属性的特殊之处在于,一个文档中只能有一个元素使用一个ID选择符(与class属性正好相反),id属性可以用来单一地标识一个元素 。

  #main{ text-indent:3em; }  /*ID名称main前加上一个#号*/

  … …

  <p id=“main”>文本缩进3em</p>  <!– 在html的p标签中指定id属性main -->

 4 关联选择符 : 也称包含选择符,可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义
  语法:选择符1 选择符2...{属性:值}
  table a{font-size:12px}  
  在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。
 
 5 组合选择符:也叫选择符组,可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义。
  语法:选择符1,选择符2,.,..{属性:值}
  h1, h2, h3, h4, h5, h6 { color: green }

  p, table{ font-size: 9pt }

  效果完全等效于:
  p { font-size: 9pt }
  table { font-size: 9pt }

 6 伪元素选择符是指对同一个HTML元素不同状态的一种定义方式。例如对于<a>标签的正常状态、访问状态、选中状态、光标移到超链接文本上的状态,就可以使用伪元素选择器来定义。
  语法:标签:伪元素{属性:值;}

  a:link {color: #FF0000; text-decoration: none}           /* 未访问的链接 */

  a:visited {color: #00FF00; text-decoration: none}         /* 已访问的链接 */

  a:hover {color: #FF00FF; text-decoration: underline}   /* 鼠标在链接上 */

  a:active {color: #0000FF; text-decoration: underline}   /* 激活链接 */

  提示:a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
  提示:a:active 必须被置于 a:hover 之后,才是有效的。
 
最近整理的所学的浅显知识,若有错误,敬请指正.

HTML中放置CSS的三种方式和CSS选择器的更多相关文章

  1. android中解析文件的三种方式

    android中解析文件的三种方式     好久没有动手写点东西了,最近在研究android的相关技术,现在就android中解析文件的三种方式做以下总结.其主要有:SAX(Simple API fo ...

  2. Struts中的数据处理的三种方式

    Struts中的数据处理的三种方式: public class DataAction extends ActionSupport{ @Override public String execute() ...

  3. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  4. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  5. PHP中数据类型转换的三种方式

    PHP中数据类型转换的三种方式 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: 1.(int).(integer):转换成整形2.(float).(double).(real):转换成 ...

  6. HTML中使用js的三种方式及优缺点介绍

    1.内部js: 在直接在页面的<script></script>标签内写js代码 优点:相对于使用行内js,内部js代码较为集中,与页面结构的实现代码耦合度较低,比较便于维护 ...

  7. 引入CSS的三种方式

    虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 1.内联式 内联式css样式表就 ...

  8. html里嵌入CSS的三种方式

    在HTML中定义CSS的方式有:Embedding(嵌入式).Linking(引用式).Inline(内联式),下面通过实例为大家详细介绍下它们的特点   在HTML中常用以下3种方式定义CSS:Em ...

  9. [转]Asp.net Mvc2中重构View的三种方式

    本文转自:http://www.cnblogs.com/zhuqil/archive/2010/07/14/asp-net-mvc2-view-refactoring.html 我们在Asp.net ...

随机推荐

  1. js组件开发-移动端地区选择控件mobile-select-area

    移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空 ...

  2. Android 解决NestedScrollView 嵌套 RecyclerView出现的卡顿,上拉刷新无效

    解决卡顿的方法最简单的就是设置RecyclerView的android:nestedScrollingEnabled="false",放弃自己的滑动,交给外部的NestedScro ...

  3. android OrmLite

    最近在使用ormlite框架进行数据库的操作,下面简单的写个demo来学习下 1.下载jar包 这里使用的是ormlite-core-5.0.jar 和 ormlite-android-5.0.jar ...

  4. time random sys 模块

    time模块 顾名思义就是时间模块 我们在之前就用过一些时间模块 比如你想要让打印的时间延迟就time.sleep() 首先我们知道这是一个时间操作的模块 它可以分为三种模式:时间戳模式.格式化时间模 ...

  5. Spring注解开发-全面解析常用注解使用方法之生命周期

    本文github位置:https://github.com/WillVi/Spring-Annotation/ 往期文章:Spring注解开发-全面解析常用注解使用方法之组件注册 bean生命周期 ​ ...

  6. December 07th 2016 Week 50th Wednesday

    Life is a flower, and love is the honey of the flower. 人生是花儿,而爱情就是花的蜜. My life is not as beautiful a ...

  7. Union Find

    并查集 前言 来自知乎,Coursera 上普林斯顿大学的算法公开课,稍微来博客上写写记记. 课程资源:1. Algorithms, Part I 2. Algorithms, Part II 3. ...

  8. angularJs的作用域和依赖注入

    一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找  &rootScope这是全局作用域 <!DOCTYPE HTML&g ...

  9. Django F对象的使用

    概念 class FF()是代表模型字段的值,也就是说对于一些特殊的字段的操作,我们不需要用Python把数据先取到内存中,然后操作,在存储到db中了. 场景 例1:我们有个统计点击量的字段,每次更新 ...

  10. JavaScript权威指南第01章 JavaScript 概述

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangbin10025/article/details/27951767 JavaScript 概 ...