css：选择器（标签、类、ID、通配符）
1、css概述
主要的使用场景就是美化网页，布局页面
（1）html的局限性
它只关注内容的语义，只能做一些简单的样式，并且非常的臃肿和繁琐
（2）css对网页美化的作用
css是层叠样式表的简称，它和html是一样的，都是一种标记语言，css主要用于设置html页面的文本内容（字体、大小、对齐方式等）图片的外形（宽度、高度、边框样式、边距等）以及版面的布局和外观显示样式。css可以美化html使得页面更加漂亮，页面的布局更加简单。
（3）html与css
html主要做结构，显示元素内容，css美化html，布局网页。因此，html专注结构呈现，css做样式，即结构与样式相分离
2、css语法规范
（1）代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>静夜思</h2>
<p>
床前明月光，疑似地上霜
</p>
<p>
举头望明月，低头思故乡，
</p>
</body>
</html>
（2）测试
在style标签中，p被称为选择器，用于指定css的html标签，花括号内部是对该对象设置的具体样式
属性和属性的值，以键值对的形式出现
属性和属性的值以冒号隔开
每一个键值对以分号相隔开
3、选择器
就是根据不同的需求，把不同的标点选出来。
（1）标签选择器
标签选择器是指用标签名称作为选择器，按照标签名称分类，为页面中某一标签制定统一的样式。优点是能够快速地为页面同类型的标签，统一设置样式。但是标签选择器不能满足差异化样式，只能同时设置同一类型的标签
代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
font-size: 20px;
} div{
color:black;
font-size: 25px;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>静夜思</h2> <p>
床前明月光，
</p> <p>
疑似地上霜，
</p> <div>
举头望明月，
</div> <div>
低头思故乡，
</div> </body>
</html>
测试：
标签选择器，是根据标签的不同来对样式进行设置的
（2）类选择器
标签选择器不能实现差异化的设置，但是类选择器可以，它可以单独选一个或者几个标签
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.myclass1{
color: red;
font-size: 20px;
} .myclass2{
color:black;
font-size: 25px;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>静夜思</h2> <p class="myclass1">
床前明月光，
</p> <p class="myclass2">
疑似地上霜
</p> <div class="myclass1">
举头望明月，
</div> <div class="myclass2">
低头思故乡
</div> </body>
</html>
测试：
在使用类选择器之后，即使是相同的标签，也可以实现不同的样式。如果说标签选择器是为了区别不同的标签的话，那么类选择器，则可以进一步对众多的同一种标签进行区分
类命名规则：
头：header
内容：content
尾：footer
导航：nav
侧栏：column
菜单：menu
类选择器实现盒子模型：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.red{
width: 50px;
height: 20px;
background-color: red;
} .yeloow{
width: 50px;
height: 40px;
background-color: yellow;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>类选择器实现盒子模型</h2> <div class="red"></div> <div class="yeloow"></div> <div class="red"></div> </body>
</html>
在同一种标签中，通过class的不同实现不同的布局
类选择器的多类名：一个标签的class属性有多个值
可以把一些标签元素相同的元素放到一个类里面：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.myclass1{
width: 250px;
height: 60px;
background-color: blanchedalmond;
}
.myclass2{
width: 250px;
height: 60px;
background-color:red;
}
</style>
</head>
<body>
<h2>类选择器实现盒子模型</h2> <div class="myclass1">
床前明月光，疑是地上霜.
</div> <div class="myclass2">
举头望明月，低头思故乡，
</div> </body>
</html>
在这个案例中，两句话显示的区域的大小是相同的，可以把他们抽取出来，重新创建一个新的class
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.myclass1{
background-color: blanchedalmond;
}
.myclass2{ background-color:red;
}
.area{
width: 250px;
height: 60px;
}
</style>
</head>
<body>
<h2>类选择器实现盒子模型</h2> <div class="myclass1 area">
床前明月光，疑是地上霜.
</div> <div class="myclass2 area">
举头望明月，低头思故乡，
</div> </body>
</html>
这样的话可以节省css代码，统一修改也非常方便
（3）id选择器
ID选择器和类选择器的使用方法基本相同，但是定义方式不同，最大的区别就是ID选择器只能使用一次
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#color{
color: red;
}
</style>
</head>
<body>
<div id="color">
床前明月光，疑是地上霜.
</div>
</body>
</html>
（4）通配符选择器
*：修改所有标签的样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div id="color">
床前明月光，疑是地上霜.
</div>
<p>
举头望明月，低头思故乡.
</p>
</body>
</html>
css：选择器（标签、类、ID、通配符）的更多相关文章
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）
一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- html5--6-11 CSS选择器7--伪类选择器
html5--6-11 CSS选择器7--伪类选择器 #E:target 选择当前活动的锚点元素. 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候, ...
- html5--6-10 CSS选择器7--伪类选择器
html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓 ...
- html5--6-9 CSS选择器6--伪类选择器
html5--6-9 CSS选择器6--伪类选择器 实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-chi ...
- HTML5新标签使用及CSS选择器(伪类)
这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...
- css选择器四大类：基本、组合、属性、伪类
什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器.属性选择器.组合选择器与伪类选择器四个大类! css基本选择器 基本选择器又分为:*通配符.标 ...
- CSS选择器中类和ID选择器的区别
类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选 ...
- CSS选择器和jQuery选择器的区别与联系之一
到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...
- CSS汇总之CSS选择器
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. 一.通配符选择器 语法:*{ } 说明:通配符选择器可以选择页面上所有的html标签(包括body,h ...
随机推荐
- CF1288C-Two Arrays （DP）
You are given two integers n and m. Calculate the number of pairs of arrays (a,b) such that: the len ...
- codeforce 225B Code Parsing
Little Vitaly loves different algorithms. Today he has invented a new algorithm just for you. Vita ...
- UVA-2【NOI2014】起床困难综合症
#2. [NOI2014]起床困难综合症 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm 一直坚持与起床困难综合症作斗争.通过 ...
- libevent(二)尾队列 && 最小堆
本文主要研究libevent中用来存储事件的两个结构体. 尾队列 具体定义位于queue.h中. #define TAILQ_HEAD(name, type) \ struct name { \ st ...
- 从一条数据说起——InnoDB存储数据结构
本篇博客参考掘金小册--MySQL 是怎样运行的:从根儿上理解 MySQL 先给大家讲一个故事,我刚参加工作,在一个小作坊里面当[码畜](尽管现在也是),有一天老板从我背后走过,说了一句举世震惊的话: ...
- JVM系列-2、JVM内存结构
一.JVM内存结构 1.1.栈(JVM Stacks) 存放局部变量(定义在方法中的变量和定义在方法参数列表上的变量).对象引用(reference类型,它不等同于对象本身,根据不同的虚拟机实现,它可 ...
- Spring Cloud Alibaba系列（二）nacos作为服务配置中心
Nacos 提供用于存储配置和其他元数据的 key/value 存储,为分布式系统中的外部化配置提供服务器端和客户端支持.使用 Spring Cloud Alibaba Nacos Config,您可 ...
- 某科学的PID算法学习笔记
最近,在某社团的要求下,自学了PID算法.学完后,深切地感受到PID算法之强大.PID算法应用广泛,比如加热器.平衡车.无人机等等,是自动控制理论中比较容易理解但十分重要的算法. 下面是博主学习过程中 ...
- X Error:BadDrawable (individ Pixmap or Window parameter 9)
#描述 平台:aarch64 系统:ubuntu16.04.02 Qt Version:4.8.7 Qt程序可以正常运行,界面渲染出现问题以及乱码,控制提示错误内容: "unable to ...
- 模板引擎 Thymeleaf 动态渲染 HTML
1.添加依赖 <!-- Thymeleaf 模板引擎 --> <dependency> <groupId>org.thymeleaf</groupId> ...