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同父且紧跟div的p
div~p 后续兄弟选择器(~分隔): 与div同父且在div后的p
div:first-child 是第一个儿子的div    first-child类似于形容词 伪类：表示特定状态
a:link a链接未点击时
a:hover 鼠标移到a上时

    3. 伪类    为选择器添加一些特殊效果

语法 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的第一个字母/行

    4. 样式表    可对一个元素设置多次样式，多重样式会层叠为一个，优先级从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="mystyle.css">
</head>		 3. 外部样式表

    5. 盒子模型    所有html元素可看作盒子，元素从外到内为: 外边距，轮廓，边框，内填充，和实际内容。

margin 外边距: 与其父元素的间距，透明

outline:2px black solid
outline-offset:10px

轮廓: 位于边框边缘外围的线
offset: 让轮廓向外偏移10px画
border 围绕在内边距和内容外的边框
padding 内填充: 内容与边框的间距
content 内容: 显示数据

margin:10px(上) 10px(右) 10px(下) 10px(左); 按序设置外边距的大小，这个顺序是从上开始顺时针画一个框

    6. 位置    

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)

    7. 颜色    

color 文本颜色
background-color 背景颜色
border-color 边框颜色
outline-color 轮廓颜色
text-decoration-color 文字横线（下划、删除）颜色

background: linear-gradient(方向/角度,颜色1,颜色2,...);
background: radial-gradient(方向/角度,颜色1,颜色2,...);

方向: to bottom、to top、to right、to left、to bottom right
角度: 从12点方位顺时针增加
设置背景颜色渐变，线性、

    8. 显示方式    

display

none: 不显示（不占空间）
block: 块元素
inline: 内联元素
visibility

visible: 可见
hidden: 不可见（仍占空间）
collapse: 和hidden效果类似

    9. 图片设置     

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:图片扩展方式重复/拉伸
list-style-image:url('1.jpg');

列表标记的图片

boder-image原理:
把图片用4条线切割成9宫格。每个格子与边框位置一一对应。9宫格的中间部分是透明的，空的。若image-width大于border宽度，多余部分可延伸到内容的空间

    10. 图像处理    

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{
width:100px;
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
transition-delay:2s;}
div:hover{width:300px;}

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%的情况

    11. 间距    

letter-spacing 字母间距
word-spacing:30px; 单词间距
border-collapse:separate;
border-spacing:10px 50px;

表格中相邻单元格的边框间距离
仅用于"边框分离"模式
white-space

指定元素内的空白怎样处理

    12. 大小    

width(宽) + padding(内边距) + border(边框) = 实际宽度
height(高) + padding(内边距) + border(边框) = 实际高度

  
background-size: 80px 60px; 背景大小
font-size:10px 字体大小

overflow:auto;
resize:both|horizon|vertical;

需设置overflow
resize:允许用对元素大小进行手动调整

box-sizing:content-box|border-box

指定width/height设置的目标为内容盒子|边框盒子

    13. 分列    

column-count:3;
column-span:1|all;
column-gap:5px;
column-width:10px;
column-fill:auto|balance;
column-rule-color:#000000;
column-rule-style:solid|dotted;
column-rule-width:10px

column将元素分成多列（栏）显示
count: 列数
span: 跨1或所有列
gap: 两列的间距
width: 列的宽度
fill: 填充方式自动或尽量列长平衡
column-rule: 列与列之间的线的设置

14. 单位

p{font-size: 10px;}  

div{font-size:10px;}

p{font-size: 1.5em;}

p的字体大小

1.5*p的最近父元素的font-size
p{font-size: 1.5rem;} 针对根元素html

p{font-size: 8vm;}

p{font-size: 8vh;}

 vm/vh把视口的宽和高分成100份

参考：

https://www.runoob.com/cssref/

CSS学习——基础分类整理的更多相关文章

  1. (zhuan) 126 篇殿堂级深度学习论文分类整理 从入门到应用

    126 篇殿堂级深度学习论文分类整理 从入门到应用 | 干货 雷锋网 作者: 三川 2017-03-02 18:40:00 查看源网址 阅读数:66 如果你有非常大的决心从事深度学习,又不想在这一行打 ...

  2. html学习——基础分类总结

        1. html     超文本标记语言HyperText Markup Language.html文档基本结构: <!DOCTYPE html><head> <! ...

  3. 工作流（Workflow）学习---基础知识整理

    工作流定义: 工作流是将一组任务组织起来以完成某个经营过程:定义了任务的触发顺序和触发条件,每个任务可以由一个或多个软件系统完成,也可以由一个或一组人完成,还可以由一个或多个人与软件系统协作完成. 工 ...

  4. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  5. 学习ReactNative笔记整理一___JavaScript基础

    学习ReactNative笔记整理一___JavaScript基础 ★★★笔记时间- 2017-1-9 ★★★ 前言: 现在跨平台是一个趋势,这样可以减少开发和维护的成本.第一次看是看的ReactNa ...

  6. CSS的基础学习

    CSS学习 --------学习资源 http://www.csszengarden.com/ CSS语法检查http://jigsaw.w3.org/css-validator/ 配置CSS的方法: ...

  7. HTML&&CSS基础知识点整理

    HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...

  8. Python编程：基础学习常见错误整理

    # Python学习之错误整理: # 错误一:# TypeError: cannot concatenate 'str' and 'int' objects# 不能连接str和int对象age = 2 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. IT这条路，适合什么人走。

    今天 ,到图书馆Study,呼,不知道为撒,看到那么多新书,那么多新技术(也不能说是新技术,就是自己没有学习过的技术),特别兴奋,学习的疲劳顿时间就没了,感觉什么都想学,都想据为己有,但是...... ...

  2. HACK入别人的游戏制作做MOD的几种技巧

    要让某个游戏(程序)加载我们的MOD,目前有想到的有三种方式: 静态注入:静态注入,即我们HACK入游戏的某个dll,然后修改里面的代码,让程序在运行后加载我们的ModDll,比如U3D的游戏可以直接 ...

  3. 【51nod 1331】狭窄的通道

    Description 有一个长为L的狭窄通道,我们假设这个通道在x轴上,其两个出口分别在x=0与x=L处.在这个通道里有N只狼,第i只狼有一个初始位置ai,它想到达位置bi(0<=i<N ...

  4. 使用Hexo在github上搭建个人博客

    最近正好在学习前端开发,想着搭建一个属于自己的个人博客,把自己的技能树整理整理,温故而知新. 如果你有前端开发经验,那么搭建这样的博客就很简单了. 一 什么是Hexo     Hexo 是一个快速.简 ...

  5. VS中ipch文件夹和sdf文件的处理方式

    ipch文件夹和sdf是VS产生的预编译头文件和智能提示信息,对编码没有影响,可存放在固定的位置,定期进行清理

  6. mssql 创建函数简单实例

    CREATE FUNCTION [dbo].[f_DailyIncome] ( @userId int, @date date ) ,) AS BEGIN ,); ) from Channel_Use ...

  7. ES6走一波 变量结构赋值

    Destructuring  变量的解构赋值 是一种模式匹配 ES6我关注点之一是用途  能否举些好例子是检验学习到位的方法之一 交换变量值 函数返回多个值 函数入参为对象.数组,内部使用更简洁 意义 ...

  8. RabbitMQ简单应用の消息持久化

    消息应答: 消息应答默认是打开的(false) boolean autoAck = true;自动确认模式,表示一旦MQ将消息给到消费者,就会从内存中删除该条消息,这种情况下,如果杀死正在执行的消费者 ...

  9. java String、StringBuffer、StringBuild、StringTokenizer

    StringBuffer线程安全.StringBuilder线程不安全 效率: StringBuilder(线程不安全) > StringBuffer(线程安全) > String Str ...

  10. Python笔记 【无序】 【三】

    #打开文件 os.open(file, flags[, mode]); file -- 要打开的文件 flags -- 该参数可以是以下选项,多个使用 "|" 隔开: os.O_R ...