一、资料
二、简介
1、CSS 指层叠样式表 (Cascading Style Sheets)
2、CSS 为了解决内容与表现分离的问题
3、CSS形式
3.1、外部样式表<link>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
3.2、内部样式表<style>
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3.3、内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
4、CSS规则，当同一个 HTML 元素被不止一个样式定义时，优先级从低到高：
4.1、浏览器缺省设置
4.2、外部样式表
4.3、内部样式表（位于 <head> 标签内部）
4.4、内联样式（在 HTML 元素内部）
三、选择器
selector {declaration1; declaration2; ... declarationN }
selector {property: value}
selector {property: value}
选择方式：
1、元素选择器
p {
text-align: center;
color: black;
font-family: arial;
}
2、元素分组选择器，用逗号将需要分组的选择器分开，被分组的选择器就可以分享相同的声明
h1,h2,h3,h4,h5,h6 {
color: green;
}
3、派生选择器（上下文选择器），通过依据元素在其位置的上下文关系来定义样式
li strong {
font-style: italic;
font-weight: normal;
}
4、id选择器，为标有特定 id 的 HTML 元素指定特定的样式
#red {color:red;}
#green {color:green;}
5、class选择器
.center {text-align: center}
6、属性选择器，对带有指定属性的 HTML 元素设置样式，属性选择器在为不带有 class 或 id 的表单设置样式时特别有用
[title]{color:red;}
[title=W3School]{border:5px solid blue;}
[title~=hello] { color:red; }
[lang|=en] { color:red; }
四、属性
1、background
// 背景色，不能继承，其默认值是 transparent
background-color：name、RGB、#
// 背景图像
background-image：url('image path')
// 背景重复
background-repeat：no-repeat、repeat-x、repeat-y
// 背景定位
background-position：top、bottom、left、right 、center
// 背景关联
background-attachment：
2、text
// 文字颜色
color：name、RGB、#
// 文本对齐
text-align：center、left、right、justify
// 文本修饰
text-decoration：none、underline、line-through、overline、blink
// 文本转换（单词大小写）
text-transform：captalize、lowercase、uppercase、none
// 文本缩进
text-indent：px、em、%
// 单词间隔
word-spacing：px、em、%
// 字母间隔
letter-spacing：px、em、%
// 行间距
line-height：px、em、%
3、font
// 字体系列
font-family：Serif、Sans-serif、Monospace、Cursive、Fantasy
// 字体样式
font-style：normal、italic、oblique
// 字体大小，如果没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
font-size：px、em、%
// 字体粗细，关键字 100 ~ 900 为字体指定了 9 级加粗度。数字 400 等价于 normal，而 700 等价于 bold。
font-weight：lighter、normal、bold
4、link
// 伪类语法
selector : pseudo-class {property: value}
// a:hover 必须跟在 a:link 和 a:visited后面
// a:active 必须跟在 a:hover后面
// 未被点击
a:link：
// 已点击
a:visited：
// 鼠标悬停
a:hover：
// 被点击
a:active：
5、list
// 设置列表项标志的类型
list-style-type：none、circle、square、upper-roman、lower-alpha
// 将图象设置为列表项标志
list-style-image：url(' ');
// 设置列表中列表项标志的位置
list-style-position：列表项位置
6、table
// 设置是否把表格边框合并为单一的边框
border-collapse
// 设置分隔单元格边框的距离
border-spacing
五、盒模型
CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
Box Model
1、content
1、指定元素的width和height属性时，设置的是内容的宽度和高度
总元素的宽度= width + left padding + right padding + left border + right border + left margin + right margin
总元素的高度= height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
2、背景应用于由内容和内边距、边框组成的区域
2、padding
1、padding 定义元素边框与元素内容之间的空间，即上下左右的内边距
2、padding 会受到元素背景颜色的填充
padding-top、right、bottom、left : px、em、%
3、border
border 属性指定元素边框的样式、宽度和颜色。
// 边框样式
border-style：none、dotted、dashed、solid、double、groove、ridge、inset、outset
// 边框宽度
border-width：px、em、keyword(thick 、medium、 thin)
// 边框颜色
border-color：name、RGB、#
4、margin
1、margin定义元素周围的空间
2、margin 没有背景颜色，是完全透明的
3、外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
margin-top、right、bottom、left : px、em、%
六、布局
1、display
display : none、block、inline
// 不可见但占原空间，影响布局
visibility : hidden
2、z-index
1、如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面
2、z-index属性指定了一个元素的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面
3、flow
float : left、right
clear
4、position
// 默认值，即没有定位，遵循正常的文档流对象
// 静态定位的元素不会受到 top、bottom、left、right 影响
static
// 相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变
relative
// absolute 定位使元素的位置与文档流无关，因此不占据空间，会和其他元素重叠
// 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
absolute
// Fixed定位使元素的位置与文档流无关，因此不占据空间，会和其他元素重叠
// Fixed定位的元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动
fixed
//
sticky
5、overflow
1、overflow 属性用于控制内容溢出元素框时显示的方式
2、overflow 属性只工作于指定高度的块元素上。
// 默认值。内容不会被修剪，会呈现在元素框之外
visible
// 内容会被修剪，其余内容不可见
hidden
// 内容会被修剪，但浏览器会显示滚动条以便查看其余的内容
scroll
// 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
auto
// 从父元素继承 overflow 属性的值
inherit
网友评论