Css概要与选择器，刻度单位
目录
web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控制的，就不应该使用HTML标签完成，如果CSS能解决的问题尽量不要用JavaScript完成。
一、CSS3概要
CSS（Cascading Style Sheet）是层叠样式表的意思，CSS3就是在CSS2.1的基础上升级的CSS新版本，属于HTML5的一部分。它可以有效地对页面的布局、字体、颜色、背景、动画和其它效果实现。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
1.1、特点
1.2、效果演示
纯CSS3画出小黄人并实现动画效果
HTML页面：
CSS样式：
相册演示的代码可以在示例中下载到。
1.3、帮助文档与学习
权威的帮助文档是最好的学习资料，CSS2的帮助，非常详细：
CSS3的帮助文档：
二、选择器
在使用CSS时我们首先要做的事情是找到元素，在写相应的样式，在CSS2.1中最常使用的是三种选择器：
a)、ID选择器：以#开始，引用时使用id，如id="div1"
#div1
{
color:red;
}
b)、类选择器：以.开始，使用class属性引用，可以有多个，如class="cls1 cls2 cls3"
.cls1
{
}
c)、标签选择器：以标签名称开始，如p,span,div,*
div span
{
font-size:14px;
}
当然还有如伪类选择，a:hover，a:link，a:visted，a:active。
在CSS3中新增了很多的选择器，如果大家会jQuery，jQuery中多数选择器在CSS3中都可以直接使用。
1.1、基础的选择器
红色字体中选择器的区别是：p.info的意思是p元素中必须有class="info"属性将被选择，p .info是选择后代元素，示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
p.info{
color: red;
}
p .info{
color: blue;
}
</style>
</head>
<body>
<h2>选择器</h2>
<p class="info">p1</p>
<p>
<span class="info">span1</span>
<p>p3</p>
</p>
</body>
</html>
运行结果：
1.2、组合选择器
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
#div1 span
{
color: red;
}
</style>
</head>
<body>
<h2>组合选择器</h2>
<div id="div1">
<span>span1</span>
<div id="div2">
<span>span2</span>
</div>
</div>
<span>span3</span>
</body>
</html>
运行结果：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
#div1 > span
{
color: red;
}
</style>
</head>
<body>
<h2>组合选择器</h2>
<div id="div1">
<span>span1</span>
<div id="div2">
<span>span2</span>
</div>
</div>
<span>span3</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
#div1 + span
{
color: red;
}
</style>
</head>
<body>
<h2>组合选择器</h2>
<div id="div1">
<span>span1</span>
<div id="div2">
<span>span2</span>
</div>
</div>
<span>span3</span>
<span>span4</span>
</body>
</html>
1.3、属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
div[id][class~=cls1] {
background: lightgreen;
}
</style>
</head>
<body>
<h2>组合选择器</h2>
<span>span0</span>
<div id="div1" class="cls1">
div1
</div>
<div id="div2" class="cls1 cls2">
div2
</div>
</body> </html>
运行结果：
1.4、伪类
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
td:first-child
{
background: lightcoral;
}
</style>
</head>
<body>
<h2>组合选择器</h2>
<table border="1" width="100%">
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
<hr />
<table border="1" width="100%">
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body> </html>
运行结果：
练习：实现隔行换色，当鼠标悬停在每一行上时高亮显示为黄色，按下时高亮红色。
<style type="text/css">
tr:nth-child(2n+1){
background:lightblue;
}
tr:hover{
background: yellow;
}
tr:active{
background: orangered;
}
</style>
1.5、伪元素
标准的伪元素应该使用::，但单:也行，只是为了兼容。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
a::before {
content: "网站";
display: inline-block;
background: red;
color: white;
}
</style>
</head>
<body>
<h2>伪元素</h2>
<a href="http://www.baidu.com">百度</a>
<a href="http://best.cnblogs.com">博客园</a>
</body>
</html>
运行结果：
三、特殊性（优先级）
a)、同类型，同级别的样式后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
d)、具体 > 泛化的，特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)
内嵌样式：内嵌在元素中，<span style="color:red">span</span>
内部样式表：在页面中的样式，写在<style></style>中的样式
外联样式表：单独存在一个css文件中，通过link引入或import导入的样式
f)、!important 权重最高，比 inline style 还要高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
* {
color: yellow;
}
p {
color: red !important;
}
.cls1 {
color: deeppink;
}
.cls2{
color: blueviolet;
}
#p1{
color:blue;
}
</style>
</head>
<body>
<div>
<p id="p1" class="cls2 cls1" style="color:#ccc">p1</p>
<span>span1</span>
</div>
</body>
</html>
运行结果：
3.2、计算特殊性值
important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
权重、特殊性计算法：
CSS样式选择器分为4个等级，a、b、c、d
1.如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0
2.b为ID选择器的总数 0,1,0,0
3.c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0
4.d为标签、伪元素选择器的数量 0,0,0,1
5.!important 权重最高，比 inline style 还要高
比如结果为：1093比1100，按位比较，从左到右，只要一位高于则立即胜出，否则继续比较。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
html body #div1
{
background: red;
} .cls1 #div1{
background: blue;
}
</style>
</head>
<body>
<div class="cls1">
<div id="div1">div1
</div>
<div id="div2">div2
</div>
</div>
</body>
</html>
运行结果：
因为html body #div1的特殊性值为：0102，而.cls1 #div1的特殊性值为0110，后者胜出。
四、刻度
在CSS中刻度是用于设置元素尺寸的单位。
特殊值0可以省略单位。例如：margin:0px可以写成margin:0
一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有： cm, mm, q, in, pt, pc, px
4.1、绝对长度单位
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
4.2、文本相对长度单位
em
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
浏览器的默认字体大小为16像素，浏览器默认样式也称为user agent stylesheet，就是所有浏览器内置的默认样式，多数是可以被修改的，但chrome不能直接修改，可以被用户样式覆盖。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em与rem</title>
<style type="text/css">
#div2{
background: blue;
height: 5em;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
结果：
div2的高度为80px，是因为user agent stylesheet默认样式中字体大小为16px，按照这个规则我们可以手动修改字体大小，div2的高度将发生变化。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em与rem</title>
<style type="text/css">
#div1 {
font-size: 20px;
}
#div2 {
color: white;
background: blue;
height: 5em;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
结果：
rem
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。（相对是的HTML元素的字体大，默认16px）
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em与rem</title>
<style type="text/css">
#div1 {
font-size: 20px;
}
#div2 {
color: white;
background: blue;
height: 5rem;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
运行结果：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em与rem</title>
<style type="text/css">
html {
font-size: 10px;
}
body {
font-size: 16px;
}
#div1 {
font-size: 20px;
}
#div2 {
color: white;
background: blue;
height: 5rem;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
结果：
按理说高度为5*10px=50像素高度，但这里为60，是因为chrome浏览器限制了最小字体大小为12px，从上图可以看出。
4.3、Web App与Rem
为了实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的tmall就使用这种办法，示例如下：
示例一：
运行结果：
示例二：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>web app 与rem</title>
<style type="text/css">
html {
font-size: 20px;
}
body {
font-size: 16px;
}
#div2 {
color: white;
background: blue;
height: 3rem;
width: 3rem;
font-size: .7rem;
}
</style>
</head> <body>
<div id="div2">
Hello rem
</div>
<script type="text/javascript">
function resize() {
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w * 20 / 290 + "px";
}
window.onresize =resize; resize();
</script>
</body> </html>
运行结果：
变屏幕变宽时元素大小也随之发生变化，但这里并没有考虑高度，但为响应式布局与hack提供了思路。
Css概要与选择器，刻度单位的更多相关文章
- CSS的总结(选择器,伪类等...)
关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...
- CSS概要
CSS概要 laiqun@msn.cn Contents 1. css的引入 2. css的选择器及效果图 3. css 盒模型 4. css 浮动 4.1. 浮动的作用: 4.2. 浮动的影响: 5 ...
- 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格
什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- Lining.js - 为CSS提供 ::nth-Line 选择器功能
在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...
- CSS 子元素选择器与后代选择器区别实例讲解
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
- CSS之后代选择器与多类选择器
<新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子 ...
随机推荐
- Ice-E(Embedded Internet Communications Engine)移植到s3c2440A（arm9）linux（2.6.12）上的
2009-03-26 18:31:31 原文链接 1.前言 ICE-E是ICE在嵌入式上运行的一个版本,与ICE比较如下: Category Ice 3.3.0 Ice-E 1.3.0 Thread ...
- centos下编译安装lnmp
centos下编译安装lnmp 本文以centos为背景在其中编译安装nginx搭建lnmp环境. 编译安装nginx时,需要事先安装 开发包组"Development Tools" ...
- 【BZOJ3172】[Tjoi2013]单词 AC自动机
[BZOJ3172][Tjoi2013]单词 Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input ...
- iMetro
body { background:#FFFFFF url("http://images.cnblogs.com/cnblogs_com/mookmark/745172/o_8.jpg&qu ...
- Linux基础命令-有关于目录的命令
1. 查看帮助: [root@oracle ~]# man cd //查看 cd 指令的帮助文档 2. 显示当前工作目录: [root@oracle ~]# pwd/root 3. 列出当前目录下的内 ...
- 【填坑向】bzoj2038小Z的袜子 莫队
学莫队必做题,,,但是懒得写.今天来填个坑 莫队水题 莫队实际上就是按一个玄学顺序来离线计算询问,保证复杂度只会多一个n1/2,感觉是玄学(离线算法都很玄学) 易错点:要开long long(卡我半天 ...
- 第一个Mac shell 小脚本
大多数程序员都喜欢偷懒的,我也不例外.相信好多Android开发的coder 在网络http请求方面,会浪费很多时间在接口调试这里..有时候,自己写了一个小测试,行还好,不行的话,还要跟写后台的哥们一 ...
- web常见错误提示总结
在写web程序的时候,经常会出现一些网页错误的数字提示,如果能够明白这些提示的含义,那对于调试程序是有极大帮助的.网上有很多这方面的总结,但为了适应自己的阅读习惯,以及日后的查找方便,就做了一些修改并 ...
- sparkR读取csv文件
sparkR读取csv文件 The general method for creating SparkDataFrames from data sources is read.df. This met ...
- PHP：函数赋参数默认初值
函数的默认参数 允许定义函数时,指定参数的默认值,如: function js_location($url, $alert='', $top=''){ if($alert=='' && ...