CSS基础知识---三种选择器

选择器
- 标签选择器
- id选择器
- class选择器
全部代码

选择器

标签选择器
id选择器
class选择器

标签选择器

选择器优先级：id>class>标签

/*标签选择器*/h1{color:#000000;font-size:50px;}p{text-align: center;color: salmon;}body{margin: 0;padding: 0;}

id选择器

/*ID选择器*/#myP{color: brown;}

class选择器

/*Class选择器*/.myClass{font-size: 20px;}

全部代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>My World</title><style>/*选择器优先级id>class>标签*//*标签选择器*/h1{color:#000000;font-size:50px;}p{text-align: center;color: salmon;}body{margin: 0;padding: 0;}/*ID选择器*/#myP{color: brown;}/*Class选择器*/.myClass{font-size: 20px;}</style></head><body><img src="img/u=192422651,1443365817&fm=26&gp=0.jpg" width="10%" alt="你这是啥网" /><h1 class="myClass">欢迎来到德莱联盟</h1><p class="myClass">豹女，狮子狗提莫，凯尔德莱厄斯，德莱文盖伦，艾希</p><p id="myP">豹女，狮子狗提莫，凯尔德莱厄斯，德莱文盖伦，艾希</p></body>
</html>

效果：

CSS基础知识---三种选择器相关推荐

CSS基础知识（一）：选择器
文章目录前言一.CSS基础知识二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
射频知识基础：三种接收机的介绍
射频知识基础:三种接收机的介绍关于接收机结构我们从最传统的超外差结构开始介绍.超外差结构能提供非常好的性能,但这种结构需要大量分离元件,像滤波器等.这种结构无法单芯片集成实现,因此出现了零中频,低中 ...
HTML引入css样式的三种方式，css选择器的三种样式
文章目录前言一. css样式的三种方式第一种:内联定义方式第二种: 样式块第三种:引入外部独立css文件二. 选择器的三种样式第一种:id选择器第二种:标签选择器第三种:类选择器三 ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图一.复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表学习目标理解 css的目的作用 css的三种引入方式应用 css三种引用方式的书写通 ...
CSS基础知识（定位）
CSS基础知识 CSS布局的三种机制普通流(标准流) 浮动定位定位模式静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 边偏移定位 ...

CSS基础知识---三种选择器

CSS基础知识---三种选择器

选择器

标签选择器

id选择器

class选择器

全部代码

CSS基础知识---三种选择器相关推荐

最新文章

热门文章