W3Cschool学习笔记——CSS教程
CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
下面的例子为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
字母间隔
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值：
- none
- uppercase
- lowercase
- capitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
W3Cschool学习笔记——CSS教程的更多相关文章
- W3Cschool学习笔记——CSS3教程
向 div 元素添加圆角: div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ ...
- 学习笔记|JSP教程|菜鸟教程
学习笔记|JSP教程|菜鸟教程 ------------------------------------------------------------------------------------ ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css（基本样式2）--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css（常用组件16）--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记--css（常用组件15）--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
随机推荐
- iOS播放gif图方式
转发:http://www.cnblogs.com/jerehedu/ 图片分为静态和动态两种,图片的格式有很多种,在开发中比较常见的是.png和.jpg的静态图片,但有的时候在App中需要播放动态图 ...
- iOS两个关于对象的关键字
标签: swift新特性(__nullable和__nonnull) 最近在看老师写代码的时候经常遇到两个陌生的关键字,但是当我在我的电脑上敲得时候就是敲不出,后来才知道这是为了swift与OC混编的 ...
- 《数据结构与算法分析：C语言描述》读书笔记------List的C语言实现
List的简单实现.在GCC下测试通过. list.h #ifndef _List_H /*List数据结构的简单实现*/ struct Node; typedef struct Node Node; ...
- 1602A液晶
液晶显示屏中,1602型算是比较简单的一种,据说和12864还是全兼容的.这两天学习的结果如下.一.1602里的存储器有三种:CGROM.CGRAM.DDRAM.CGROM保存了厂家生产时固化在LCM ...
- Java学习(一)
各种原因就开始java开发快一个月了.一直也没有正式记录一下...现在开始..O(∩_∩)O~.... 先小结一下学习以来遇到的几个问题: 1.myeclipse的常用快捷键: F2当鼠标放在一个标记 ...
- 那些年我们一起改过的bug
ORA-01861: 文字与格式字符串不匹配 ORA-00936: 缺失表达式 ORA-01810 格式代码出现两次 ORA-01722: 无效数字 无效的列索引
- javascript中的元素包含判断
在实际开发中,很多时候需要知道某个节点是不是另一个节点的后代.很多浏览器提供了contains方法,如: console.log(document.documentElement.contains(d ...
- spring security 跨域防伪攻击
applicationContext-security.xml中配置 <http use-expressions="true" disable-url-rewriting=& ...
- python 自动化运维项目_目录
微信小程序监控界面 CMDB 跳板机 代码上线系统 网站用户访问质量监测 分布式监控 Docker自动化管理平台 Openstack二次开发
- Android中关闭应用的三种方式
当应用不再使用的时候,通常需要关闭应用,我们可以使用三种方式关闭android应用: 第一种方式:首先获取当前进程的id,然后杀死该进程(推荐) android.os.Process.killProc ...