学习css也有些时日了，对之并没有一个宏观的概念，只是知道是写样式、要做到层次的分离，遇到具体问题停留在能解决但却不知道效率等更高层面的东西，今天记于此，开始学习此书，陆续更新笔记和心得~
第一章：良好结构的意义
早期的网页为增加表现力，导致代码臃肿混乱，布局极其容易被破坏。那就是个nightmare。典型的问题:标记语言成为表现标签，最为突出的就是table作为表现数据的标签变成布局的工具。 好处有许多，列举几条自己深有体会的 1，显著减少工作量 2 增加SEO的友好型 3 跨平台的友好性。
具体我们应该怎么做，以下是几条提示：
1.使用Class和ID命名时，要根据其具体的意义而不是表现样式来命名；
例如：网站的重要的新闻标题：可以命名为important_news_title 尽量不要为了表现红色命名为red_news_title ,因为我们需要让后期维护者也能明白，这个类主要是那些元素的样式，同时随着文档结构的增加，我们自己后期如果希望修改时可能也会迷惑它为什么是红色的。
2.尽量简化文档结构，避免大量的依赖使用类
简单的文档结构可以加快解析速度，提高页面性能。
3.采用符合其意义的标签
div标签的意义：division。p :paragraph; h:header; and so on!
4.微格式
个人目前如此理解：为了便于提取和识别特定的数据，制定的一个专门的标准 （目前为特定增加属性） 具体数据如联系信息 日期 产品说明 原料和烹调过程等等
下面的代码是微格式的表现形式
具体的更为深入的理解 有2篇好文
http://www.zhangxinxu.com/wordpress/?p=2058
http://ablognotlimited.com/index.php/articles/getting-semantic-with-microformats-part-6-hresume/
<div class='vcard'> <p> <a class='url fn' href='http://andybudd.com'>andybudd</a> <span class='org'>Clearleft Ltd</span> <a class='email' href='mailto:info@andybudd.com'>info@andybudd.com </a> </p> <p class='adr'> <span class='locality'>Brighton</span> <span class='country-name'>England</span> </p> </div>
好处在哪里？？？？刚开始 我也是一脸的懵逼，拜读上面的博客得出最好的结论有二，1，对搜索引擎各种友好，例如可以显示一个商家的地址 时间 评论信息等 2.对设备的友好
当然目前据说浏览器的支持情况是个大鸭蛋。但必定是一个好的方向，尤其对于SEO来说！
第二章：找到应用样式的目标
css极大地方便了我们的工作，使我们可以精确的控制、表现标记的内容。但如何做到样式表的简单易用却表现力丰富却是需要一个有大局观的头脑，我们需要对页面的元素有个宏观的把握同时也需要精通css选择器的各种技巧。
选择器使用的几条提示：
1.通过类名和ID结合后代选择器的使用 ；
类名和ID结合后代选择器的使用可以对我们的元素有着精确的控制的同时 减少了类的数量。这种方法有利于精简代码，便于理解css的后期维护。
例如：
#main-content h2{font-size:18px;}
#secondary-content h2{font-size:14px;}
<div id='#main-content'>
<h2>人工智能是否比人脑聪明</h2>
<p>近日，在韩国首尔举行的。。。。。</p>
</div>
<div id='#secondary-content'>
<h2>西湖--不可辜负的地方</h2>
<p>烟雨朦胧的七月。。。。。</p>
</div>这个小栗子中，如果我们直接给H2标签加类并设置属性值，当然也可以实现要求的效果，但在通用性上和可维护性上却显得差了好几个档次。
2.不要使用通配符 * 清除标签的默认样式 ；
为了省事，很多时候我也会直接* padding:0 ; margin:0; 看似省事，却导致解析的速度降低，css在加载时候需要将所有的标签（不管是否在页面中用到的一切标签）均初始化。
当时通配符也自然有其妙用。比如
.first-title>li {
background: url(1.png) no-repeat left top;
background-size: 20px ;
padding-left: 20px;
list-style: none;
}
</style>
</head>
<body>
<ul class='first-title'>
<li>中国</li>
<li>美国</li>
<li>欧盟
<ul>
<li>德国</li>
<li>意大利</li>
<li>英国</li>
<li>French</li>
</ul>
</li>
<li>中东</li>
<li>非洲</li>
</ul>.first-title li{
background: url(1.png) no-repeat left top;
background-size : 20px;
padding-left: 20px;
list-style: none;
}<pre name="code" class="html">abbr[title]{
border-bottom: 1px dotted #F00;
}
abbr[title]:hover{
color: #F00;
font-weight: bold;
}
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>.first-title li *{background:none;padding-left: 0;}
突然发现打脸了。效果如下
然而并没有什么卵用 问题有2个 1.png不识别问题 所以需要加入一个js 解决识别问题 2.* 没有解决问题 需要换成ul li 才能起作用
等有空，我在查询下有没有更好的解决办法 这个叫尽信书不如无书吧。/(ㄒoㄒ)/~~
3.一些缩写、人名、时间、地点等信息采用对应的标签 ；
1.显示上就会有所不同，增加对用户的友好性 2 对其他设备的友好，利于跨设备的使用；
abbr[title]{
border-bottom: 1px dotted #F00;
}
abbr[title]:hover{
color: #F00;
font-weight: bold;
}
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>鼠标放上WHO就会告知用户该词的真正含义。
4.CSS文件的规则；
1.css文件个数越大加载速度越慢，css个数越多加载速度越慢，因此需要平衡css文件的数量和大小
2 css代码可分为若干的几大块 顺序可参考书中提供的参考 1.一般性样式 2 辅助样式 3 页面结构 4 页面组件 5 覆盖 /*@group general style*/ /*@group help style*/ /*@group page struce*/
2467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
