html5模板

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>我是html5模板</title>

    </head>

    <body>

        <!-- 这里是主体代码 -->

    </body>

</html>

1、在xhtml中基本的文档结构是非常复杂的，可以说是记不住的，以至于只能事先存好一个包含基本文档结构代码的文件，每次开发时都使用它，这带来了诸多不便。

但html5中的基本文档结构已经非常简单了，完全可以自己去手写，这不会花费你多少时间，但却大大的提高了编程的灵活性。

2、其中title标签很重要，千万不要省略，因为搜索引擎会给它很高的权重，这意味着你应该将那些你的目标用户搜索你网站时可能使用的关键词写到title标签中。

div、article和section

1、将整个html文档想象成一份报刊。

2、该报刊有房产、证券 、国际等多个板块。这每一个板块就是section。

3、在每一个板块下可以有很多文章，每一个独立的文章就是article。

4、当然，每一个独立的文章本身，也可能会分成若干板块，这些若干的板块就是section。

5、即section和article从语义上来说是可以互相嵌套的。

6、div就是一个不包含任何语义的块元素。

7、建议根据不同语义使用不同的标签，而不是一概使用div。这么做可以优化文档结构，使文档更便于控制和理解。

8、当整个文档嵌套太深以至于一团混乱的时候，你就应该思考重新设计文档结构了。

import指令

@import url(style.css);

可以在一个css文件中引用其它css文件。

但该指令必须出现在其它所有样式代码之前，否则无效。

选择器查漏补缺

层次选择器

获得section元素下的 所有 非子 后代 a标签 元素。

section * a {......}

如果我们想获得section元素的所有 子元素 a标签，可以使用

section > a {......}

如果我们想获得section元素的所有 后代元素 a标签，可以使用

section a {......}

如果我们想获得section元素的所有 紧邻兄弟元素 a标签，可以使用

section + a {......}

如果我们想获得section元素的所有 后面的兄弟元素 a标签，可以使用

section ~ a {......}
多类选择器
<p class="testOne testTwo"></p>

可以看到对于html代码来说，class属性是允许使用两个属性值，并以空格分隔。

而在css代码中可以使用

.testOne.testTwo {......}

来操作它。

可以看到.testOne和.testTwo之间是没有空格的，因为有了空格表示的就是后代元素关系；同样它们之间也没有逗号，因为有了逗号表示的就是或的关系；而现在既没有空格也没有逗号表示的才是与的关系。

页内导航
<a href="#">返回顶部</a>

如果在开发中你不知道需要将a标签中的href属性设置成什么值，可以直接将它设置成#号，在写后台程序的时候，可以统一将#号替换成数据库中的url，以达到动态变换超链接导向的目的。

其它：

直接使用#号表示返回顶部。

<a href="#test">返回顶部</a> 

<div id="test">come here~~~</div>

点击这个超链接会跳转到页面中id为test的地方，它实现的效果是页内导航。

伪元素

1、伪元素和伪类不是一个东西。伪元素使用::两个冒号，伪类使用:一个冒号。

2、伪元素表示得是页面中那些并不实际存在的元素。

3、伪元素不利于seo，它不会被搜索引擎找到。所以对于那些可能被用户搜索的重要信息，就不要放到伪元素中去了。

我们来看看::before和::after这两个伪元素吧

<p class="age">25</p>
p.age::before {

    content: "年龄： ";

}

p.age::after {

    content: " 岁。";

}

最后显示出来的就是:

年龄： 25 岁。

这不是我想要的样式！

在使用css的过程中总会遇到这么一种情况：我们对某个元素应用了某种样式，但是显示结果却不是我们所预想的，这是为什么呢？

我们可以将css世界的规则简化成三个基本规则：

以下三大规则按优先级先后排列。即继承>权重>位置。

1、继承

2、权重

3、位置

关于继承

1、所有后代元素都会继承其祖先元素的部分规则，之所以是部分规则，举例说明下：

一个祖先div元素的规则中包括字体和边框的颜色。它的后代元素a标签会继承它的字体颜色却不会继承边框颜色，这是显而易见的。

2、一个后代元素的祖先元素有很多，当祖先元素们都对某一元素设定了规则而产生冲突的时候，会继承最靠近自己的祖先元素（可能是父元素）的规则。

这一规则延伸理解，即最靠近自己的祖先元素就是自己本身，所以自己本身的规则优先级绝对大于所继承来的规则，这个规则是三大规则中的至高规则。

换句话说，即如果一个css样式的权重值非常高，但却是继承所得，而另一css样式的权重值相对较小，但却是直接作用于该元素的。那么结果将是后者获胜。

关于权重

当某一元素自己本身的规则有多个（即这些规则都不是继承所得）而产生冲突的时候，我们就需要去计算这些多个规则分别的权重值，权重值高者获胜，而计算权重值有一个简单的方法：

ICE原则

I表示id

C表示class

E表示元素element

我们根据定位到该元素的选择器中的id、class、元素的个数计算得到一个3位数。id表示百位数、class表示十位数、元素表示个位数。

举例说明：

div#test .tt {.....}

在这个css选择器中，它的权重值为：

一个id#test，一个.tt类，一个div元素。所以最后权重值为：111

div#test span.tt #link {.....}

同理，这个css的权重值为：212

以上介绍的是计算权重值的基本方法，但是有一个例外，那就是 !important。 当一个css规则中加入了 !important的时候，它的权重值就直接变成最高了。

比如：

p {

  color: green !important;

  font-size: 12px;

}

在这个css规则中，由于p标签的color规则应用了!important，所以它的权重值最高，以后所有p标签的颜色都将变成绿色，即使有另外一条css规则如下:

p#test {

  color: red;

}

虽然后者计算所得权重值大于前者，但是由于前者的color规则添加了!important，所以最后显示的颜色还是绿色，而不是红色。

关于位置

行内样式 > 内嵌样式 > 链接样式

注意，只有当权重值相同的情况下，才会去判断位置。换句话说就是如果一条css规则的权重值比较大，不管它是行内样式还是内嵌样式它都能获胜。

CSS随手记的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. html+css手记

    ----------------------html定义和基本结构---------------------- HTML是 HyperText Mark-up Language 的首字母简写,意思是超 ...

  3. 站点CSS样式不起作用，或仅仅有一部分起作用？随手记

    事件:网页中使用了相同的样式,下半部分正常显示,上半部分样式所有丢失不能显示. 解决:改动了相应的CSS样式文件的编码 这个是最没有想到的解决的方法. 怎样调试:通过右键页面查看编码为UTF-8 或 ...

  4. 《PHP, MySQL, Javascript和CSS》读书随手记----MySQL篇

    一 基础 要求结尾分号 如果在命令输入期间想要终止其运行,不要Ctrl-C. 要输入\c,并按回车键. sql命令和关键字不区分大小写. 表名在windows中不区分大小写,但是在linux和os x ...

  5. 《PHP, MySQL, Javascript和CSS》读书随手记----php篇

    1. 基础 注释: // 或 /* */ $标示变量 语句末尾加分号 数组: $oxo = array(array('x','','o'), array('p','x',''),array('','x ...

  6. Linux.NET实战手记—自己动手改泥鳅（上）

    各位读者大家好,不知各位读者有否阅读在下的前一个系列<Linux.NET 学习手记>,在前一个系列中,我们从Linux中Mono的编译安装开始,到Jexus服务器的介绍,以及如何在Linu ...

  7. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  8. [小北De编程手记] : Lesson 08 - Selenium For C# 之 PageFactory & 团队构建

    本文想跟大家分享的是Selenium对PageObject模式的支持和自动化测试团队的构建.<Selenium For C#>系列的文章写到这里已经接近尾声了,如果之前的文章你是一篇篇的读 ...

  9. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

随机推荐

  1. kali linux 2.0 折腾笔记

    1. 配置SSH远程登录 root@kali:~# vi /etc/ssh/sshd_config #PermitRootLogin without-password PermitRootLogin ...

  2. gcc的使用

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/6065410. ...

  3. [转]Oracle开发专题之：%TYPE 和 %ROWTYPE

    本文转自:http://www.cnblogs.com/kingjiong/archive/2009/02/19/1393837.html 1. 使用%TYPE 在许多情况下,PL/SQL变量可以用来 ...

  4. Oracle报错：ORA-01747: user.table.column, table.column 或列说明无效

    1.检查sql书写正确性 2.如果sql书写正确,则是由于数据库列名起的不好引起的,名字用到了数据库的关键字. 如果列很多,又不好确定是哪个列名使用了关键字,以下建议可供参考: 我用以下方法定位 se ...

  5. .NET学习笔记（2） — IIS服务器环境搭建

    目录 一:开启Windows系统自带的IIS服务器方法 二:备注 三:常见问题     一:开启Windows系统自带的IIS服务器方法   第一步:安装IIS,控制面板->程序和功能-> ...

  6. dede-搜索

    <form name="formsearch" action="{dede:global.cfg_cmsurl/}/plus/search.php"> ...

  7. 组装和拆分JSON

    1.组装JSON                     rs["msg"] = "success";                     rs[" ...

  8. 谈谈asp.net中的<% %>,<%= %>,<%# %><%$ %>的使用

    学而不思则罔,思而不学则殆,每天坚持一小步,则成功一大步 asp.net中的<% %>,<%= %>,<%#eval("") %><%$ ...

  9. ###学习《C++ Primer》- 4

    点击查看Evernote原文. #@author: gr #@date: 2014-10-16 #@email: forgerui@gmail.com Part 4: STL关联容器(第11章) 一. ...

  10. 第六篇、CSS属性

    <!--1.可继承性 visible(可见的):hidden --掩藏,但是结构还保存 cursor(光标样式):pointer(手指)crosshair(十字架) 一般是文字控制属性 内联标签 ...