css 基础 选择器的使用
1.标签选择器
解释:是针对一个标签做的样式,它会将匹配的所有标签都发生改变
语法格式:标签名{
css样式代码
}
2.类选择器
特点:1.可以给某一个标签标记为一类,设定css样式,比较灵活
2.类目可以以,字母、数字、下划线、中划线组成,但不能以数字或中划线开头
3.一个标签可以同时有多个类名,用空格隔开即可
4.一个类选择器可以拥有多个标签,效果同时生效
//使用方法和语法
<style>
.red{
color: red;
}
.yellow {
color: yellow;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<p class="red">红姐</p>
<p class="yellow">大黄</p>
<p class="blue">小蓝</p>
</body>
</html>
3.id选择器
特点:1.id是唯一的,一个页面中只能出现一次,类似身份证
2.一个id 号,只能拥有一个标签
使用方法如下:
<style>
#red{
color: red;
}
#yellow {
color: yellow;
}
#blue{
color: blue;
}
</style>
</head>
<body>
<p id="red">红姐</p>
<p id="yellow">大黄</p>
<p id="blue">小蓝</p>
</body>
</html>
4.通配符选择器
语法:*{ css语句 } 通常用在去除padding和margin
css 基础 选择器的使用的更多相关文章
- CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
- CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)
一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...
- 0009 CSS基础选择器( 标签、类、id、通配符)
typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...
- 2020年12月-第02阶段-前端基础-CSS基础选择器
CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
- CSS【03】:CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- WEB学习-CSS基础选择器
基础选择器 标签选择器 就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...
- CSS基础选择器总结
基础选择器 作用 特点 使用情况 用法 标签选择器 可以选出所有相同的标签,比如p 不能差异化选择 较多 p {color:red;} 类选择器 可以选出1个或多个标签 可以根据需求选择 非常多 .n ...
- CSS 基础 选择器的使用汇总
1.后代选择器 html 结构 <div class='father'> <p>小哥哥 小姐姐</p> <div> <p>小帅锅</p ...
随机推荐
- 快速上手git gitlab协同合作
简单记录,整理. 摘要 为方便大家快速上手Git,并使用Gitlab协同合作,特编写此手册,手册内容不会太丰富与深入.主要包含如下内容: Git 使用教程1.1 安装1.2 常用命令1.3 版本控制1 ...
- Maven错误收集
Eclipse 创建项目时报错 Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart:1 ...
- Linux 性能优化笔记:应用监控
指标监控 跟系统监控一样,在构建应用程序的监控系统之前,首先也需要确定,到底需要监控哪些指标.特别是要清楚,有哪些指标可以用来快速确认应用程序的性能问题. 对系统资源的监控,USE 法简单有效,却不代 ...
- arcgis api for js回调函数如何等待同步
arcgis js开发往往会遇到同步异步的问题,有可能在上一步使用了arcgis js模块回调函数,下一步需要用上一步回调函数的结果,但是因为JavaScript是异步执行的,它并不会等待上一步的回调 ...
- Apifox(2)快速上手apifox
快速上手 使用场景 Apifox 是接口管理.开发.测试全流程集成工具,使用受众为整个研发技术团队,主要使用者为前端开发.后端开发和测试人员. 前端开发 接口文档管理 接口数据 Mock 接口调试 前 ...
- bootstrapTable频繁向后台接口发请求
当bootstrapTable出现这样的问题,是因为查询到的数据行数为空,而后台返回的总行数又不为0时,就会疯狂地往接口发请求
- python3约瑟夫环问题
问题描述:n个人围成一个圈,从第一个人开始数1,数到第k个出局,然后下一个人继续从1数,求出局人编号 思路:将所有人编号放到数组里,一个人出局后,下一个人加上k对数组长度求余,得出下一个要删除的编号. ...
- Java值引用和对象引用区别Demo
转自:http://blog.csdn.net/gundsoul/article/details/4927404 以前就知道JAVA对象分对象引用和值引用,并且还知道8种基础数据类型,即引用时是值引用 ...
- 自动化集成:Jenkins管理工具详解
前言:该系列文章,围绕持续集成:Jenkins+Docker+K8S相关组件,实现自动化管理源码编译.打包.镜像构建.部署等操作:本篇文章主要描述Jenkins基础用法. 一.Jenkins安装 1. ...
- 延时间隔(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 像"饭前洗手"这种事,绝大部分情况下,是洗完手马上就可以动筷子开吃,但总会有意外,比如手都洗好了,突然 ...