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 ...
随机推荐
- nexus 中央仓库
nexus 中央仓库 下载地址:http://www.sonatype.org/nexus/archived 下载最新版本 mkdir -p /opt/local/nexus tar zxvf nex ...
- 程序ajax请求公共组件：app-jquery-http.js
// --------网络操作-------------------- $.HTTP = { getUrlParam : function(name) { var reg = new RegExp(& ...
- (简单) POJ 1502 MPI Maelstrom，Dijkstra。
Description BIT has recently taken delivery of their new supercomputer, a 32 processor Apollo Odysse ...
- java类集: collection, list , set, map
都在java.util包里.容器:装各种对象. Collections类 : 集合工具类, 提供了一些静态方法, 方法里的参数是List等. Colection接口,子接口主要有: Set: 内容 ...
- Spring自学教程-ssh整合(六)
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...
- function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法。。。。
function $(id){ return document.getElementById(id); } document.getElementById(id) 是获得id这个元素的. 相当于定义了 ...
- sharedPreferences存储数据
sharedPreferences使用的是键值对的方式存储数据. 1.Android中三种获取sharedPreferences的方式 1)Context 类中的getSharedPreference ...
- 【转】每一个程序员需要了解的10个Linux命令
作为一个程序员,在软件开发职业生涯中或多或少会用到Linux系统,并且可能会使用Linux命令来检索需要的信息.本文将为各位开发者分享10个有用的Linux命令,希望对你会有所帮助. 以下就是今天我们 ...
- IOS手势识别，捏合，旋转，轻扫等
ref:http://blog.csdn.net/rechard_chen/article/details/51769972 //点按手势的创建,这里需要实现响应事件的方法 UITapGestur ...
- linux下启动tomcat----Cannot find ./catalina.sh
参考:http://dearseven.blog.163.com/blog/static/1005379222013764440253/ linux 下启动tomcat [root@test233 b ...