工作是高端大气上档次，工资是低调奢华接地气！

我们叫做“程序猿”，也叫“攻城狮”！

但是往往城还没攻下来，我们的头发就先掉下来！

我们最喜欢听的一句话就是

段子一

“等我敲完这行代码，就和你离婚！”
他头也不抬的说
听完之后，她心里暖暖的
她想，这可能是最长情的承诺
（因为深知永远敲不完代码）
–2017年度十大感动故事奖

段子二

“等我敲完这行代码，就陪你去吃饭”
听完之后，她的心拔凉拔凉的
她想，这可能是最婉转的分手了
（因为深知永远敲不完代码）
–2017年度十大感动故事提名奖

段子三

人生难得一知己，别人都不懂搞程序的我在想什么~终于有一天，我在山顶上与我的蓝颜知己相遇了。他光着头，穿着僧衣，莫名的，我两心心相惜。
我对他说：我放不下一些事，放不下一些人。
他说：这个世界上没有什么是放不下的。
我说：可我偏偏放不下。
他说：依我看，无非是你存储空间不足，要学会内部虚拟化，自然放得下。
我惊呼了，急忙问道：大师，你怎么这么懂。
他叹了一口气说：当初我就是不懂得内部虚拟化，费脑过多，头发掉光光，最后才来当和尚~

段子四

一位搞程序的刚结婚不久，跟老板出去见客户，边喝酒边要说一些是人都听不懂的abcd代码，醉倒后不省人事。被抬回家后，老婆试着用各种方法给他醒酒，都无济于事，于是打电话询问他的同事。
同事说，我在现在做的系统发一个bug通知，突然老公手机短信微信邮箱钉钉同时震了，只见男人噌的一下从床上蹦起来，精神抖擞，大喊：“又TM的哪里有BUG”老公好惨！老公好辛苦！老公加油！
——致敬这一群拥有无与伦比的耐力、超越时代的智商、和横穿社会的苦逼

段子五

男盆友是传说中的攻城狮，bug对他来说就是☞因为要修改，接着就是加班，然后就是没有夜生活~夜生活~夜生活~

段子六

程序猿的世界你不懂~男朋友出差到上海做系统演讲，他说这是他长的这么大第一次走出广东省，屁溜溜地乘着火车滚了~途经长江，就想看到长江的宏伟壮大~而在程序猿的眼中，长江是这样滴~

段子七

最烦男友说一句话就是：电脑在手，代码我有！
坐车就好好坐车，还发了图片证明自己坐车也不忘工作
一分钟不敲代码是不是就手痒，手痒我可以抽你
（我不就是想让你多休息休息）

段子八

在IT这个行业里，程序猿都被称为“互联网精英”，其实他们是拿着“白菜”工资的“短命鬼”，正常上班时，他们在公司加班；正常休假时，他们在家加班，吃饭更没规律，只因他们要时时刻刻盯着，防着bug的骚扰。
连亲人和他见个面都要杀到机房才能见到他，不知道的人、不了解的人还以为你早出晚归，甚至夜不归宿是因为外面有“小五”。

做这行业的没有一个会脑呆，因为每天大脑都在高速运转，看不懂英语没关系，我看懂代码就知道上面那句翻译是什么，神思维~

段子九

记者问一个大爷：大爷，您保持亮丽的秘诀是什么？
大爷说：白天敲代码，晚上撸系统，姿势不要动，眼动手动就可以。
记者：啊？大爷您是做什么工作的？
大爷：敲代码的呀。
记者：那大爷您是本身就很喜欢光头的吗？
大爷：掉光的~

段子十

如果你身边有搞程序的朋友，请多给他一点帮助。一天差不多有十几个小时坐在电脑前，保持一个姿势动也不动。有时间多带他出去见见溜溜，约他吃饭，喝酒吃肉各种消费时你来买单吧，不要跟他提钱了。
工作压力已经很大，请理解她、包容他、打牌也故意输给他。临走再塞个万儿八千的红包也行，让他感受到人间的温暖吧！请紧密陪伴他，生活是相互扶持的！不说了，前边有人扔鸡蛋！！！我要正面迎敌~

看完以上的段子，你是不是感同身受，哭笑不得呢，虽然有一丢丢夸张搞笑的成分在，但是IT行业是真心不容易！每一个搞程序的人都是可亲可敬的超级英雄！

网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，下面就是具体DIV/CSS命名规则CSS命名大全内容篇。
我们开发CSS+DIV网页（Xhtml）时候,比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。

一、命名规则说明

1）、所有的命名最好都小写

2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"

3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

4）、空元素要有结束的tag或于开始的tag后加上"/"

5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6）、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

7）、给每一个表格和表单加上一个唯一的、结构标记id

8）、给图片加上alt标签

9）、尽量使用英文命名原则

10）、尽量不缩写，除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名

外套 wrap —— 用于最外层

头部 header —— 用于头部

主要内容 main —— 用于主体内容（中部）

左侧 main-left —— 左侧布局

右侧 main-right —— 右侧布局

导航条 nav —— 网页菜单导航条

内容 content —— 用于网页中部主体

底部 footer —— 用于底部

三、DIV+CSS命名参考表

以下为CSS样式命名与CSS文件命名参考表，DIV CSS命名集合：

网页公共命名

| ----CSS样式命名---- | ----说明---- |
|#wrapper|页面外围控制整体布局宽度|
|#container或#content|容器,用于最外层|
|#layout|布局|
|#head,#header|页头部分|
|#foot,#footer|页脚部分|
|#nav|主导航|
|#subnav|二级导航|
|#menu|菜单|
|#submenu|子菜单|
|#sideBar|侧栏|
|#sidebar_a,#sidebar_b|左边栏或右边栏|
|#main|页面主体|
|#tag|标签|
|#msg,#message|提示信息|
|#tips|小技巧|
|#vote|投票|
|#friendlink|友情连接|
|#title|标题|
|#summary|摘要|
|#loginbar|登录条|
|#searchInput|搜索输入框|
|#hot|热门热点|
|#search|搜索|
|#search_output|搜索输出和搜索结果相似|
|#searchBar|搜索条|
|#search_results|搜索结果|
|#copyright|版权信息|
|#branding|商标|
|#logo|网站LOGO标志|
|#siteinfo|网站信息|
|#siteinfoLegal|法律声明|
|#siteinfoCredits|信誉|
|#joinus|加入我们|
|#partner|合作伙伴|
|#service|服务|
|#regsiter|注册|
|arr/arrow|箭头|
|#guild|指南|
|#sitemap|网站地图|
|#list|列表|
|#homepage|首页|
|#subpage|二级页面子页面|
|#tool,#toolbar|工具条|
|#drop|下拉|
|#dorpmenu|下拉菜单|
|#status|状态|
|#scroll|滚动|
|.tab|标签页|
|.left.right.center|居左、中、右|
|.news|新闻|
|.download|下载|
|.banner|广告条(顶部广告条)|

电子贸易相关

| ------------ | ------------ |
|.products|产品|
|.products_prices|产品价格|
|.products_description|产品描述|
|.products_review|产品评论|
|.editor_review|编辑评论|
|.news_release|最新产品|
|.publisher|生产商|
|.screenshot|缩略图|
|.faqs|常见问题|
|.keyword|关键词|
|.blog|博客|
|.forum|论坛|

CSS文件命名

| ------------ | ------------ |
|master.css,style.css|主要的|
|module.css|模块|
|base.css|基本共用|
|layout.css|布局，版面|
|themes.css|主题|
|columns.css|专栏|
|font.css|文字、字体|
|forms.css|表单|
|mend.css|补丁|
|print.css|打印|

CSS命名其它说明

无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。

建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。

四、英文命名技巧

如果遇到不常用的，可以借助翻译工具进行翻译取其英文命名。

在线翻译工具：

百度：http://fanyi.baidu.com/

有道：http://fanyi.youdao.com/

Google：http://translate.google.cn/
以上为DIV+CSS的命名规则总结，相信通过规范的CSS命名给你以后网站网页的维护带来方便。

转自：点击进入

css引入方式

内嵌式：(写在标签里)

内联式：(写在style标签里)

外联式：(常用)

/*通过标签引入*/

导入式：(做了解)

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

CSS 子对象选择符 Child Selectors

语法：E1 > E2

说明：
选择所有作为E1子对象的E2。
目前IE5.5+尚不支持此种选择符。

示例：

        body > p { font-size:14px; }
        /* 所有作为body的子对象的p对象字体尺寸为14px */
        div ul>li p { font-size:14px; }

继承

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

body {
     font-family: Verdana, sans-serif;
     }

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

CSS 层叠次序

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中 第四条规则（内联样式） 拥有最高的优先权。

• 浏览器缺省设置
• 外部样式表
• 内部样式表（位于 标签内部）
• 内联样式（在 HTML 元素内部）

css选择器

1. id类选择器 #name（不常用）
2. class类选择器 .name（不常用）
3. 标签选择器（不常用）
4. 混合类选择器（越详细优先级越高）（常用）

CSS

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; … declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。属性大于1个之后，属性之间用分号隔开，如果值大于1个单词，则需要加上引号（p{font-family:"sans serif";}）

值的不同写法和单位

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：

p { color: #ff0000; } 

为了节约字节，我们可以使用 CSS 的缩写形式：

p { color: #f00; } 

我们还可以通过两种方法使用 RGB 值：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

多重声明

提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红 色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上 分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：

p {text-align:center; color:red;}

你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p 
{ 
text-align: center; 
color: black; 
font-family: arial; 
} 

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

body 
{ 
color: #000; 
background: #fff; 
margin: 0; 
padding: 0; 
font-family: Georgia, Palatino, serif; 
}

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。