CSS(Cascading Style Sheets)层级样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS是模型与视图分离这个概念的典范之作。学习CSS需要有HTML基础。
CSS的引入方式
CSS是为HTML提供显示效果的，在网页制作是采用CSS技术，可以对网页的布局、颜色、背景、宽度、高度、字体等进行控制，使得网页设计布局更加美观漂亮。但我们必须在HTML里引入CSS，它才会起作用，如何引入CSS呢？它的引入方式有三种，且三种方式优先级依次降低，相同情况下，优先级高的可以覆盖优先级低的：
- 内联属性(Inline style attribute) —— 对HTML标签直接修改他的style属性
<h1 style="font-size: 12px;">我的字号被修改了</h1>
- 写在style标签里 —— style标签一般要求写在head标签里
<head>
<style>
h1 {
font-size: 12px;
}
</style>
</head>
- 用link标签引用外部文件 —— 写在head标签里，最常用的引入方式
<link rel="stylesheet" href="styles.css" />
常用CSS样式
| 样式 | 功能 | 例子 |
|---|---|---|
| font-size | 字体大小 | font-size:14px |
| font-family | 字体系列 | font-family:Times |
| color | 文本颜色 | color:red |
| text-align | 对齐元素中的文本 | text-align:center/left/right |
| border | 边框 | border:thin solid black |
| font-weight | 加粗 | font-weight:bold |
| text-decoration | 文字装饰 | text-decoration:underline/none/overline |
| background | 背景属性 | background:#FFF/url(bg.png) |
更多CSS样式见这里
CSS语法规则
CSS语法规则 = CSS选择器(selector) + 一条或多条声明(declaration)
一个声明 = 一个属性名 + 一个值
主要选择器：元素选择器、类选择器、ID选择器
CSS选择器
选择器主要用来确定HTML树形结构中的DOM元素节点。
一、元素选择器(Element Selector)
以HTML标签作为目标的选择器，目的是改变某类标签的默认样式。
h1 {
font-size: 12px;
}
二、类选择器(Class Selector)
是一种独立于HTML元素来指定样式的选择器。
.warning{
color: red;
}
<h1 class="warning">我是警告标题</h1>
三、ID选择器(ID Selector)
为标有特定id的HTML元素指定特定的样式，以#开头
#warning-title {
font-weight: bold;
}
<h1 id="warning-title">这是一个警告标题</h1>
注意：介绍几种其他选择器
- 属性选择器：可以根据元素的属性及属性值来选择元素。
例如：可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
- 后代选择器：可以选择作为某元素后代的元素，当两个选择器用空格分开时，表示第一个选择器命中的元素下被第二个选择器命中的任何一级子元素。
例如：可以只对 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>
- 子元素选择器：只能选择作为某元素子元素的元素。
例如：选择只作为 h1 元素子元素的 strong 元素应用样式：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
- 相邻兄弟选择器：选择紧接在另一个元素后的元素，而且二者有相同的父元素。
例如：要增加紧接在 h1 元素后出现的段落(h1 和 p 元素拥有共同的父元素)的上边距应用样式：
h1 + p {margin-top:50px;}
- 组合选择器：复用CSS代码。将两个选择器以“ , ”分割，表示两个完全不相关的选择器命中的元素，都适用于后面的CSS属性。
样式继承与覆盖
样式继承不是一个默认行为,实际上是看某一个属性的默认值是否是inherit,也就是浏览器默认样式.比如a标签的color浏览器默认样式不是inherit
- CSS使用中，一些属性比如color是可以被继承的，即父元素设置了某属性，自元素也有该属性。例如：
文本相关：
font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, text-align, text-indent, texttransform, word-spacing
列表相关：
list-style-image, list-style-position,
list-style-type, list-style
- CSS的样式覆盖,在选择器不同的情况下,我们给每种选择器制定一个权值,计算命中一个元素的所有选择器的总权值,值高者优先级高:
- 元素选择器： 1
- 类选择起器： 10
- ID选择器： 100
- 内联选择器： 1000
- 无论在任何一种情况下，只要你在样式上加了important，那么他最大，前面所有的规则都忽略 加了important的代码样子
p {
color: white !important;
}
布局定位
盒子模型
HTML的元素现实模型被称为盒子模型,任何一个在页面上显示的元素哦都会呈现一个盒子形状,一个盒子的总宽 = width + padding-left + padding-right + border-left + border-right
布局定位的重要CSS属性
float, clear, position, display
width, height, padding, margin, border
- float：控制靠左还是靠右,有三个值:
float: left / right / none
- clear：规定元素的哪一侧不允许其他浮动元素。但是这个功能与display属性协同会产生不同的效果。 所以初学者来讲，只要记住这一种用法就好了。
- position：显示相对于原有位置的偏移量，经常跟right，left，top，bottom相联合使用。
position: static / relative / absolute / fixed
- absolute：会脱离他的父级元素，他的定位会相对于整个窗口。而且他原本在文档流里就不占位置了。 设置right,left,top,bottom这四个属性的时候，是相对于整个页面来换算的。
- relative：还在父级元素里，设置right, left, top, bottom的时候，他就相对于自己来计算。最重要的是，他原本占有的位置仍保留。
- fixed：right, left, top, bottom四个属性则是相对于窗口来换算了，与相对于整个页面来换算最大的区别就在于，当页面宽高超过窗口的时候。 fixed的元素会悬浮在那里，我们在页面上看到的跟着滚动条走得悬浮块都是这么做的。
- display：改变生成的盒子的类型。
none, block, inline, inline-block, list-item, table, run-in 等
- block：块级元素，如div、h1 、p 元素，意味着这些元素显示为一块内容。 块级元素的特点是：(1)宽度充满父级容器、(2)与前后元素都会空一行、(3)盒子模型涉及的所有属性都可以被修改
- inline：行内元素，如a、span、strong 元素，它们的内容显示在行中。 行内元素的特点是：(1)通常在块级元素里，且只会占据自己内容部分的空间、(2)不能在前后元素之间生成空行
- inline-block：兼顾了两者，既象行内元素一样流动布局，又像block元素一样有自己的padding margin等
- none：让生成的元素根本不显示，不占用文档中的空间。
流式布局
通过使用百分比设置各个部分的宽度来适应不同的分辨率。
伪类和伪元素
用于向某些选择器添加特殊效果
语法
- 伪类
selector : pseudo-class {property: value}
selector.class : pseudo-class {property: value} (CSS类与伪类搭配使用)
- 伪元素
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;} (CSS类与伪元素搭配使用)
例如：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
伪类属性
| 属性 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式 |
| :focus | 向拥有键盘输入焦点的元素添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :first-child | 向元素的第一个子元素添加样式 |
| :lang | 向带有指定 lang 属性的元素添加样式 |
伪元素属性
| 属性 | 描述 |
|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式 |
| :first-line | 向文本的首行添加特殊样式 |
| :before | 在元素之前添加内容 |
| :after | 在元素之后添加内容 |
