第01步：编写css样式：class_01.css

@charset "utf-8";

/* CSS Document */

div.class01{

    background-color:#9F0;

    color:#FFF

    }

第02步： 编写html界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>类选择器应用</title>

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

</head>

<body>

    <div class="class01">

        调用了class_01.css里面的class01样式

    </div>

</body>

</html>

CSS_03_01_CSS类选择器的更多相关文章

  1. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  3. id选择器、类选择器、属性选择器

    在网页编辑时,通常要对样式进行各种设置.我们借助CSS样式设计中的选择器,就能很好很方便的对它们进行管理和设置了. 今天,跟大家分享一下几个常用的选择器:id选择器.类选择器.属性选择器. id选择器 ...

  4. CSS 多类选择器

    写的代码多了,就会发现,自己越来越无知了,总以为html css很简单,已经掌握的很熟练了,其实我还差的很多. 平时没有用过css的这种写法  .a.b{display:block;}   上网一查才 ...

  5. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

  6. CSS3中的伪类选择器详解

      类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...

  7. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  8. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

  9. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

随机推荐

  1. java JDK8 学习笔记——第18章 自定义泛型、枚举与注释

    第十八章 自定义泛型.枚举与注释 18.1 自定义泛型 泛型定义: (1)仅定义在方法上的泛型语法 (2)用来限制泛型可用类型的extends与super关键字(3)?类型通配字符的使用 18.1.1 ...

  2. Excel Sheet Column Number || leetcode

    很简单的26进制问题 int titleToNumber(char* s) { int sum=0,temp; char *p=s; while(*p!='\0'){ sum=sum*26+(*p-' ...

  3. grep与find

    grep命令可以指定文件中搜索特定的内容,并将含有这些内容的行标准输出.grep全称是Global Regular Expression Print -c:只输出匹配行的计数.-I:不区分大小写(只适 ...

  4. OO之美3

    面向对象和基于对象 基于对象:所以基于对象,就是一种对数据类型的抽象,封装一个结构包含了数据和函数,然后以对象为目标进行操作.构建的基础是对象,但是操作对象并不体现出面向对象的继承性,也就是基于对象局 ...

  5. Selenium2学习-006-WebUI自动化实战实例-004-解决 Chrome 浏览器证书提示：--ignore-certificate-errors

    此文主要讲述 Java 运行 Selenium 脚本时,如何消除 Chrome 浏览器启动后显示的证书错误报警提示,附带 Chrome 参数使浏览器最大化的参数. 希望能对初学 Selenium2 W ...

  6. Windows-008-VirtualBox 安装 Win7 前沿配置详解

    此文主要讲述在 Windows 系统下安装虚拟机 VirtualBox,及用 VirtualBox 安装 Win7 Professional 64bit 操作系统的前沿配置为例,配以图文进行详细的讲解 ...

  7. i++和++i的区别

    先看如下程序: class Program { static void Main(string[] args) { ; ; ; ; x = i++; Console.WriteLine("x ...

  8. 安装Sql server 2008时出现sql server 2005 express tools failed 怎么办？

    提示错误:Sql2005SsmsExpressFacet 检查是否安装了 SQL Server 2005 Express 工具. 失败,已安装 SQL Server 2005 Express 工具.若 ...

  9. linux boot logo rotate

    开机logo旋转方法. 参考链接 https://www.kernel.org/doc/Documentation/fb/fbcon.txt https://community.nxp.com/thr ...

  10. chem02-- ajax登录

    1.ajaxLogin.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...