CSS笔记(菜鸟教程）

CSS层叠式样表(cascading style sheet)
1.CSS语法
(1).注释：/这是一个注释/
2.CSS创建
如何插样式表？
(1).外部样式表：(样式应用于很多页面）

(2).内部样式表：(单个文档需要特殊样式）

(3).内联样式表：(慎重使用）
(4).多重样式：
优先级：内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
3.CSS背景
(1).background-color:背景颜色

(2).background-attachment:背景图像是否固定在页面还是随着内容滚动
fixed(不会随着页面滚动而滚动）
local(随着页面的滚动而滚动）
(3).background-image:设置背景图片

(4).background-position：设置图片的位置

(5).background-repeat:定义背景图是否及如何重复
repeat:默认垂直水平重复占满
repeat-x:水平重复横向
repeat-y:垂直重复竖直
no-repeat:不会重复只有一块儿
4.CSS文本格式：就是文字的样式啦
（1).文本颜色(color)
（2).文本对齐方式(text-align):
center居中
justify每一行被展开为宽度相等，左，右外边距是对齐
（3).文本修饰(text-decoration):
overline(上划线）
underline(下划线）
line-through(删除线）
（4).文本转换(text-transform)：字母大小写
（5).文本缩进(text-indent):50px度量
5.CSS Fonts:CSS字体
（1).CSS字型：
serif：字符在行的末端拥有额外的装饰
sans-serif:字符在行的末端没有额外的装饰
Monspace:所有等宽字符具有相同的宽度
（2).font-family:设置文本的字体系列
（3).font-style:设置字体样式属性
normal:正常
italic:斜体
oblique:向一边倾斜
（4).font-size:设置字体的大小及像素
如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em
像素50px度量
6.CSS列表样式
（1).list-style:简写列表属性
（2).list-style-image:将图像设置为列表项标志
（3).list-style-position:设置列表项标志的位置
inside
outside
（4).list-style-type:列表标志的类型
7.CSS Table(表格):
（1).表格边框设置:

（2).折叠边框:
border-collapse:collapse设置表格为单一的边框
（3).表格宽度高度：
height
width
（4).表格文字对齐
水平对齐方式(text-align):right、left、center
垂直对齐方式vertical-align):top、bottom、中间
（5).表格填充：表格的大小
padding以50px度量
（6).表格颜色：
color
background
8.CSS盒子模型:封装HTML元素(body中的div必须要有内容）
（1).外边距(margin):清除边框外的的区域外边距是透明的
（2).边框(border):围绕在内边距和内容外的边框
（3).内边距(padding):清除内容周围的区域，内边距是透明的
（4).内容(content):盒子里的内容，装文本和图片

9.CSS border(边框)：
（1).border-style(边框样式)


border-style (上 右 底 左）
boeder-style(上 左右 底)
border-style*(上底 右左）
border-style* (四边属性）
（2).边框宽度(border-width)

（3).边框颜色(border-color)

（4).边框单独设置各边

10.CSS轮廓
（1).轮廓颜色(outline-color）

（2).轮廓样式(outline-style)

（3).轮廓宽度(outline-width)

11.CSS margin(外边距）:清除元素周围的空间
margin****(上 右 下 左）
margin***(上 左右 下）
margin** (上下 左右）
margin* (四边）
12.CSS分组和嵌套:在样式表中有很多样式相同的元素为了代码简单/适用于选择器内部的选择器样式

13.CSS Disply和visibility:定义元素如何显示可见还是隐藏
（1).disply
:none元素被隐藏且不占用任何元素空间
（2).visibility：
hidden元素被隐藏但是占用原有空间
visible元素可见
collapse元素被隐藏也会占用原有空间 但是遇到tabl相关元素便会释放空间

（3).CSS Display块和内联元素
块级元素(block):表现为另起一行开始且高度宽度内外边距都可以控制
内联元素(inline):所有相邻元素都在一行 高度宽度内外边距不可以控制就是里面文字或者图片的大小
内联块元素(inline-block):同行显示并且可以改变高度宽度和内外边距
14.CSS position定位定义元素在页面的位置或者随之页面滚动是否滚动
（1).static:没有定位遵循正常的文档流
（2).fixed:固定位置不会随着页面的滚动而滚动
（3).relative:相对元素的定位是相对其正常的位置/移动相对定位元素，所占的空间不会改变
（4).absolute:绝对相对定位相对于最近已定位的父位元素
（5).sticky:粘贴定位
（6).z-index:重叠的定位元素

（7).用滚动条来显示溢出的元素(overflow)
scroll:右滑动条+下滑动条
hidden:隐藏溢出的元素
auto:右滑动条
visible:直接显示溢出的内容
（8).更改落在元素上光标
auto|text 大写的I
crosshair 十字
default \单箭头
e-resize|w-resize —双向箭头
help \箭头+?
move 四向箭头
n-resize|s-resize |双向箭头
ne-resize|sw-resize /双向箭头
nw-resize|se-resize \双向箭头
pointer 小手中指
progress | wait 等待蓝色圆圈

15.CSS浮动:定义元素在页面的位置

16.CSS组合选择符
（1).后代选择器(空格分开)：选取某元素的后代元素
（2).子元素选择器(大于号分开):与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
（3).相邻兄弟选择器(加号分开):相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
（4).后续兄弟选择器(~分开):后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
17.CSS伪类:添加选择器的特殊效果
（1).anchor伪类


（2).CSS firstchild伪类
选择器匹配任何元素第一个子元素p

选择相匹配的所有p元素的第一个i元素

选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素

18.CSS伪元素:添加选择器的特殊效果
（1).first-line伪元素:文本首行设置特殊格式
p:first-line:段落p的第一行设置特殊格式
（2).first-letter:文本首字母设置特殊格式
p:first-letter:段落p的首字母设置特殊格式
（3).CSS before伪元素:在元素的内容前加入新内容

（4).CSS after伪元素:在元素的内容后加入内容
19.CCS属性选择器:具有特殊属性的HTML样式

（1).“value 是完整单词” 类型的比较符号: ~=, |=
~=:包含独立关键字
|=:完整且唯一的关键字或者以-隔开
“拼接字符串” 类型的比较符号: *=, ^=, $=
: *=:字符串拆分包含关键字
$=:以关键字结尾
^=:前几个字母是关键字
20.CSS导航(最近超级喜欢的歌）

21.CSS下拉菜单



22.CSS提示工具

23.CSS图片廊

24.图像的透明与不透明

opacity：值是0-1,值越小元素越透明
alpha（opacity= x）：x可以采取的值是从0 - 100。较低的值，使得元素更加透明。


完.