爱站程序员基地1.CSS外联样式
<link rel= \"stylesheet\" type= \"text/css\" href= \"path.css\">
2.background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。其他属性查手册 链接地址
background-attachment:fixed;
background-color 设置元素的背景颜色。
background-color: red;
background-image 把图像设置为背景。
background-image:uri(\'path\');
background-position 设置背景图像的起始位置。
background-position: right top;
background-repeat 设置背景图像是否及如何重复。
background-repeat: no-repeat;background-repeat: repeat-x;
3.文本修饰
主要用于删除下划线
text-decoration:none;
4.文本转换
大写
text-transform:uppercase
小写
text-transform:lowercase
首字母大写
text-transform:capitalize
所有文本属性 点击此处
5.字体
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
使用百分比和EM组合
在所有浏览器的解决方案中，设置 元素的默认字体大小的是百分比
body {font-size:100%;}h1 {font-size:2.5em;}h2 {font-size:1.875em;}p {font-size:0.875em;}
上面的的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
所有属性 点击此处
6.链接样式
在{}中可以写背景颜色，取下划线等
a:link {color:#000000;} /* 未访问链接*/a:visited {color:#00FF00;} /* 已访问链接 */a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */a:active {color:#0000FF;} /* 鼠标点击时 */
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
7.列表样式
详细点击链接
8.表格
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
border-collapse:collapse;
点击查看更多
9.CSS盒子模型
Margin(外边距) – 清除边框外的区域，外边距是透明的。
Border(边框) – 围绕在内边距和内容外的边框。
Padding(内边距) – 清除内容周围的区域，内边距是透明的。
Content(内容) – 盒子的内容，显示文本和图像。
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。
10.边框 border
11.CSS 轮廓（outline）包含在margin里
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
12.CSS分组与嵌套
分组
h1,h2,p{color:green;}
嵌套
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式
13.CSS
Display
(显示) 与
Visibility
（可见性）
display属性设置一个元素应如何显示
display:block(inline)
可以改变元素显示方式块还是内连
display:none
可以隐藏某个元素，且隐藏的元素不会占用任何空间。
visibility属性指定一个元素应可见还是隐藏。
visibility:hidden
可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
14.CSS Position(定位)
文档流
将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。
有三种情况将使得元素脱离文档流而存在，分别是浮动
float
，绝对定位
absolute
， 固定定位
fixed
。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
position:fixed;top:30px;right:5px;
relative 定位
相对定位元素的定位是相对其正常位置
position:relative;left:-20px;
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
position:absolute;left:100px;top:150px;
所有定位属性点击此处
CSS 布局 – Overflow
CSS
overflow
属性用于控制内容溢出元素框时显示的方式。
overflow: scroll //内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
其他属性点击此处
CSS Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用
float:left;
清除浮动 – 使用 clear
clear:both
CSS对齐与居中
文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用
text-align: center
;
图片居中对齐
要让图片居中对齐, 可以使用
margin: auto;
并将它放到 块 元素中
垂直居中对齐 – 使用 padding
padding: 70px 0;
详情点击此处
15.CSS 组合选择符
后代选择器
后代选择器用于选取某元素的后代元素。
div p {}
子元素选择器
子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
以下实例选择了
<div>
元素中所有直接子元素
<p>
div>p {}
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
div+p {}
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
div~p {}
16.CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。
详情点击此处看伪类
伪类元素
17.下拉菜单
<!DOCTYPE html><html><head><title>下拉菜单实例|菜鸟教程(runoob.com)</title><meta charset=\"utf-8\"><style>/* 下拉按钮样式 */.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}/* 容器 <div> - 需要定位下拉内容 */.dropdown {position: relative;display: inline-block;}/* 下拉内容 (默认隐藏) */.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}/* 下拉菜单的链接 */.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none; //去下划线display: block;}/* 鼠标移上去后修改下拉菜单链接颜色 */.dropdown-content a:hover {background-color: #f1f1f1}/* 在鼠标移上去后显示下拉菜单 */.dropdown:hover .dropdown-content {display: block;}/* 当下拉内容显示后修改下拉按钮的背景颜色 */.dropdown:hover .dropbtn {background-color: #3e8e41;}</style><div class=\"dropdown\"><button class=\"dropbtn\">下拉菜单</button><div class=\"dropdown-content\"><a href=\"#\">菜鸟教程 1</a><a href=\"#\">菜鸟教程 2</a><a href=\"#\">菜鸟教程 3</a></div></div>
18.文本提示使用(与下拉不同)
.tooltip:hover .tooltiptext {visibility: visible;}
19.图像透不透明,悬停效果可以加个伪类：hover
opacity:0.4;filter:alpha(opacity=40); /* IE8 及其更早版本 */
完整的CSS实例
点击此处
