胖虎都看得懂的CSS入门
CSS入门
CSS是什么 摘自维基百科
层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中
为什么要说div和css
因为大家都用html中的div块级标签结合css来渲染页面，其实说span和css也是可以的
简单的html样式渲染
- 直接在标签中使用style来进行渲染
<div style="background-color: #6699FF; color: coral; height: 40px; width: 140px;">简单的html渲染</div>
<br>
<span style="background-color: #6699FF; color: coral; height: 40px; width: 140px;">简单的html渲染</span>
- 结果
在head中写样式
同样，我们可以在head中写一些样式，并使用一定的方式将样式和标签进行关联，关联的方式有很多种，下面一一说明：
id选择器
- head 中的样式需要放在
<style></style>标签中
/*id选择器，以#开头*/
<style>
#i1 {
background-color: aqua;
height: 47px;
}
#i2 {
background-color: yellow;
height: 47px;
}
#i3 {
background-color: crimson;
height: 47px;
}
</style>
- 使用这些id选择器
<body>
<!--在标签中使用id来关联-->
<div id="i1">id选择器1</div>
<div id="i2">id选择器2</div>
<span id="i3">id选择器3</span>
</body>
- 结果
class选择器
- class举例，以.作为标志
<style>
.c1 {
background-color: #99CCFF;
height: 30px;
}
</style>
- 使用class选择器
<div class="c1">重复使用class选择器</div>
<div class="c1">重复使用class选择器</div>
<div class="c1">重复使用class选择器</div>
<span class="c1">重复使用class选择器</span>
- 结果展示
标签选择器
- 在样式中中直接使用一个标签来定义一个样式，那么body重的所有的这个标签都会使用这个样式
div { /*这个地方我使用的是div标签来举例，大家可以尝试其他的各种标签*/
background-color: black;
color: red;
}
- 使用标签选择器
<div>标签选择器</div>
<div>标签选择器</div>
<!--而我们的span标签就不会套用这个样式-->
<span>标签选择器</span>
- 结果
组合选择器
- 用逗号
.来将多个相同的样式链接起来
/*这里使用的是id的形式来说明，class也通用*/
#y1,#y2,#y3 {
background-color: yellow;
height: 47px;
}
- 使用组合选择器，共同拥有这样一个样式
<div id="y1">组合选择器</div>
<div id="y2">组合选择器</div>
<span id="y3">组合选择器</span>
- 结果
层级选择器
- 根据我们规定的层级关系，来套用样式
.c1 {
background-color: #99CCFF;
height: 30px;
}
/*层级选择器1,会选择span标签下的div标签进行渲染*/
span div {
background-color: white;
color: red;
}
/*会选择使用了class选择器下的div进行渲染，当然也可以使用id选择器*/
.c1 div { /* 这里我们使用了上面的class选择器c1*/
background-color: greenyellow;
color: purple;
}
- 使用层级选择器
<span >层级选择器第一层
<div >层级选择器第二层</div>
</span>
<br>
<span class="c1">层级选择器第一层
<div >层级选择器第二层</div>
</span>
- 结果
属性选择器
- 根据我们自己定义的属性来进行选择
.c1 { /*class选择器*/
background-color: #99CCFF;
height: 30px;
color: black;
}
/*属性选择器，会选择class选择器下面的id选择器[y1]进行渲染*/
.c1 [id='y1'] {
background-color: yellow;
height: 417px;
}
- 使用属性选择器
<div class="c1">属性选择器第一层
<div id="y1">属性选择其第二层</div>
</div>
结果
此处做一个简单的分析，利用chrome的检查来分析
- 首先使用div中的class选择器c1进行渲染“属性选择器第一层”
- 最后找到属性选择器的第二级：id='y1'，使用属性选择器的方式进行渲染
选择器的优先级
- 既然说到了这么多的选择器，那么如果我写了很多样式，也使用了很多的仙则其方式，那么我们的页面到底会选择哪种的方式进行渲染呢？
- 答案是哪个写在最上面就优先级高，而后面的重复的内容会把上面的覆盖
- 举例说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css优先级</title>
<style>
/*一个id选择器*/
#b1 {
background-color: skyblue;
}
/*一个class选择器*/
.c1 {
background-color: red;
}
/*一个属性选择器*/
div [id='b1'] {
background-color: green;
}
.c1 [id='b1'] {
background-color: gold;
}
/*一个标签选择器*/
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>这个div标签会直接使用上面的div标签选择器进行渲染，背景色为黄色</div>
<br>
<div>第一层会使用div标签的背景色：黄色
<div id="b1">这个二层div标签会使用属性选择器：背景色为天空蓝</div>
</div>
<br>
<div class="c1">第一层会使用class的red，而不会使用div的green
<div id="b1">第二层会使用id选择器的skyblue</div>
</div>
</body>
</html>
- 上面的结果：
我们从Chrome中重点看一下这一段中的里面的div:
<div class="c1">第一层会使用class的red，而不会使用div的green
<div id="b1">第二层会使用id选择器的skyblue</div>
</div>
- Chrome检查分析图：
- 首选使用div标签选择器，但是被覆盖
- 其次使用属性选择器div的id='b1'，但是被覆盖
- 再次使用属性选择器
.c1 [id='b1']，但是也被覆盖 - 最后使用id选择器的b1进行最后的渲染，显示为skyblue
将我们的各种样式写入css文件中，以便于多个html进行复用
- 包含上面例子中的各种选择器样式的css文件,定义为
example.css
/*一个id选择器*/
#b1 {
background-color: skyblue;
}
/*一个class选择器*/
.c1 {
background-color: red;
}
/*一个属性选择器*/
div [id='b1'] {
background-color: green;
}
.c1 [id='b1'] {
background-color: gold;
}
/*一个标签选择器*/
div {
background-color: yellow;
}
- 在html的head中引用进来享用
<head>
<link rel="stylesheet" href="css/example.css" >
</head>
胖虎都看得懂的CSS入门的更多相关文章
- 小学生都看得懂的C语言入门(1): 基础/判别/循环
c基础入门, 小学生也可以都看得懂!!!! 安装一个编译器, 这方面我不太懂, 安装了DEV-C++ ,体积不大,30M左右吧, 感觉挺好用,初学者够了. 介绍下DEV 的快键键: 恢复 Ctrl+ ...
- 一看就懂的ReactJs入门教程（精华版）
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...
- 小学生都看得懂的C语言入门(5): 指针
现在已经学到C语言的后面了, 快学完咯.... (一)取地址运算 先来看一下sizeof 计算所占字节 #include<stdio.h> int main() { int a; a=; ...
- 小白都看得懂的Javadoc上手教程
Javadoc是什么 官方回答: Javadoc is a tool for generating API documentation in HTML format from doc comments ...
- 小白都看得懂的Javadoc使用教程
Javadoc是什么 官方回答: Javadoc is a tool for generating API documentation in HTML format from doc comments ...
- 小学生都看得懂的C语言入门(6): 字符串
1.字符用 char 表示 #include<stdio.h> int main() { char c; char d; c=; d='; if (c==d){ printf(" ...
- 小学生都看得懂的C语言入门(4): 数组与函数
// 之前判断素数, 只需要到sqrt(x)即可,//更加简单的, 判断能够比已知的小于x的素数整除, 运行更快 #include <stdio.h> // 之前判断素数, 只需要到sqr ...
- 小学生都看得懂的C语言入门(2): 判别 循环的一些应用实例
1.bool 类型 定义bool类型之前需要导入#include <stdbool.h> #include <stdio.h> #include <stdbool.h&g ...
- 小学生都看得懂的C语言入门(3): 数组与函数
#include <stdio.h> int main() { int x; ; ; scanf("%d",&x){ sum+=x; cnt++; scanf( ...
随机推荐
- 【转】globk和glorg中使用的apr文件
gamit和globk分析设置先验坐标和速度的要求和规则是不同的,因为在不同的阶段和环境下需要不同.从相位数据和松弛约束坐标和它们的方差得到的精 密坐标的可靠估计是假设对先验值的调整很小,也就是说在调 ...
- javascript中this指向问题
本文参考http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html this是JavaScript的一个关 ...
- java存放数据的5个地方
1.寄存器:最快的存储区,位于处理器内部,但是寄存器的数量极其有限,所以寄存器根据需求进行分配,你不 能直接控制,也不能在程序中感觉到寄存器存在的任何迹象.(C/C+允许向寄存器建议寄存器配, 但它不 ...
- JAVA中的数据存储空间简述
在 JAVA 中,有六个不同的地方可以存储数据: 1. 寄存器( register ): 最快的存储区,因为它位于不同于其他存储区——处理器内部.但是寄存器的数量极其有限,所以寄存器由编译器根据需求进 ...
- ABP官方文档翻译 7.1 后台Jobs和Workers
后台Jobs和Workers 介绍 后台Jobs 关于Job持久化 创建后台Job 在队列中添加一个新Job 默认的后台Job管理器 后台Job存储 配置 禁用Job执行 异常处理 Hangfire集 ...
- SpringMVC源码情操陶冶-InterceptorsBeanDefinitionParser拦截器解析器
解析mvc:interceptors节点 观察下InterceptorsBeanDefinitionParser的源码备注 /** * {@link org.springframework.beans ...
- Spring整合JDBC及事务处理
1.Spring整合JDBC DAO是数据访问对象(data access object)的简写.接口是实现松耦合的关键,Spring也鼓励使用接口,但不是强制的. 捕获异常时希望能尝试从异常状态中恢 ...
- UWP: 在 UWP 中使用 Entity Framework Core 操作 SQLite 数据库
在应用中使用 SQLite 数据库来存储数据是相当常见的.在 UWP 平台中要使用 SQLite,一般会使用 SQLite for Universal Windows Platform 和 SQLit ...
- BZOJ 3729: Gty的游戏 [伪ETT 博弈论]【学习笔记】
题意: 给定一棵有根树,每个节点有一些石子,每次可以将不多于k的石子移动到父节点 修改一个点的石子数,插入一个点,询问某棵子树是否先手必胜 显然是一个阶梯Nim 每次最多取k个,找规律或者观察式子易发 ...
- XML实体解析器的作用
XML实体解析器的作用 什么是实体解析器 如果一个sax解析器需要实现对外部实体的自定义处理,那么必须实现一个EntityResolver接口并且注册到SAX驱动上. 从这段文字可以看出来,实体解析器 ...