CSS简介
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS 文件中
- 多个样式定义可层叠为一个
CSS引入
- 外部样式表
<head>
<link rel="stylesheet" href="base.css">
</head>
- 内部样式表：适用于内容比较少的情况
<head>
<style>
body {background-color: red;}
p {margin-left: 20px;}
</style>
</head>
- 内嵌样式：将html和css杂糅在一起，不推荐使用
<p style="color:red;">123</p>
CSS语法规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条属性声明。
/*选择器*/ css中注释用/* */
selector {
property1:value; //属性声明 = 属性名:属性值
property2:value;
....
}
如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
不同浏览器拥有不同私有属性，为了兼容各种浏览器，写法应该参照下面的代码：
.pic {
-webkit-transform:rotate(-3deg); /*chrome,safari*/
-moz-transform:rotate(-3deg); /*firefox*/
-ms-transform:rotate(-3deg); /*IE*/
-o-transform:rotate(-3deg); /*opera*/
transform:rotate(-3deg);
}
属性值语法
margin : [<length>|<percentage>|<auto>]{1,4}
基本元素 组合符号 数量符号
- 基本元素
- 关键字：- auto,solid,bold.....
- 类型
- 基本类型：<length>,<percentage>,<color>....
- 其他类型：<'padding-width'>,<color-stop>....
- 符号：/,
- inherit, initial
- 组合符号
- 空格
<font-size> <font-family>
合法值： 12px arial
不合法值： 12px 或 arial 12px
- &&
<length>&&<color>
green 2px 合法
1em blue 合法
blue 不合法
- ||
underline||overline||line-through||blink
至少需要出现一个，与顺序无关
underline 合法
overline underline 合法
- |
<color>|transparent 只能出现一个
orange 合法
transparent 合法
orange transparent 不合法
- []，主要起分组作用
bold[thin || <length>]
bold thin 合法
bold 2em 合法
- 数量符号
- 无：表示只能出现一次
<length>
1px 合法
1px 2em 不合法
- +：表示可以出现一次或多次
<color-stop>[,<color-stop>]+
#fff,red 合法
blue,green 40%,gray 合法
blue 如果只有<color-stop>部分，不合法
- ？：可出现也可以不出现
- {}：表示可出现次数的范围
<length>{1,2}表示能出现1-2次 - *：表示可出现0次，或多次
<time>[,<time>]*
合法：1s 或 1s 2s
- #：表示需要出现一次或多次
<time>#
合法：2s,3s
不合法：1s 2s
属性值例子：
绿色的为合法的，红色的为不合法的
@规则语法
- @标识符 xxx;
- @标识符 xxx{}
常用规则 - @media
- @keyframes
- @font-face
不常用 - @import
- @charset
- @namespace
- @page
- @supports
- @document
CSS选择器
选择器简单可分为以下三类：
- 简单选择器
- 伪元素选择器
- 组合选择器
- 简单选择器
- 标签选择器：文档的元素就是最基本的选择器。选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
html {color:black;}
p {color:gray;}
h2 {color:silver;}
- 类选择器
.className:
- className可以是字母，数字，-，_
- className必须以字母开头
- 区分大小写
- 可以出现多次
将段落1设置成蓝色，段落2、3设置成红色，段落3设置成粗体
<div>
<p>num 1</p>
<p class="special">num 2</p>
<p class="special stress">num 3</p>
</div>
p{color:blue;}
.special{color:red;}
.stress{font-weight:bold;}
- id选择器：可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意：id 属性只能在每个 HTML 文档中出现一次
通配符选择器
*{color:blue} 选择页面中所有元素并设置成蓝色属性选择器：对带有指定属性的 HTML 元素设置样式。
下面的例子为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
<p lang="en-us">Hello!</p>
[lang|=en] { color:red; }
下面的例子为以指定值#开头的 href 属性的所有元素设置样式。
<a href="http:baidu.com">baidu</a>
[href^="#"]{color:red}
下面的例子为以指定值pdf结尾的 href 属性的所有元素设置样式。
<a href="http://xxx.pdf">xxx.pdf</a>
[href$="pdf"]{color:red}
下面的例子为以包含指定值baidu的href属性的所有元素设置样式。
<a href="http:baidu.com">xxx.pdf</a>
[href*="baidu"]{color:red}
- 伪类选择器
伪类的语法：selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用:selector.class : pseudo-class {property: value}
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
input:enabled{color:#ccc;} /*一个元素可用的状态
input:disabled{color:#ccc;} /*一个元素不可用的状态
input:checked{color:#ccc;} /*一个元素如radio被选中的状态
li:first-child{color:#ccc;} /*列表的第一项*/
li:last-child{color:#ccc;} /*列表的最后一项*/
li:nth-child(even){color:#ccc;} /*列表的偶数项*/
li:nth-child(3n+1){color:#ccc;}
li:nth-last-child(3){color:#ccc;} /*列表倒数项*/
ul:only-child{color:#ccc;} /*只有一个元素的列表*/
dd:first-of-type{color:#ccc;} /*第一个dd*/
dd:last-of-type{color:#ccc;}
dd:nth-of-type{color:#ccc;}
span:only-of-type{color:#ccc;}
/*选中父元素中只有一个span元素的元素中的span并指定样式*/
p:empty{color:#ccc;} 没有内容的元素
:root 根标签
:not() 不包含某元素的选择器
:target
:lang
- 组合简单选择器
img[src$=jpg]{}
#banner:hover{}
- 伪元素选择器
::first-letter{} 为第一个字母指定样式
::first-line{} 为第一行指定样式
::before{content:"before";} 在某个元素之前插入before
::after{content:"after";} 在某个元素之后插入after
::selection{} 用于被用户选中的内容
组合选择器
-
后代选择器
后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。
其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中:
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
- 子选择器
子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响( 因为第二个h1中的strong元素并不直接为h1的子元素，而是h1下em元素的子元素 )：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
- 相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
- 通用兄弟选择器
h2~p{} 选中h2后所有为p元素的兄弟节点
选择器分组：可以用逗号来为多个具有相同样式的不同元素来指定样式。
属性的继承：子元素会继承父元素中的属性
自动继承
- color
- font
- text-align
- list-style
- ...
非继承属性 - background
- border
- position
- ...
强制继承，将属性值设置成inherit
css优先级
优先级计算（其中数字为权重）
优先级计算例子
优先级高的样式会覆盖掉优先级低的样式
css层叠
相同的属性会覆盖：
- 优先级高的覆盖掉低的
- 优先级相同，后面覆盖掉前面的
css改变优先级
- 改变先后顺序
- 提升选择器的优先级
- ！important：前两种都不可行时使用
CSS文本
字体
-
font-size:设置文本的大小。
font-size:<length>|percentage
percentage参照父元素的font-size
font-size:12px
font-size:2em
-
font-family :定义文本的字体系列。
font-family:[<family-name>|<generic-family>]#
<generic-family>=serif | sans-serif
font-family:serif "宋体" 英文为serif，中文为宋体 -
font-weight:设置文本的粗细。
font-weight:normal|bold|bolder|lighter -
font-style:最常用于规定斜体文本。
font-style:normal | italic（斜体） | oblique（对于没有斜体的字体强制倾斜） -
line-height:指定行高
line-height:normal | <number> | <length> | <percentage> - 为某文本设置多种文本属性
font:[ [<font-style] || <font-weight> ] ?<font-size> [ /<line-height> ]? <font-family> ]
font:30px/2 "Consolas",monospace;
font:italic bold 20px/1.5 arial,serif;
font:20px arial,serif;
- color:设置文本颜色
color:red
color:#ff0000
color:rgb(255,0,0)
color:rgba(255,0,0,1) 设置颜色及透明度
color:transparent 全透明
对齐方式
-
text-align:设置一个元素中的文本行互相之间的对齐方式。
text-align:left | right | center | justify（两端对齐） -
vertical-align:设置垂直对齐方式
vertical-align:baseline | sub(下标) | super(上标，例如指数表达) | top | text-top | middle | bottom | text-bottm | <percentage>（参照行高）| <length> - text-indent:可以方便地实现文本缩进。
text-indent:<length> | <percentage>
如果text-indent设置一个负的极大值，则里面的文字将跑出容器，达到隐藏文字的目的
文本修饰
-
white-space:会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
white-space : normal | nowrap | pre | pre-wrap | pre-line
- word-wrap：设置长单词是否自动换行
word-wrap:normal | break-word - word-break
word-break:normal | keep-all | break-all - text-shadow:设置文本阴影。
text-shadow:none | [<length>{2,3} && <color>?]#
text-shadow:1px(x轴的偏移方向) 2px(y轴的偏移方向) 3px(阴影模糊半径)
如果文字阴影中的颜色没有设置，那么阴影颜色就是文字颜色
- text-decoration
text-decoration:none | [underline(下划线) || overline(上划线) || line-through(贯穿线)]
高级设置
- text-overflow
text-overflow: clip | ellipsis(文本溢出的时候利用...代替溢出文本)
//要配合下面两个属性使用
overflow:hidden
white-space:nowrap
- curosr
cursor:[<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]
css模型盒
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距（填充）、边框 和 外边距 的方式。
每个盒子都有：边距、边框、填充、内容四个属性
每个属性都有：上、下、左、右四个部分
boder, padding, margin都有top, right, bottom, left四部分
- width:指定内容区域的宽度
width:<length> | <percentage> - height:指定内容区域的宽度
height:<length> | <percentage> - padding:定义元素的内边距。
padding:[<length>|<percentage>]{1,4}
按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;} 按照顺时针顺序
h1 {padding: 20px} 当四个方向的内边距都为20px时
也可以单独设置：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
padding规则：对面相等，后者省略；4面相等，只设一个
- margin:设置外边距
margin:[<length>|<percentage>|atuo]{1,4}
magin合并:（1）毗邻的元素如果相邻的边都设置了margin，则取其中大的一个值；（2）父元素与第一个或最后一个子元素的margin会合并。
水平居中:margin:0 auto - border:[<border-width>||<border-style>||<border-color>]{1,4}
border-width:[<length>|thin|medium|thick]{1,4}
border-style:[solid|dashed|dotted|...]{1,4}
boder-color:[<color>|transparent]{1,4} - border-radius:圆角边框（方向为顺时针，从左上开始）
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
前面四个为x方向上半径，后面四个为y方向上半径
border-radius:50% 正圆
border-radius并不是只有在设置了border的情况下才会生效。
-
overflow :设置内容溢出部分
overflow:visible|hidden|scroll|auto
显示溢出部分 | 不显示 | 显示垂直和水平滑动条 | 在溢出情况下显示滑动条
- boxing-size: 用于content或者boder的尺寸
boxing-size:content-box | border-box -
box-shadow: none | <shadow>[,<shadow>]*<shadow>:inset?&&<length>{2,4}&&<color>?
- outline:[<border-width>||<border-style>||<border-color>]
outline-color: <color>|invert
不占空间（布局时当做没有outline），border外
如果已经有了border，可以不用设置outline
css背景
- background-color
- background-image:<bg_image>[,<bg-image>]*
background-image:url(),url(); 先写的在上层，background-color始终在底层
- background-repeat:设置背景平铺方式
background-repeat:<repeat-style>[,<repeat-style>]*
<repeat-style> = repeat-x(沿x轴平铺) | repeat-y | [repeat | space | round(缩放平铺) | no-repeat]{1,2} - background-attachment:<attachment>[,<attachment>]*
<attachment>= scroll（背景不动） | fixed | local（内容背景一起动）
设置背景是否随内容拖动而拖动 - background-position:设置背景图位置
background-position:0 0;
background-position:10px 20px; x,y分别偏移的距离
background-position:20% 50%; 容器x的20%位置和y轴的50%便宜到容器x的20%位置和y轴的50%
background-position:center center;
background-position:right;
background-position:right 10px top 20px
- linear-gradient():设置颜色线性渐变
- radial-gradient():设置圆形渐变
- repeat-*-gradient
- background-origin:决定背景图片（0,0）位置参考的位置
border-box | padding-box | content-box
