(一)在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. unzipping/Users/xq/.gradle/wrapper /dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zi

    unzipping/Users/xq/.gradle/wrapper /dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zi ...

  2. Intellij IDEA通过SVN导入基于Springboot的maven项目以及对已有项目做更新

    一.导入外部maven项目 点击“+”,输入SVN地址并下载项目 弹出窗口,选择new window(自己觉得哪个好就选哪个) 等待执行完毕,执行完后会出现以下情况,就需要配置一下你的maven库了 ...

  3. data encryption

    package com.itheima; import java.util.Scanner; /* * 需求:键盘录入数据,要求数据是四位的整数,现需要对数据进行加密,加密规则如下: * 每位数字都加 ...

  4. 实验吧Crypto题目Writeup

    这大概是一篇不怎么更新的没什么用的网上已经有了很多差不多的东西的博客. 变异凯撒 忘记了2333 传统知识+古典密码 先查百度百科,把年份变成数字,然后猜测+甲子的意思,一开始以为是加1,后来意识到是 ...

  5. Week3——Session

    Session 一.Session是会话技术的一种.会话技术分为Cookie和Session.Cookie是数据存储在客户端本地,减少服务器端的存储的压力,安全性不好,客户端可以清除cookie: S ...

  6. Windows Azure系列公开课 - 第二课：为什么选择Windows Azure（上）

    Windows Azure是微软的云平台,可以提供广泛服务.您可以通过它搭建.部署并管理解决方案,用于实现您可以想象的几乎任何目标.换言之,WindowsAzure是拥有无限可能的世界.无论您是需要运 ...

  7. 【转】ISMS方针、手册、程序文件模板

    <ISMS方针.手册.程序文件模板> 1 信息安全管理手册 2 信息安全适用性声明 3 信息安全管理体系程序文件 3.01文件管理程序 3.02记录管理程序 3.03纠正措施管理程序 3. ...

  8. VS2017配置cuda9.1编译不过问题。

    #if defined(_WIN32) #if _MSC_VER < 1600 || _MSC_VER > 1920 #error -- unsupported Microsoft Vis ...

  9. Redis集群部署-windows

    Redis集群部署-windows 前言 为了能体验一下部署Redis集群是一种怎么样的体验,所一边做一边写了这篇记录. 1.准备 从这里下载windows服务端 https://github.com ...

  10. SOJ 1089 FatMouse的奶酪 暴力

    BackGround FatMouse拥有许多奶酪,所有的奶酪都有一个彼此不同的重量.FatMouse为了控制它自己的体重,在每天早上它都会计算今天应该吃多少奶酪才能无痛苦地减肥. The Probl ...