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 ...
随机推荐
- 图论--边双连通V-DCC缩点
// tarjan算法求无向图的割点.点双连通分量并缩点 #include<iostream> #include<cstdio> #include<cstring> ...
- CF1324D Pair of Topics
好像题解里都是树状数组(起码我翻到的是 说一种cdq分治的(这应该算是cdq分治了 用cdq比较简单,所以可以作为一个练手题 cdq分治其实是一种模糊的思想,处理\([l,r]\)区间内,有多少\(( ...
- NetCore项目实战篇03---HTTP Patch 更新数据
一.什么是HTPP Patch HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 ...
- 首次使用AWS服务器EC2
AWS有一年的免费套餐,这个便宜我得占. 申请的时候需要填写银行卡,AWS暂不支持储蓄卡,只好绑信用卡了. 创建EC2实例之后,下一个要解决的问题就是远程root访问. 1. 修改安全组设置 2. s ...
- D. Sequence Sorting dp
D. Sequence Sorting 题目大意:给你一个序列,有一种操作就是对所有相同的数可以挪到最前面,也可以挪到最后面,问最少操作次数. 首先,对于很多个相同的数,可以缩成两个位置,一个是就是这 ...
- C# 数据操作系列 - 1. SQL基础操作
0.前言 前篇介绍了一些数据库的基本概念和以及一些常见的数据库,让我们对数据库有了一个初步的认识.这一篇我们将继续为C#数据操作的基础填上一个空白-SQL语句. SQL(Structured Quer ...
- 带你看看Java的锁(一)-ReentrantLock
前言 AQS一共花了5篇文章,对里面实现的核心源码都做了注解 也和大家详细描述了下,后面的几篇文字我将和大家聊聊一下AQS的实际使用,主要会聊几张锁,第一篇我会和大家聊下ReentrantLock 重 ...
- Day_09【常用API】扩展案例7_验证QQ号是否正确
需求说明 请用户输入一个"QQ号码",我们来判断这个QQ号码是否正确 要求:使用方法来完成判断功能 验证规则: 1)必须是5-12位数字: 2)首位不能是0: package co ...
- [hdu5448 Marisa’s Cake]多边形面积，公式化简
题意:给一个凸多边形,求任选若干点形成的多边形的面积和. 思路: 按一定方向(顺时针或逆时针)对多边形的顶点进行编号,则多边形的面积计算公式为:f1 x f2 + f2 x f3 + ... fn-1 ...
- CODING 敏捷实战系列课第三讲：可视化业务分析
业务分析处在开发过程的上游,提高业务分析的质量,可以减少后续开发.测试和集成过程中的反复确认,场景遗漏.采用可视化的业务分析工具箱可以大幅度避免文字版的业务需求描述所带来的不够完整,有误解等问题.CO ...