10-类选择器



错误的写法:

-->

迟到毁一生

早退穷三代

按时上下班

必成高富帅

我是段落

我是段落

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>10-类选择器</title>

    <style>

        .pp{

            color: red;

        }

        .ppp{

            color: green;

        }

        .pppp{

            color: blue;

        }

        .ppppp{

            color: yellow;

        }

        .para1{

            font-size: 100px;

        }

        .para2{

            font-style: italic;

        }

    </style>

</head>

<body>

<!--

1.什么是类选择器?

作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:

.类名{

    属性:值;

}

注意点:

1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名

2.在同一个界面中class的名称是可以重复的

3.在编写class选择器时一定要在class名称前面加上.

4.类名的命名规范和id名称的命名规范一样

5.类名就是专门用来给CSS设置样式的

6.在HTML中每个标签可以同时绑定多个类名

格式:

<标签名称 class="类名1 类名2 ...">

错误的写法:

<p class="para1" class="para2">

-->

<p class="pp">迟到毁一生</p>

<p class="ppp">早退穷三代</p>

<p class="pppp">按时上下班</p>

<p class="ppppp">必成高富帅</p>

<p class="para1 para2">我是段落</p>

<p class="para1 para2">我是段落</p>

</body>

</html>

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

  1. H5与CS3权威下.19 选择器（2）结构性伪类选择器

    1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...

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

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

  3. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  4. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  5. js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

  6. js进阶 10-7 简单的伪类选择器可以干什么

    js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...

  7. 彻底搞懂CSS伪类选择器：is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

  8. CSS伪类选择器：is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

  9. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

随机推荐

  1. mysql练习----More JOIN operations

    This tutorial introduces the notion of a join. The database consists of three tables movie , actor a ...

  2. c/c++ 类成员变量，成员函数的存储方式，以及this指针在c++中的作用

    c/c++ 类成员变量,成员函数的存储方式,以及this指针在c++中的作用 c++不会像上图那样为每一个对象的成员变量和成员函数开辟内存空间, 而是像下图那样,只为每一个对象的成员变量开辟空间.成员 ...

  3. 第九章 通过 SMB 共享虚拟机

      自 Windows Server 2012 起,微软引入了 SMB 3.0 的概念,通过 SMB 3.0,可以实现很多新的功能,包括我们介绍过的"SMB 多通道",以及将虚拟机 ...

  4. win10显示许可证即将过期，但在激活界面显示的仍是已激活问题解决

    win10开机显示"许可证即将过期"怎么办? 很多win10用户在开机的时候遇见了"许可证即将过期"请转到设置种激活windows的问题,但是查询自己的win1 ...

  5. Git&GitHub-基础教程

    目录 1. Git简介 1.1 什么是版本控制系统? 1.2. Git的历史 1.3. 什么是分布式?什么是集中式? 2. Git安装 3. 创建一个版本库 4. Git的语法教程 4.1. 提交一个 ...

  6. M码小黄衫买家秀=w=

    M码小黄衫买家秀=w= 17°的天气穿不了短袖polo..就只能这样强行上图啦~ 因为我一直耿耿于大一面向对象课上拿到的那件XL码小黄衫,长到能穿到膝盖,拍小黄衫全家福时候只能很凄凉的借了件小号的穿, ...

  7. 关于hightcharts如何在同一HTML画两个及以上图形问题

    ---恢复内容开始--- 写这篇博文也是因为做图表展示时被在同一网页上展示两个饼图难住,关键点在于views,py文件里面的render()函数,对于这个函数有三个参数: request----默认参 ...

  8. ubuntu如何安装 adobe flash player或adobe插件

    方法/步骤 第一步当然是打开终端控制器.有很多方法,这里推荐使用快捷键:ctrl+alt+T.快捷又方便. 然后更新源列表,使用如下命令:sudo apt-get update,后面要输入密码. 下面 ...

  9. （转）Spring Boot(十二)：Spring Boot 如何测试打包部署

    http://www.ityouknow.com/springboot/2017/05/09/spring-boot-deploy.html 有很多网友会时不时的问我, Spring Boot 项目如 ...

  10. php面试题整理（一）

    str_split() print_r(str_split("Shanghai"));Array ( [0] => S [1] => h [2] => a [3] ...