《CSS3实战》读书笔记 第叁章 层叠样式表(CSS)

## 层叠样式表

本章将演讲CSS的主导规则。

一:创制Sagit开发框架的起因:

纪念IT连创业刚实行时,招了个IOS的女人做开发,然后:

———-女孩子的事故就此初始了———–

1:面试时候:有作品,态度也不错,感觉应该能做点事。

2:刚招进来:发现天天都在看作品,但迟迟不见有点东西。

3:进度问答:今后在整些什么?回答在搭框架。

4:发现风险:不小心看到她用单臂指敲键盘,感觉不妙。

5:处理风险:速学IOS,二个星期后,看完他代码,谈话Over!

———-女孩子的事故就到此停止了———-

在速学IOS时,神速扫了过多构建的摄像教程,发现套路都是很原始。

那几个原本的老路精晓可以,但若这个复苏搬到花色来,就祸害无穷了。

按部就班当时创业的本金考虑,很大致率招来的人是以下三种:

1: 刚从培训班出来的;

2:刚看完培训视频过来;

3:刚用培训摄像的老路祸害完一个档次后跳过来的。

为了对下二个开发人士有所约束:

让多少个有3-4年付出经历的恋人资助整一晃框架。

看完他整的框架,发现只是常规性的工具类分文件夹。

给她提了二个渴求,把里面二个网络请求重新包装一下。

回头再看,虽有所立异,但照旧欠缺小编意。

只怕可以率领后续创新,但时不以小编,也不以他。

于是乎自身入手了:框架大体达成六成时,招了个男开发人士。

———-男士的事故就此起头了———–

为了赶项目,让新人在框架的根基上开工了。

是因为新人开发人士能弄点东西,加上有框架的提携,就放手了。

出于框架的不到家,以及对框架的不知情,蒙受点小坑就吐槽。

吐槽多了,也只能同意她混着别样的框架一起整了。

再后来,多的数不清的坑和闪退事故。

初期关心IT连及用IT连App的童学,就领悟了。

起名,照旧在本人前边的IT连创业序列小说里应该可以感知了。

现在,他也Over了!

———-男子的事故就到此截至了———–

再度接任回IOS后,发现代码逻辑也是一团槽,幸好前头有一部份如故按框架走。

多年来花了一周多的时候,驾驭,并先河重构整个项目标代码。

再者对框架之前已有个别依赖关系也展开了抽离,并再一次重构了弹指间框架。

时下对框架的重构的劳作早已开展了百分之七十-八成,还有一对效应想了还没增进。

但完全并不影响基础作用,所以是时候把Sagit的框架和我们分享了!

### 解构CSS

所谓CSS,由拔取器(selector)和讲明块(declaration
block)组成。再进一步细分,每个评释包涵了质量和值。

selector:{
    property:value;
}

二:关于框架起名:

自从:CYQ.Data
框架那名字被大伙吐槽之后,后续的框架命名,就显的十一分用心了。

在切磋了行星、星座、水果、植物、动物、颜色、形状等英文名称之后。

到底有了:白羊(Areis.DevFramework For DotNet)、

再也有了:金牛(Taurus.MVC For DotNet)

事后没了:双子(Gemini.workflow For DotNet)
工作流引擎方今子宫破裂中(写了开班,后来没空折腾)。

因而,凑齐黄金十二宫,召换雅典娜,就成了本身来地球最神秘的职分了!

本次越级选了:Sagittarius (射手)

一来是ST的前缀简写刚好对应的现行创业公司的名字:随天。

二来取前半部做框架名,简写:Sagit(发音:射日,很和谐发现有木有)

起名 1

### 内联照旧外链?

大抵时候肯定是外链更高效。样式文件可以缓存到用户电脑,如果您3个网站用一套css,当用户访问同三个网站其他页面时,就毫无再行加载样式。

只是,缓存对于开发者来说是个坏东西。在该地调试时,修改样式表之后只怕不可能马上见到变化那时应该经过ctrl+F5来强制刷新清空缓存。

三:框架的适用场景:

内联样式

同在在head标记内建三个style标记,样式在其中写。在H5以前的规范中,style必须抬高属性type="text/css",未来早已不作必要。假设head内还有javascript,须求把script标记放到样式的后面。
单个网页而言,内联样式相对较快,可是可维护性较差。

1:商量学习:

A:工作几年过后,开发成效已不是题材,要求有点新构思来突破受限的瓶颈。

看懂框架代码简单,紧假诺上学思想,多思考,并多练习本人怎么写。

B:对于在构建行业的教授,可以在作育截至前用框架的合计指点一下新人,再放她们出去。

外链样式

外链样式起名随意,可是最好是相关的。全站的表单用同一套样式时,可以命名为form.css。

对别的链css还足以选用在线工具举行验证。http://jigsaw.w3.org/css-validator/

外链css必须关联。可以挑选<link>标记也足以用@import来指向想要被引述的css,浏览器对此双方的演讲并无分化。

2:项目开发:

A:开发人员没有框架的定义。

B:近期不曾其他可采取的框架。

一般的说,除了游戏,其他常规性的类型都合乎。 

 

下边对框架举行简短的牵线,也只能是不难介绍:

link

h5的link调用格式为:

<link rel="stylesheet" href="css/styles.css">

xhtml的格式为:

<link type="texxt/css" rel="stylesheet" href="....."/>

h5省略了type="texxt/css"

Sagit 立异一:简洁的周旋布局语法

通过@import调用:
<style>
    @import url(css/style.css)/*路径加不加引号都可以*/
</style>

@import的不一样之处:link语法属于html,而@import属于css语言,作为css语言,意味着你仍能在后面三番一次写其它css。那样一来,style内的css就是2个提到了其余样式的体制文件。可以认为是内联样式的一种变体。须要在网页加载之后才起来加载。最大的标题:不支持javascript控制DOM修改样式。

小结:有啄磨提议,在少数时候,拔取@import主意引入的css会拖慢速度,由此提出只使用link。
二者都是表面引用CSS的措施,不过存在一定的界别:

1:统一标准参数,自适配手机显示屏,完成AutoLayout。

A:框架暗中认同以IPhone6的像素为正式参照连串:750*1334。

B:开发时,都是规范的像素单位为参数。

C:运转时,会活动适配成对应比例的参数。

(PS :假使需要修改标准,可在STDefineUI.h文件中修改定义)

看着UI给的参数标注图,轻松布局:

起名 2

### 第三个样式

例如二个html5文档音讯如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS:The Missing Manual -- Chapter 2</title>
</head>

<body>
<h1>CSS: The Missing Manual</h1>
<p>...(假文) </p>
<h2>标题2</h2>
<p>...(假文)</p>
<p>...(假文)</p>
<h2>Nisi Ut Aliquid </h2>
<p>...(假文)</p>
<p>...(假文)</p>
<address>
Copyright 2016, Dang Jingtao 
</address>
</body>
</html>

2: 简洁的相持布局语法,一行看尽

上述图片为例,做布局

A:相对父成分的布局 Logo:

[[[[self addImageView:@"login_logo"] width:170 height:170] relate:Top v:288] toCenter:X];

B:相对稳定成分的布局,下边那行代码是援引其他地点的:

[[[[self addImageView:@"icon_verify"] width:48 height:48] onBottom:pwdIcon y:26] toCenter:X];

行间样式

行间样式并非一无所能:比如邮件等威名赫赫要有个别新闻。

比如:

<h1 style="color:#666:font-size:3em;">

3:可某个刷新的布局

以下那行代码,会对批定的视图的子视图重新进五回相对布局。

[self refleshLayout];

 

内联样式

<style>
    /*格式化h1*/
    h1{
        color:#666;
        font-size:3em;
        margin-top:10px;
        margin-left:80px;
    }
    /*格式化段落*/
    p{
        color:#616161;
        line-height: 150%;
        margin-top:10px;
        margin-left: 80px;
    }
</style>

Sagit 立异二:彻底分手的View与Controller

记得很早之前,作者写过一篇小说:Objective-C iOS纯代码布局
一堆代码可以放这里!

那时候只是啄磨的原初,并从未落到实处完全分离,当然以往是消除了。

举个例如:三个文本框一个按钮,点击按钮弹出文字框的内容。

事先的做法,你都会在Controller里写一堆UI相关的创立方法,或许须求将一些UI定义为全局变量,以便后续再去获取UI的值。

最差也是小编事先未形成时留下的那点手尾:(下边石黄的,在Controller中要求定义一个有血有肉的LoginView变量)

起名 3

外链css

在网页文件head成分中关系:

<link rel="stylesheet" href="styles.css">

在根目录下的styles.css文件写入CSS:

/*格式化页面*/
html{
    /*上内间距25px*/
    padding-top:25px;
    background-image:url(images/bg_page.png);
}
body{
    width: 80%;
    padding:20px;
    margin:0 auto;
    box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    background-color: #e1edeb;
}

/*格式化h1*/
h1{
    font-family: 'Gravitas One','Arial Black',serif;
    font-weight: normal;  
    color:#666;
    font-size:3em;
    margin-top:10px;
    margin-left:80px;
}
/*格式化段落*/
p{
    color:#616161;
    line-height: 150%;
    margin-top:10px;
    margin-left: 80px;
}

起来功能如下:
起名 4
对此用户的种类字体不称心的话可以运用谷歌字体:

<link rel="stylesheet" href="http://fonts.googleleaps.com/css?family=Gravitas+One">

据悉同样的机制,可以给文档加上更增进的体裁(字体,色彩,边距)

html {
    padding-top: 25px;    
    background-image: url(images/bg_page.png); 
}
body {
  width: 80%;
  padding: 20px;
  box-shadow: 10px 10px 10px rgba(0,0,0,.5);
  margin: 0 auto;
  background-color: #E1EDEB;
}
h1 {
    color: #666666;
    font-size: 3em;
    font-family: 'Gravitas One', 'Arial Black', serif;
    font-weight: normal;
    margin: 0;
}

p {
    font-family: "Palatino Linotype", Baskerville, serif;
    color: #616161;
    line-height: 150%;
    margin-top: 10px;
    margin-left: 60px;
}
h2 {
  color: #B1967C;
  font-family: 'Gravitas One', 'Arial Black', serif;
  font-weight: normal;
  font-size: 2.2em;
  border-bottom: 2px white solid;
  background: url(images/head-icon.png) no-repeat 10px 10px;
  padding: 0 0 2px 60px;
  margin: 0; 
}
.intro {
  color: #6A94CC;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  margin-left: 0;
  margin-bottom: 25px;
}

最终效果:(在线字体引用失败时可FQ试试)
起名 5

好了,今后以此标题一度被自个儿彻底消除了,0凌犯已经变为了实际,上面看示例代码:

LoginView 的代码:创制了多少个文本框和二个点击按钮

@interface LoginView : STView //这是LoginView.h

@end

@implementation LoginView    //这是LoginView.m

-(void)initUI
{
    [[self addTextField:@"userName" placeholder:@"输入手机号"] x:0 y:0 width:100 height:100];
    [[self addButton:@"btnLogin" title:@"登录"] onRight:self.lastSubView.PreView x:10];
}
@end

LoginController 的代码:有三个按钮事件,获取手机号用户名然后弹出来指示

@interface LoginController : STController // 这是LoginController.h

@end

@implementation LoginController            //这是LoginController.m

-(void)btnLoginClick
{
    NSString* userName=[self uiValue:@"userName"];
    [self.box prompt:userName];
}

### 技巧总括:

  • 响应式居中可以一向用body百分比涨幅,居中完结,可以加阴影。html文档的背景可以兑现网页背景纹理,不须要body上做小说。

调用:

self.window.rootViewController = [LoginController new];

效果:(为了截图,特意新建了个demo…)

起名 6

解析:

LoginView和LoginController多个公文代码里,并没有相互引用的地方。

但是UI和事件却补神奇的关系起来了,那是如何是好到的啊?

地下就在STView和STController文件的源码中。

Sagit 立异三:表单的电动提交与回显

如若你须要付出多少个表单的多寡,你只须求那样:

-(void)btnLoginClick
{
//    NSString* userName=[self uiValue:@"userName"];
//    [self.box prompt:userName];

    [self.http post:@"/Login" paras:self.formData success:^(STModel *result) {
        if(result.success)//如果:提交成功
        {
            [self.stView loadData:result.msg];//将返回的数据回显到控件
        }
    }];
}

解析:

self.formData可以自动收集UI表单的情节。

self.stView loadData 能够自动将字典的多少写回UI中。

漫天就是如此Easy,在那种健康的付出中,批量来批量去,不需求有Model的存在。

此地暂就不提供德姆o了,后续作品再跟进。

Sagit 其余作用一:月下无限连的属性语法:

    UITextField *userName= [[[self addTextField:@"UserName" placeholder:@"手机号码"] width:372 height:68] onRight:mobileIcon x:30 y:-10];
    [[userName maxLength:11] keyboardType:UIKeyboardTypeNumberPad];

 不用再去那样写的憔碎了:

 mobileTF.keyboardType                = UIKeyboardTypeNumberPad;// UIKeyboardTypeNamePhonePad;
 mobileTF.MaxLength=11;//                    = (id)self.Controller;

Sagit 其他功用二:封装了适合C#玩家的简练语法

OC的命名总是很短,做为了一名C#的大神,有职务把C#简洁的语法带过来。

例如:

@interface NSString(ST)

-(NSString*)reverse;
-(BOOL)isInt;
-(BOOL)isFloat;
-(NSString*)append:(NSString*)string;
-(NSString*)replace:(NSString*)a with:(NSString*)b;
-(NSString *)replace:(NSString *)a with:(NSString *)b isCase:(BOOL)isCase;
-(NSArray<NSString*>*)split:(NSString*)separator;
-(NSString*)toUpper;
-(NSString*)toLower;
-(BOOL)startWith:(NSString*)value;
-(BOOL)endWith:(NSString*)value;
-(BOOL)contains:(NSString*)value;
-(BOOL)contains:(NSString*)value isCase:(BOOL)isCase;
-(BOOL)isEmpty;
+(BOOL)isNilOrEmpty:(NSString*)value;
+(NSString*)toString:(id)value;
-(NSString*)trim;

Sagit 别的功效…

1:互连网的呼吁唯有三个:

[self.http get ...]
[self.http post ...]
[self.http upload ...]

2:新闻指示框:

[self.box prompt...]
[self.box alert..]
[self.box confirm...]

其他等。。。就不在那里介绍了,后续会渐渐写文介绍。

Sagit 开源地址:

GitHub:https://github.com/cyq1162/Sagit

当前以源码方式提供,并未打包成类库。

七个原因:

一是还索要地点需求持续周详进步;

二来方便有趣味的同窗一道完善。

总结:

1 :框架刚开源,预示着在今后的小日子里,升级与改变是必不可少的。

2:框架只是个基础,完整的品类架构,还亟需基于区其他事体搭配差其他第②方类库。

3:后续会将IT连和IT恋七个App的源码,做为示例教程,和大伙分享。

4:最终,依旧多谢大家关切本人正在举办的IT连创业好项目!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图