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 ...
随机推荐
- POJ 1170 Shopping Offers非状态压缩做法
Shopping Offers Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5659 Accepted: 2361 Descr ...
- POJ - 2251 Dungeon Master（搜索)
You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is composed of un ...
- HTTP请求头中的X-Forwarded-For介绍
概述 我们在做nginx方向代理的时候,为了记录整个代理过程,我们往往会在配置文件中加上如下配置: location ^~ /app/download/ { ... proxy_set_header ...
- python学习笔记-零碎知识点
1. 绝对值 abs(-4) 结果: 4 2.
- Kali：系统安装之后进行所需配置
apt设置源 由于官网的源需要墙或者想使用国内的源,可以修改source.list vi /etc/source.list 打开文件并修改为其他可用的源地址,以下可供参考 deb http://ftp ...
- Spring Boot Admin实现服务健康预警
Over View 上一篇文章主要介绍了Spring Boot Admin的概况以及我们如何在系统中引入和使用Spring Boot Admin,以此来帮助我们更加了解自己的系统,做到能快速发现.排查 ...
- Codeforces 909E(Coprocessor,双队列维护)
题意:给出n个待处理的事件(0 ~n-1),再给出了n个标(0表示只能在主处理器中处理这个事件,1表示只能在副处理器中处理这个事件),处理器每次能处理多个任务.每个事件有关联,如果一个任务要在副处理器 ...
- 搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言中的double类型(双精度浮点型),不区分浮点型和整数型. number类 ...
- goland pojie
goland pojie 只适用于goland2019.1.3之前的版本,之后的版本没法支持. 1. 步骤 修改vm启动参数 激活正版 2. agent 网上有很多agent都是不能用的,我上传一个可 ...
- spark机器学习从0到1决策树(六）
一.概念 决策树及其集合是分类和回归的机器学习任务的流行方法. 决策树被广泛使用,因为它们易于解释,处理分类特征,扩展到多类分类设置,不需要特征缩放,并且能够捕获非线性和特征交互. 诸如随机森林和 ...