css学习(1)
一.标签选择器
标签{属性:值;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*标签选择器*/
div{
font-size:50px;
color: green;
background-color:yellow;
width:300px;
height:200px;
}
p{
color: black;
font-size: 60px;
}
</style>
</head>
<body>
<div>标签选择器1</div>
<div>标签选择器2</div>
<p>标签选择器3</p>
<p>标签选择器4</p>
<div>标签选择器5</div>
</body>
</html>
标签选择器
二.类选择器
.自定义类名{属性:值; 属性:值;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size:40px;
color: #ff0000;
width: 400px;
height: 300px;
background-color:#999;
}
.miss{
text-indent:2em;
/* text-align: right; */
} </style>
</head>
<body>
<div class="box miss" >类选择器1</div>
<div>类选择器2</div>
<p class="box">类选择器3</p>
<p>类选择器4</p>
<span class="box">类选择器5</span> </body>
</html>
类选择器
三.id选择器
#自定义名称{属性:值;}
特点: 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上,不符合w3c规范,JS调用会出问题。
一个标签只能调用一个ID选择器。
一个标签可以同时调用类选择器和ID选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
font-size: 40px;
color: rgb(0,0,255);
background-color: rgb(255,255,0);
}
.box{
text-indent: 2em;
}
</style>
</head>
<body>
<div id="box" class="box">ID选择器1</div>
<div id="box">ID选择器2</div>
<p>ID选择器3</p>
<p>ID选择器4</p> </body>
</html>
ID选择器
四.复合选择器
概念:两个或者两个以上的基础选择器通过不同的方式连接在一起。
(1) 交集选择器
标签+类(ID)选择器{属性:值;}
特点:即要满足使用了某个标签,还要满足使用了类(id)选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size:50px; }
div.box{
color:blue;
} div#miss{
width: 400px;
height: 300px;
background-color:yellow;
} </style>
</head>
<body>
<div class="box">交集选择器1</div>
<p class="box">交集选择器2</p>
<div id="miss">交集选择器3</div>
</body>
</html>
(2)后代选择器
选择器+空格+选择器{属性:值;}
后代选择器首选要满足包含(嵌套)关系。
父集元素在前边,子集元素在后边。
特点:无限制隔代。
只要能代表标签,标签、类选择器、ID选择器自由组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*.box{
font-size:40px;
color:red;
}
div span{
font-size: 50px;
}*/
/*.box span{
background-color: blue;
}*/
/* .box .miss{
color:red;
}*/
.box span{
color:red;
}
</style>
</head>
<body>
<div class="box">
<p><span class="miss">后代选择器1</span>
<span>后代选择器2</span>
</p> </div>
<div class="box"><span>后代选择器3</span></div>
</body>
</html>
后代选择器
(3) 子代选择器
选择器>选择器{属性:值;}
选中直接下一代元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div>span{
color:red;
font-size:40px;
}
p>span{
color:green;
font-size:60px;
} </style>
</head>
<body>
<div>
<p><span>子代选择器1</span></p>
<span>子代选择器2</span> </div>
</body>
</html>
子代选择器
(4)并集选择器
选择器+,+选择器+,选择器{属性:值;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box,#miss,span,h1{
font-size:100px;
color: #fff;
background-color: green; }
</style>
</head>
<body>
<div class="box">并集选择器1</div>
<p id="miss">并集选择器2</p>
<span>并集选择器3</span>
<h1>并集选择器4</h1>
</body>
</html>
并集选择器
css学习(1)的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结(二) 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结(一) 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- html+css学习总结
HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- MongoDB的真正性能-实战百万用户
阅读目录 一.第一个问题:Key-Value数据库可以有好多的Key,没错,但对MongoDB来说,大错特错 二.第二个问题:FindOne({_id:xxx})就快么? 三.第三个问题:精细的使用U ...
- xencenter如何安装系统
首先点击增加服务器 输入xenserver的ip和用户名以及密码 添加资源池,注意下面那个add new server也要指定一个server,例如刚刚创建的那个 还要搞一个存储的,注意iso要选择s ...
- JDBC模拟用户登录
代码: import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import ...
- js中获取当前url参数值的一个方法
var $_GET = (function(){ var url = window.document.location.href.toString();//获得当前url地址并 ...
- VS中实时获取SVN的版本号并写入到AssemblyInfo.cs中
在开发项目时,需要知道当前发布的到底是哪个版本,比较好的方式就是获取SVN的版本来作为项目的版本.项目版本一般由主版本.次版本.内部版本.修改版本四个部分组成,我们获取的SVN版本就作为修改版本即可. ...
- out, ref 和 params 的区别和用法
1. out 参数. 如果你在一个方法中,返回多个相同类型的值,可以考虑返回一个数组. 但是,如果返回多个不同类型的值,返回数组就不可取.这个时候可以考虑使用out参数. out参数就侧重于在一个方法 ...
- Hadoop HDFS NameNode工作机制
Secondary namenode 首先,我们假设如果存储在Namenode节点的磁盘中,因为经常需要进行随机访问,还有响应客户请求,必然是效率过低.因此,元数据需要存放在内存中.但如果只存在内存中 ...
- class path resource [spring/ApplicationContext-springmvc.xml] cannot be opened because it does not exist
配置如下: <init-param> <param-name>contextConfigLocation</param-name> <param-va ...
- SDI初识
SDI初识 SDI接口,即“数字分量串行接口(Serial Digital Interface)”.按照速率可以分为: 标准清晰度SD-SDI,速率为270Mb/s; 高清标准HD-SDI,速率为1. ...
- 代码编辑器之notepad++
引用及下载地址:http://www.iplaysoft.com/notepad-plus.html NotePad++ 优秀的支持语法高亮的开源免费编辑器绿色版下载 EditPlus,它始终是一款收 ...