首页 > 代码库 > CSS学习——基础分类整理
CSS学习——基础分类整理
1. CSS
层叠样式表：Cascading Style Sheets，定义如何显示html元素
CSS规则：选择器{属性：值; 属性：值;}
CSS注释：/*在这里写注释说明*/
2. 选择器
| #元素id | 用元素的id属性来设置 |
| .className | 用html的class属性来设置 |
| p.className | p元素，且class="className" |
| div p | 后代选择器（空格分隔）：div内的所有p |
| div>p | 子元素选择器（>分隔）：div的直接子元素 |
| div+p | 相邻兄弟选择器(+分隔)：div与p同父且p紧跟div后 |
| div~p | 后续兄弟选择器(~分隔)：div与p同你且在div后 |
3. 样式表可对一个元素设置多次样式，多重样式会层叠为一个，优先级从1->3降低
| <body style="background-color:Black"></body> | 1. 内联样式 |
| <head> <style> body {background-color:Black;} </style> </head> |
2. 内部样式表 |
| <head> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/mystyle.css"> </head> |
3. 外部样式表 |
4. 盒子模型所有html元素可看作盒子，元素从外到内为：外边距，轮廓，边框，内填充，和实际内容。
| margin | 外边距：与其父元素的间距，透明 |
| outline | 轮廓：位于边框边缘外围的线 |
| border | 围绕在内边距和内容外的边框 |
| padding | 内填充：内容与边框的间距 |
| content | 内容：显示数据 |
margin:10px(上) 10px(右) 10px(下) 10px(左); 按序设置外边距的大小，这个顺序是从上开始顺时针画一个框
5. 位置
| position |
定位方式，取值如下 static：静态，不受top等设置影响，出现在正常流中 fixed：相对浏览器窗口是固定的，即使窗口滚动它也不动 relative：相对于其正常位置 absolute：相对于其父元素 |
|
position:absolute; z-index:-1; |
与文档流无关，不占据空间 z-index指定堆叠顺序，相当于z轴 |
| top,right,bottom,left | 元素外边距与相应边的偏移量（相对的元素与position有关） |
| float:left/right/none | 元素尽量向左或向右移动，浮动元素后的元素才会受影响， |
| clear:left/right/none/both | 要求元素某一侧不能出现浮动元素 |
| text-align:left/right/center/justify | 文本对齐方式：左/右/居中/自动调整间距靠到两端 |
| background-position:left right | 背景设置开始的位置x(left/right/center) y(top/bottom/center) |
6. 颜色
| color | 文本颜色 |
| background-color | 背景颜色 |
| border-color | 边框颜色 |
| outline-color | 轮廓颜色 |
| text-decoration-color | 文字横线（下划、删除）颜色 |
|
background: linear-gradient(方向/角度,颜色1,颜色2,颜色3,...); background: radial-gradient(方向/角度,颜色1,颜色2,颜色3,...); |
方向：to bottom、to top、to right、to left、to bottom right 角度：从12点方位顺时针增加 设置背景颜色渐变，线性、 |
7. 显示方式
| display |
none: 不显示（不占空间） block: 块元素 inline: 内联元素 |
| visibility |
visible: 可见 hidden: 不可见（仍占空间） collapse: 和hidden效果类似 |
8. 图片设置
| background-image:url("1.jpg") | 设置背景图片 | |
|
border: 30px solid transparent; border-image-source:url("1.jpg"); border-image-slice:20 20 20 20; border-image-width:10 10 10 10; border-image-outset:1 1 1 1; border-image-repeat:repeat/sterch |
border:边框 source:边框图像地址 slice:4个值代表4条线距边的位置 width:边框图片宽度 outset:图片延伸到元素盒子的大小 repeat:图片扩展方式重复/拉伸 |
boder-image原理： 把图片用4条线切割成9宫格 每个格子与边框位置一一对应 9宫格的中间部分是透明的，空的 若image-width大于border宽度，多余部分可延伸到内容的空间 |
| list-style-image:url(‘1.jpg‘); |
列表标记的图片 |
9. 图像处理
| filter:滤镜属性(效果大小) |
blur(2)高斯模糊为2 grayscal(10%)转换成10%的灰度图... |
| opacity:0.2 |
指定不透明度 从0.0(完全透明)到1.0(完全不透明) |
| background:url(1.jpg) 0 0; |
图像拼合技术，从图的某个位置开始截取一部分 0 0：指定从图片左、上开始的位置 |
图像变换
| transform:roate(30deg); |
transform：转换属性。 让某个元素改变形状，大小和位置 roate()：2D转换方法，旋转 |
| transform:rotateX(30deg) | 3D转换方法，沿X轴3D旋转 |
|
div{ transition-duration:2s; transition-timing-function:linear; transition-delay:2s;} div:hover{ |
transition：过渡，从一种样式转变到另一个时，无需使用Flash动画或JavaScript。 鼠标移动到div上，它的宽度(property)从100逐渐变到300 timing-function：随时间变化速度变化 变化持续时间(duration)：2s 变化开始时间(延迟delay)：2s |
|
div{ animation: myAnimation 5s; } @keyframes myAnimation { 0% {background:red;} 25 {background:yellow;} 100%{background:blue;} } |
animation：动画名称 持续时长 @keyframes规则，myAmimation动画名称 0%->100%指定变化发生的时间 变化完成后回到0%的情况 |
10. 间距
| letter-spacing | 字母间距 |
| word-spacing:30px; | 单词间距 |
| border-collapse:separate; border-spacing:10px 50px; |
表格中相邻单元格的边框间距离 仅用于"边框分离"模式 |
| white-space |
指定元素内的空白怎样处理 |
11. 伪类为选择器添加一些特殊效果
语法 1. 选择器:伪类{属性:值} 2. 选择器.类:伪类{属性:值}、
| a:link/visited/hover/active | 链接:未访问过/访问过/移到到链接/正在活动 |
| p:befor/after | 在元素前/后插入内容 |
| p:first-child/last-child/nth-child(2) | 作为其它元素第1个/最后1个/第2个子元素的p |
| p:first-letter/first-line | p的第一个字母/行 |
12. 大小
|
width(宽) + padding(内边距) + border(边框) = 元素实际宽度 height(高) + padding(内边距) + border(边框) = 元素实际高度 |
|
| background-size: 80px 60px; | 背景大小 |
| font-size:10px | 字体大小 |
CSS学习——基础分类整理