切图与CSS入门（一）_源码技术交流

好源码站长

LV_2

VIP2

好源码官方

JS 对于后端小伙伴来说不算难点，能够顺手的使用，涉及到 CSS 就会有点懵逼了。为了让后端同事更愉快的玩转 CSS，做一个好的切图仔，下面我将讲一些如何提升自己的 CSS 技巧，帮助后端同事快速还原 PSD。

前端页面的书写顺序

先看设计稿
编写 HTML 代码
编写 CSS 代码
编写 JS 代码

今天我们主要关注编写 CSS 代码，在写 CSS 代码时，我们需要从PSD中拿到各种数据，如何精准的拿到这些数据，保证页面能够像素级还原呢？

PSD切图

打开PSD，我们看到一个PSD里面有很多的智能参考线，设计师在设计的过程中，根据某些模块给出适当的智能参考线，帮助前端同事更好的去切图。
如果我们发现要切的图没有参考线，那我们可以手动加，智能参考线有助于我们更精准的丈量元素的尺寸，比如宽高、内边距、外边距、行高等。

Photoshop快捷键

Photoshop常用快捷键链接、链接

操作	window	Mac
自由变换	Ctrl + T	Cmd + T
选择工具：	V	V
矩形/椭圆工具	M	M
剪裁/切片工具	C	C
放大和缩小	Ctrl++、Ctrl+-	Cmd++、Cmd+-

两种切图方法

第一种：使用切片工具
1.使用切片工具划分好你要切的模块
2.点击'存储为web所有格式'，在存储之前可以修改图片的品质来改变文件的大小。
3.在存储时切片有三种选择方式，按照自己的需要选择。

第二种：使用矩形选择工具
1.使用矩形选择工具选中要切的模块
2.ctrl+shift+c合并拷贝图层
3.ctrl+n新建文档
4.ctrl+v粘贴图层，保存。

选中图层

切换到移动工具
alt+鼠标右键
或
ctrl+鼠标左键
注：选择有组与图层两个选项，根据自己的需要选择，一般我们选中图层。

自由变化选区

选中图层，ctrl+t自由变化选区。
设置栏包括x/y,w/h，度等选项。

放大缩小

alt+滑轮

查看图层或模块的宽高

方式一：点击图层的缩略图+ctrl,可在信息项里面看到图层的宽高。
方式二：ctrl+T自由变化图层大小，也可以在信息项里看到图层的宽高。
方式三：使用矩形选择工具量。

修改字体、颜色等。

设计师做完了psd图后，有时我们需要自己改动一些细节。
选中图层后，点击图层的缩略图，可以直接修改颜色。
或直接调为前景色或后景色。ctrl+delete(后景色)，alt+delete(后景色)

隐藏与显示图层或组。

隐藏：alt+点击眼睛图标，即只显示或隐藏当前图层、组。

上面简单的所有了切图，还有一些更高级的，比如图片雪碧，圆角，阴影和蒙版等。在切图的时候，我们已经想到了怎么写好HTML代码，这时写好HTML代码。

编写CSS代码。

1. CSS样式重置

首先引入一个CSS重置样式，这样子可以帮助我们统一各个元素在不同浏览器之间的差异。

PC重置代码：链接

/* reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0; padding:0;}html{-webkit-text-size-adjust:none;}body{background:#4f90d2; font:12px/2em Microsoft Yahei,tahoma,HELVETICA; text-align:center;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;}img{border:none; vertical-align:top}i,em{font-style:normal;}input,select,option,textarea{font-size:12px;}a{text-decoration:none;} a:hover{text-decoration:underline;}/* function */noscript,.spanclass,.pannel,.hidden{display:none;}.show,.block{display:block;}.mark,.fl,.mark-sub,.fr{display:inline;}.mark,.fl{float:left;} .mark-sub,.fr{float:right;}.fs-14{font-size:14px;} .fs-16{font-size:16px;}.clear{clear:both; height:0; line-height:0; font-size:0; overflow:hidden;}.clearfix{*zoom:1} .clearfix:after{content:"\20"; clear:both; height:0; display:block; overflow:hidden;}

移动重置代码：链接

@charset "utf-8";body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}ul,ol{list-style:none;}a{text-decoration:none;}html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}body{line-height:1.5;}body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}b,strong{font-weight:bold;}i,em{font-style:normal;}table{border-collapse:collapse;border-spacing:0;}table th,table td{border:1px solid #ddd;padding:5px;}table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}img{border:0 none;width:auto\9;max-width:100%;vertical-align:top;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){input{line-height:normal!important;}}select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video,progress{display:inline-block;}

2. 样式的级联

浏览器如何确定应将哪些样式应用于某个元素有一套严格的规则。这些基本特征称为级联，继承和特异性。

级联是CSS的基本特征。它是一种定义如何组合源自不同源的属性值的算法。正如其名称所强调的那样，它位于CSS的核心：层叠样式表

浏览器使用以下顺序查找属性值。

内联样式 – 使用元素上的style全局属性定义的样式
嵌入式样式 – 在样式元素中定义的样式
外部样式 – 使用链接元素导入的样式
用户样式 – 由浏览器的用户提供
浏览器样式 – 浏览器应用的默认样式

例如，为一个元素选择文本的颜色。

浏览器将需要为CSS颜色属性找到一个值。

首先，它将检查它试图渲染的元素是否具有定义颜色值的内联样式，如下所示：

<a style="color:red" href="http://www.w3cschool.cn">Visit the website</a>

如果没有内联样式，浏览器将查找包含适用于元素的样式的样式元素，如下所示：

<style type="text/css">a  {   color: red;}</style>

如果没有这样的样式元素，浏览器会查看通过链接元素加载的样式表。
如果仍然找不到颜色属性，则使用默认的浏览器样式。

属性的前三个来源（内联样式，嵌入样式和样式表）统称为作者样式。
用户样式表中定义的样式称为用户样式，浏览器定义的样式称为浏览器样式。

重要样式

您可以通过将属性值标记为重要来覆盖正常的级联顺序。
通过对声明附加！important ，可以将单个值标记为重要。

3. 继承和非继承属性

继承概念不同于级联，它基本上是在DOM中CSS属性如何从父级传递给子级的过程。
并非所有属性都会自动继承。以下是CSS属性的完整参考以及它们是否被继承。
最常用属性的一些示例：

继承的属性

颜色 (color)

字体系列 (font-family)

字体大小 (font-size)

字体样式 (font-style)

字体重量 (font-weight)

文本对齐 (text-align)

非继承属性

背景 (background)

边界 (border)

余量 (margin)

填充 (padding)

显示 (display)

浮动 (float)

宽度 (width)

高度 (height)

4. 特异性和顺序评估

在CSS中，可以通过其类，ID或属性以各种方式选择元素。因此，当某个元素具有由样式表中放置的几个不同选择器应用的不同规则时，浏览器如何确定要应用哪些选择器的样式？

CSS选择器

一.基本CSS选择器

有标记选择器、类别选择器、ID选择器3种：

1.标记选择器
每一种HTML标记的名称都可以作为相应的标记选择器的名称，如h1,p,div等等

2.类别选择器
类别选择器的名称可以由用户自定义
格式如下：.class{color:green;font-size:20px;}

3.ID选择器
与类别选择器相试
格式如下：#id{color:green;font-size:20px;}

二.复合选择器

就是两个或者多个基本选择器，通过不同方式连接而成的选择器

1.“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第一必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写
如：h3.class{color:red;font-size:23px;} div#special{…} 注意两者间没有空隔

2.“并集”选择器：同时选中各个基本选择器所选择的范围，任何形式的选择器都可以，并集选择器是多个选择器通过逗号连接而成的，
格式如:h1,h2,h3{color:red;font-size:23px;} 注意中间是有逗号分隔

三.后代选择器
如：p span{color: red;} span{color: blue;}

四.子选择器
也就是只有对直接后代有影响的选择器，而对“孙子”以及对个层的后代不产生作用。
p>span{color:blue;}

如果有两个样式应用于在同一级别定义的元素，并且它们都包含浏览器正在寻找的CSS属性的值。
要决定使用哪个值，浏览器会评估每个样式的特异性，并选择最具体的值。
浏览器通过计算四个不同的特征来确定样式的特异性：

内联样式

<ul style="list-style-type:none"></ul>

样式选择器中的id值的数量

#users-chart { }#main-nav { }

选择器中的类、伪类和属性的数量

.container { }.list-item:first-child { }[href^='https://'] { }

选择器中元素名称和伪元素的数量

div { }p::after { }

根据以上规则，对于组合选择器，使用四元素组计算特异性:

对于内嵌样式，将第一个项目增加1
1 0 0 0

对于每个ID，将第二个项目增加1
0 1 0 0

对于每个类，伪类或属性将第三个项目增加1
0 0 1 0

对于每个元素或伪元素，将第4项增加1
0 0 0 1

加上有一个important 就更加棘手了，那么如何处理这些特异性呢？

尽量保持选择器的特异性尽可能低，因为它们更易于理解和维护。
通常，建议在样式表中组织选择器，使其具有更高的特异性。
避免使用ID选择器，因为它们难以覆盖。
尝试使用命名约定，如 BEM,BEMIT 或 SUIT 。

5.认识CSS单位

px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。默认浏览器大小字体是 1rem=16px 。

CSS常用属性

一 CSS文字属性：

color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/  text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/vertical-align:text-bottom; /*文字垂直向下对齐*/

二、CSS边框空白

padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白

三：CSS边界样式

margin-top:10px; /_上边界_/margin-right:10px; /_右边界值_/margin-bottom:10px; /_下边界值_/margin-left:10px; /_左边界值_/

四、CSS背景样式

background-color:#F5E2EC; /*背景颜色*/  background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/background-attachment : fixed; /*浮水印固定背景*/background-repeat : repeat; /*重复排列-网页默认*/background-repeat : no-repeat; /*不重复排列*/background-repeat : repeat-x; /*在x轴重复排列*/background-repeat : repeat-y; /*在y轴重复排列*/background-position : 90% 90%; /*背景图片x与y轴的位置*/background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*