CSS学习笔记
1. 什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
简单来说，它是一种来表现HTML或XML等文件样式的计算机语言。
如：使用css 给每一个单元格加上背景颜色，只需要在最前面写一段css代码，所有的单元格都有背景颜色了。这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到
2. CSS语法 selector {property: value} 即 选择器{属性:值} 如：选择所有的p元素，并且设置文字颜色为红色。 这是一个P 这是一个P 这是一个P 这是一个P 这是style为红色的 这是一个没有style的p 3. CSS选择器 主要分为3种：元素选择器 、id选择器 、类选择器 （1）元素选择器通过标签名选择元素 ，如：在实例中，所有的p都被设置成红色。 p元素 p元素 p元素 （2）id选择器：通过id选择元素 注： 一个元素的id应该是唯一的。另一个元素不应该重复使用。 没有id的p id=p1的p id=p2的p （3）类选择器：当需要多个元素，都使用同样的css的时候，就会使用类选择器。 前3个 前3个 前3个 后3个 后3个 后3个 （4）同时根据元素名和class来选择。 class=blue的p 4. 注释 注释：以/* 开始， 以*/结束，被注释掉的文字会自动隐藏。 红色的p 5. 尺寸 属性：width值：可以是百分比或者像素，为了便于观察一个元素的大小设置效果，进行了背景色的设置。 按比例设置尺寸50%宽 50%高 按象素设置尺寸 180px宽 50 px高 6. 背景 背景颜色：属性名background-color 颜色的值可以采用3种方式 （1）预定义的颜色名字 比如red,gray,white,black,pink，参考颜色速查手册 （2）rgb格式 分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色 （3）16进制的表示 #00ff00 等同于 rgb(0,255,0) 图片做背景： 背景重复： background-repeat属性 值可以选 repeat; 水平垂直方向都重复 repeat-x; 只有水平方向重复 repeat-y; 只有垂直方向重复 no-repeat; 无重复 背景平铺： 属性：background-size 值：contain 7. 文本 属性 作用 color 文字颜色 text-align 对齐 text-decoration 文本修饰 line-height 行间距 letter-spacing 字符间距 word-spacing 单词间距 text-indent 首行缩进 text-transform 大小写 white-space 空格 8. 字体 （1）尺寸 属性：font-size ;值：数字或者百分比 正常大小 30px大小的文字 50%比例的文字 0.5em 等同于 50%比例的文字 （2）风格： 属性：font-style 值：normal 标准字体，italic 斜体 标准字体 标准字体 斜体 （3）粗细： 属性 font-weight 值：normal 标准粗细 ，bold 粗一点 标准字体 标准字体 粗一点 （4）字库 属性font-family 值：各自字体 默认字库 font family:default 设置字库 font-family: Times New Roman 设置字库 font-family: Arial 设置字库 font-family: 宋体, 这种字体是IE默认字体 设置字库 font-family: 黑体 设置字库 font-family: 楷体 设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体 9. 鼠标样式 属性：cursor 值：default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-resize 此光标指示矩形框的边缘可被向右（东）移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 n-resize 此光标指示矩形框的边缘可被向上（北）移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 s-resize 此光标指示矩形框的边缘可被向下移动（南）。 w-resize 此光标指示矩形框的边缘可被向左移动（西）。 text 此光标指示文本。 wait 此光标指示程序正忙（通常是一只表或沙漏）。 help 此光标指示可用的帮助（通常是一个问号或一个气球） 10. 表格 （1）表格布局： 属性:table-layout 值：automatic; 单元格的大小由td的内容宽度决定 fixed; 单元格的大小由td上设置的宽度决定 注：只对连续的英文字母起作用，如果使用中文就看不到效果 （2）表格边框： 属性：border-collapse 值：separate:边框分隔，collapse:边框合并 11. 边框 （1）边框风格： 属性： border-style solid: 实线 dotted:点状 dashed:虚线 double:双线 （2）边框颜色 属性：border-color 值：red,#ff0000,rgb(255,0,0) （3）边框宽度： 属性：border-width （4）以上三个合并： 属性：border 值：颜色 风格 宽度 （5）只有一个方向有边框： 如上端有边框： border-top-style:solid; border-top-color:red; border-top-width: 50px; 12. 内边距 元素内边距 ：指的是元素里的内容与边框之间的距离 padding-left: 左内边距 padding-right: 右内边距 padding-top: 上内边距 padding-bottom: 下内边距 padding: 上 右 下 左 13. 外边距 元素外边距：指的是元素边框和元素边框之间的距离。 属性： margin-left: 左外边距 margin-right: 右外边距 margin-top: 上外边距 margin-bottom: 下外边距 margin: 上 右 下 左 14. 超链接状态 （1）超链状态有4种 link - 初始状态，从未被访问过 visited - 已访问过 hover - 鼠标悬停于超链的上方 active - 鼠标左键点击下去，但是尚未弹起的时候 （2）去除超链接的下划线 默认状态下，超链是有下划线的，但是现在网站上的超链普遍采用无下划线风格。 使用 text-decoration: none 文本修饰的样式来解决 15. 隐藏 隐藏元素有两种方式 display:none; visibility:hidden; 使用display:none; 隐藏一个元素，这个元素将不再占有原空间 ，原空间让出来了 使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见” 16. css文件 如果把所有的css都写在html文件里面，一旦样式比较多的时候，就会显得不易维护，这个时候就会选择把所有的css内容，放在一个独立文件里 ，然后在html中引用该文件，通常这个文件会被命名为style.css。 创建一个文件叫style.css 其内容为： 然后在html中包含该文件 红色 17. 优先级 （1）style标签与外部文件style.css样式重复时：那么优先使用： 最后出现的一个； （2）style标签上的与style属性冲突时：优先使用style属性。 （3）如果样式上增加了!important，则优先级最高，甚至高于style属性 p1 颜色是绿色，优先使用!important样式 18. 绝对定位 属性：position 值： absolute 通过指定left,top绝对定位一个元素 正常文字1 正常文字2 绝对定位的文字3 正常文字4 正常文字5 通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。 19. 相对定位 属性：position 值：relative 与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离。 正常文字1 正常文字2 相对定位的文字3 正常文字4 正常文字5 20. 浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 属性：float 值： left,right 21. 显示方式 元素的display显示方式有多种，隐藏、块级、内联、内联-块级 （1）display:none; 使得被选择的元素隐藏，并且不占用原来的位置。 （2）display:block; 表示块级元素，块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效 （3）display:inline; 表示内联元素，内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定 （4）内联是不换行，但是不能指定大小，块级时能指定大小，但是会换行，有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block 22. 水平居中 （1）内容居中： 通过设置属性align="center" 居中的内容 通过样式style="text-align:center" 居中的内容
1
2
3
4
a
b
abcdefghijklmnopqrstuvwxyz
abc
abcdefghijklmnopqrstuvwxyz
abc
边框分离
边框分离
边框合并
边框合并
值：数字
超链的不同状态
默认的超链
去除了下划线的超链
.p1{
color:red;
}
.span1{
color:blue;
}
（2）元素居中：
设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中
span的居中可以通过放置在div中，然后让div text-align实现居中
23. 左侧固定
左侧固定，右边自动填满。
左边固定宽度
右边自动填满
24. 垂直居中
（1）line-height 适合单独一行垂直居中。
line-height 适合单独一行垂直居中
（2）借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上。
多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容
（3）table方式：首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。这样对图片也可以居中，而line-height就不能对图片居中。
25. 左右固定
左右固定，中间自适应：
左边固定宽度
左边固定宽度
中间自适应
26. 贴在下方
一个div始终贴在下方：
首先把上边div设置为相对定位
然后下边的div设置为绝对定位， bottom: 0表示贴在下面。
无论蓝色div高度如何变化，绿色div都会贴在下面