CSS 介绍
CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式(美化网页)。
CSS 早已被所有主流浏览器采用,它允许你轻松控制以下样式:
颜色 color
背景 background
字体 font
位置 position
显示 display
边框 border
内边距 padding
外边距 margin
行高 line-height
装饰 text-decoration
过渡 transtion
变化 transform
动画 animation
页面样式的属性有几百个,但常用的不过几十个。
CSS 的引入方式
使用 CSS 样式有四种方式:
- 内联样式:就是在任意一个html标签中使用style属性使用样式的方法。
<p style="font-size: 32px;color: green">朝辞白帝彩云间</p>
- 内部样式:使用<style></style>标记,将css嵌入html中。
<style type="text/css">
h2 {
color: red;
font-size: 60px;
border: 1px solid green;
}
</style>
- 外部样式:你可以创建一个后缀名为
.css
文件,然后在文件中编写样式规则,最后在文档中使用link引用该文件。
W3C推荐 link 标签在引入 CSS文件时需要指定 rel="stylesheet"属性,告诉浏览器引入的文件是层叠式样式表
<!--rel指定文档的关系 type类型 href路径 -->
<link rel="stylesheet" type="text/css" href="test.css">
<!-- 在HTML5中 link标签引入css时推荐不声明type属性 -->
<link rel="stylesheet" href="test.css">
尽管前两个方式也有人使用,但大部分开发人员更喜欢外部样式表,因为它可以将样式与元素分开,这提高了代码的可读性和重用性。
- 输入样式表(不常用):将一个css文件,通过
@import
关键字导入到另外一个css中。
<!-- 内部样式引入其他css文件 -->
<style>
@import url(demo.css)
</style>
/* 外部样式中引入其他css文件 */
@import url(demo.css);
CSS的注释
语法: /* 注释内容 */
/* 这里是一段css注释 */
注意: 我们约定注释符号与注释内容之间使用一个空格隔开。
CSS 语法
CSS 背后的思想是,通过选择器来定位 DOM(文档对象模型)的元素,然后将各种样式规则应用在元素上,从而改变元素在页面上的显示方式。
在HTML中除了内联样式直接通过style属性设置指定元素CSS样式以外,其他的所有样式表都使用 选择器、样式属性、样式属性值指定页面元素样式:
/* some selector */ {
样式属性1: 样式属性值1;
样式属性2: 样式属性值2;
样式属性3: 样式属性值3;
}
注意,在使用CSS是我们对语法格式进行了一定的约束:
- 在每个元素的样式声明区域里,左右花括号
{
和}
一定要写全。你需要确保所有样式规则位于花括号之间。- 在规则声明的左大括号 { 前加上一个空格。
- 规则声明的右大括号 } 独占一行。
- 每条样式规则都以分号结束,并且独占一行。
- 每条样式规则属性的冒号
:
后面加上一个空格,前面不加空格。- 使用 2 个空格作为缩进。
- 每个声明规则都使用空行隔开。
- 选择器
在规则声明中,“选择器” 负责选取 DOM 树中的元素,这些元素将被定义的属性所修饰。选择器可以匹配 HTML 元素,也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子:
h2 {
color: red;
font-size: 18px;
}
.tabbar-item {
color: blue;
font-size: 22px;
}
- 属性
属性决定了规则声明里被选择的元素将得到何种样式。属性以键值对形式存在,一个规则声明可以包含一或多个属性定义。以下是属性定义的例子:
/* some selector */ {
background: #f1f1f1;
color: #333;
}
CSS选择器讲解
通配符选择器
概念: 在 CSS 选择器中*
被称作通配符具有特殊的含义他可以匹配页面上所有html标签元素。
尽量少用通配符选择器,通配符选择器会使浏览器会去查询所有的元素从而影响影响浏览器性能。
* {
font-size: 16px;
}
html选择器
概念:在 CSS 选择器中我们可以直接使用任何html标签名作为选择器,表示查询页面中所有指定标签名的元素。
h1{
font-size: 30px;
color: chartreuse ;
background-color: #2DB2FF;
}
p{
border: 1px solid blue;
color: gray;
}
类选择器
概念:在 CSS 选择器中类选择器以一个.
开头后面接一个类名,表示查询页面中所有class为指定类名的元素。
.one{
color: red;
}
.two{
color: darkmagenta;
}
<p class="one two">hello</p>
<a href="http://www.baidu.com" class="one">百度</a>
<div class="two">div</div>
ID选择器
概念:在 CSS 选择器中类选择器以一个#
开头后面接一个id名,表示查询页面中id为指定id名的元素。
在整个HTML页面中任何一个元素的id值必须唯一
在规范的web前端开发中,我们一般不会使用id选择器因为会影响页面的性能
#p{
background-color: #4183C4;
}
派生选择器
概念:在CSS中我们可以使用“html选择器,类选择器,id选择器(不推荐)” 通过依据元素在其位置的上下文关系来查询页面中的指定元素,使用派生选择器可以使标签更加简洁。
在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。
/* 查询页面中所有class名为two的div元素 */
div.two{
color: green;
}
/* 后代选择器 */
/* 查询页面中所有被div包含的p元素 */
div p{
color: #222222;
}
/* 查询页面中所有被class名为two的div元素包含的p元素 */
div.two p{
color: #222222;
}
/* 子元素选择器 */
/* 查询页面中所h1的strong直接子元素 */
h1 > strong {
color:red;
}
/*
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> 会被上面的选择器选中
<h1>This is <em>really <strong>very</strong></em> important.</h1> strong不会被选中
*/
/* 相邻兄弟选择器 */
/* 查询紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素 */
h1 + p {
margin-top:50px;
}
CSS3新增派生选择器:
/* 查询所有相同的父元素中位于 p 元素之后的所有 ul 元素 */
p ~ ul {
background:#ff0000;
}
组合选择器
概念:在CSS中我们经常会遇到不同选择器使用相同样式的情况,如果给每个不同选择器单独的设置样式会使得CSS过于繁琐。为了解决此问题CSS允许使用,
将不同选择器隔开设置同一个样式,这种模式被称为组合选择器。
在使用组合选择器时,多个选择器每个选择器独占一行。
h1,
#main,
h2,
div p{
color: purple;
}
属性选择器
概念: 在CSS中允许使用[attribute]
形式的属性选择器用于选取带有指定属性的元素。
/* 查询带有 readonly 属性的 <input> 元素设置样式 */
input[readonly] {
background-color:yellow;
}
/* 查询 type=text 的 <input> 元素设置样式 */
input[type=text] {
background-color:yellow;
}
/*
查询 titile 属性包含单词 "flower" 的元素,并设置其样式
该值必须必须是一个完整单词,比如 title="flower",或者前后面使用空格隔开,比如 title="flower world"。
*/
[title~=flower] {
background-color:yellow;
}
/*
查询 lang 属性值以 "en" 开头的元素,并设置其样式
该值必须必须是一个完整单词,比如 lang="en",或者后面跟着连字符不可以使用空格,比如 lang="en-us"。
*/
[lang|=en] {
background-color:yellow;
}
CSS3新增属性选择器:
/*
查询 class 属性值以 "test" 文本开头的所有 div 元素
与 | 不同 ^ 表示以字符串开头任何文本,而 | 必须是完整单词
例子 test123与 ^ 匹配与 | 不匹配
*/
div[class^="test"] {
background:#ffff00;
}
/*
查询 class 属性值以 "test" 文本结尾的所有 div 元素
*/
div[class$="test"] {
background:#ffff00;
}
/* 查询 class 属性值包含 "test" 文本的所有 div 元素 */
div[class*="test"] {
background:#ffff00;
}
伪选择器
概念:在 CSS 中允许使用伪类来添加一些选择器的特殊效果。
语法:selector:伪类 {属性: 属性值;}
- 锚伪类
介绍:CSS 中超链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link {color: #FF0000;} /* 未访问的链接 */
a:visited {color: #00FF00;} /* 已访问的链接 */
a:hover {color: #FF00FF;} /* 鼠标移动到链接上 */
a:active {color: #0000FF;} /* 选定的链接 */
在 CSS 定义中,:hover 必须被置于 link 和 visited 之后,active 必须被置于 hover 之后,才是有效的。 (爱恨原则lvha)
伪类名称对大小写不敏感。
:hover伪类可以应用在除超链接以外的其他元素上。
- 表单伪类
介绍:CSS 中可以向拥有键盘输入焦点的元素添加样式。
input:focus { /* input表单获得光标时 */
color:yellow;
}
- :first-child 伪类
介绍:伪类向元素的第一个子元素添加样式。
p:first-child { /* 将会匹配页面中第一个p元素 */
font-weight:bold;
}
CSS3新增伪类:
- :first-of-type
介绍:选择器匹配属于其父元素的特定类型的首个子元素。
p:first-of-type {
color: red;
}
- :last-of-type
介绍:选择器匹配属于其父元素的特定类型的最后一个子元素。
p:last-of-type {
color: red;
}
- :only-of-type
介绍:选择器匹配属于其父元素的特定类型唯一的子元素。
/* 若p元素是父元素中唯一的p子元素,选择该p元素 */
p:only-of-type {
color: red;
}
- :only-child
介绍:选择器匹配属于其父元素的唯一子元素。
/* 若p元素是父元素中唯一子元素,选择该p元素 */
p:only-child {
color: red;
}
- :nth-child(n)
介绍:选择器匹配属于其父元素的第 N 个子元素,n可以是数字、关键字、公式。
- 数字:表示子元素的下标
- 关键字:odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
- 使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
/* 选择第二个子元素并且类型为p的元素 */
p:nth-child(2) {
color: red;
}
/* 选择下标为偶数的p子元素 */
p:nth-child(even) {
color: red;
}
/* 选择下标为偶数的p子元素 */
p:nth-child(2n) {
color: red;
}
- :nth-last-child(n)
介绍:选择器匹配属于其元素的第 N 个子元素,从最后一个子元素开始计数。n 可以是数字、关键词或公式。
/* 选择最后一个元素并且元素类型为p的元素 */
p:nth-last-child(1) {
color: red;
}
- :nth-of-type(n)
介绍:选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。n 可以是数字、关键词或公式。
/* 选择第一个p子元素 */
p:nth-last-child(1) {
color: red;
}
/* 排除所有其他子元素后剩下p子元中是奇数位的p元素 */
p:nth-last-child(odd) {
color: red;
}
- :nth-last-of-type(n)
介绍:选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数。n 可以是数字、关键词或公式。
/* 选择最后一个p子元素 */
p:nth-last-child(1) {
color: red;
}
/* 排除所有其他子元素后剩下p子元中倒数是奇数位的p元素 */
p:nth-last-child(odd) {
color: red;
}
- :last-child
介绍:选择器匹配属于其父元素的最后一个子元素
/* 选择最后一个元素并且为p元素的子元素 */
p:last-child {
color: red;
}
- :root
介绍:选择文档的根元素。在 HTML 中,根元素始终是 html 元素。
:root {
background:#ff0000;
}
- :empty
介绍:选择器匹配没有子元素(包括文本节点)的每个元素。
p:empty {
background:#ff0000;
}
- :enabled
介绍:选择器匹配每个已启用的元素(大多用在表单元素上)。
/* 为所有 type="text" 的已启用的 input 元素设置背景色 */
input[type="text"]:enabled {
background-color: #ff0000;
}
- :disabled
介绍:选择器匹配每个被禁用的元素(大多用在表单元素上)。
/* 为所有 type="text" 的被禁用的 input 元素设置背景色 */
input[type="text"]:disabled {
background-color: #dddddd;
}
- :checked
介绍:选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。
input:checked {
background-color: #ff0000;
}
- :not(selector)
介绍:选择器匹配非指定元素/选择器的每个元素。
:not(p) {
background-color: #ff0000;
}
- :target
介绍:URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前激活的目标元素。
/* 当激活 #news1 锚点时,选择对应id的锚元素。*/
#news1:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
伪元素选择器
概念:在 CSS 中允许使用伪元素来添加一些选择器的特殊效果。
语法:selector:伪元素 {属性: 属性值;}
- :first-letter 伪元素
介绍:CSS 中允许使用:first-letter 伪元素向文本的第一个字母添加特殊样式。
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
"first-letter" 伪元素只能用于块级元素。
这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。
- :first-line 伪元素
介绍:CSS 中允许使用:first-letter 伪元素向文本的首行设置特殊样式。
p:first-line {
color:#ff0000;
}
"first-line" 伪元素只能用于块级元素。
- :before 伪元素
介绍:CSS 中允许使用 :before 伪元素向元素的内容最前面插入新内容。
h1:before{
/* 在每个 <h1> 元素前面插入一幅图片, content 属性生成内容*/
content:url(logo.gif);
}
p:before{
/* 在每个 <p> 元素前面插入一个 ¥ 符号 */
content: '¥';
}
- :after 伪元素
介绍: CSS 中允许使用 :after 伪元素可以在元素的内容之后插入新内容。
/* 下面的例子在每个 <h1> 元素后面插入一幅图片: */
h1:after {
content:url(logo.gif);
}
CSS3新增伪元素:
::selection
介绍: 选择器匹配被用户选取的选取是部分。只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
注意:伪类与伪元素的区别简单的说就是,伪类是描述一个真实HTML元素的补充(例:特殊状态、第几个)。而伪元素他不是一个元素即不是一个HTML标签。
样式的优先级
介绍: 在开发时 HTML 元素的样式经常会跟其他样式发生冲突。如下面的代码你的h1元素也不能同时设置blue和red两种样式。这时浏览器该如何选择呢?
* {
color: red;
}
h1 {
color: blue;
}
我们运行代码后,发现h1的最终样式是蓝色。原因是h1选择器的样式覆盖掉了通配符选择器上针对h1元素冲突的样式。为什么h1选择器会覆盖掉*选择器呢,原因是CSS给不同的选择器都设定了不同的优先级。优先级高的选择器将会覆盖掉优先级低的选择器中冲突的样式。
概念: 在CSS中优先级的顺序是 内联样式(元素自身style设置属性) > !important关键字 > id 选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承的样式
补充: 在一个指定样式后添加!important关键字那么指定样式规则的应用优先权将会提升到上面所示的等级
p {
color: red!important;
}
p.demo {
color: purple;
}
单位基础
尺寸
%:百分比是元素相对于父元素在对应尺寸上的百分比值
px:px (pixel,像素)是一个相对单位,相对的是设备像素(device pixel)。通过设备像素比可以获取1px在设备上真实的使用的设备像素。
下图就是一个设备像素比图片:
ppi在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(Apple给了它一个高大上的名字——Retina)。
获得设备像素比后,便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时,使用1个设备像素显示1个CSS像素。当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用9(3*3)个设备像素显示1个CSS像素。em: em是最常见的相对长度单位,基准值是当前元素的字号大小。 在CSS中,1em表示当前元素的字号大小,实际值取决于在哪个元素上应用。
rem (CSS3 新增):根节点(html)的font-size决定了rem的尺寸,也就是说它是一个相对单位,相对于(html)。
/* 设置的font-size来改变rem尺寸 */
:root{
font-size:20px;
}
.box{
width:1rem;
height:1rem;
background-color:purple;
}
应用场景:用来做web app的屏幕适配,因为不同手机型号的屏幕大小都不同,所以这时候我们就不能用px来做单位,rem是适配不同手机屏幕的一种方案。已经被vw、vh替代
- vw、vh:1vw等于视口宽度的1%,1vh等于视口高度的1%。
视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。。
颜色
(颜色名) 颜色名称 (比如: red、blue、pink)
rgb(red, green, blue) rgb颜色函数,此函数接受以下所述的三个参数:
- red:此参数用于定义红色的强度。它是介于0到255之间的整数值,或者是介于0%到100%之间的百分比值。
- green:此参数用于定义绿色的强度。它是介于0到255之间的整数值,或者是介于0%到100%之间的百分比值。
- blue:此参数用于定义蓝色的强度。它是介于0到255之间的整数值,或者是介于0%到100%之间的百分比值。
rgba(red, green, blue,alpha) rgba颜色函数是 rgb 颜色值的扩展,此函数接受以下所述的四个参数:
RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。
- red:此参数用于定义红色的强度。它是介于0到255之间的整数值。
- green:此参数用于定义绿色的强度。它是介于0到255之间的整数值。
- blue:此参数用于定义蓝色的强度。它是介于0到255之间的整数值。
- alpha:此参数用于定义颜色的不透明度。它介于0到1之间(0为完全透明1为完全不透明)。
十六进制值颜色 十六进制值其实就是将rgb函数中,red、green、blue 0到255的取值转化为00到FF。例 #ff00ee。
.box {
color: #00aaee;
}
注意:若十六进颜色r、g、b的值全都两位相等则可以进行缩写:例 #ff00aa 可缩写为 #f0a;#ffffff 可缩写为 #fff。
hsl(h, s, l) hsl色彩,是一种工业界的色彩标准,因为它能涵盖到人类视觉所能感知的所有颜色,所以在工业界广泛应用。此函数接受以下所述的三个参数:
-h(Hue):代表色调,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色。360度也是红色。
-s(Saturation):代表饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高
-l(Lightness):代表亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮。
.box {
color: hsl(120,50%,50%);
}
hsla(h,s, l, a) hsla色彩是hsl色彩值的扩展,此函数接受以下所述的四个参数:
-h(Hue):代表色调,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色。360度也是红色。
-s(Saturation):代表饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高
-l(Lightness):代表亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮。
-a alpha:此参数用于定义颜色的不透明度。它介于0到1之间(0为完全透明1为完全不透明)。
.box {
color: hsla(120,50%,50%, .5);
}