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. docker on Mac

    贡献一篇: 云主机可以选择操作系统镜像快速创建主机,这比虚拟机更便捷了,我们本地也可以这么做了,因为有了 Docker 这个东西.它依赖于 LXC(Linux Container),能从网络上获得配置 ...

  2. 滚动新闻插件vticker

    vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB.vTicker 支持自定义滚动时间.间隔时间.显示个数.滚动方向(向上/向下).容器高度等等,但它对 HTML 结构有 ...

  3. 关于SWT中的Combo类和List类

    Combo类的谱系图: 一个Combo类的实例: Combo1.java public class Combo1 { public static void main(String[] args) { ...

  4. 【转】BUG敏感度的培养

    在我们刚踏入软件测试行业时,不管你是专业的.非专业的,培训出来的还是未培训的.刚进公司时你看着身边的同时报的Bug很多并且大都是严重程度高,自己也很想提高一下,想要提高自己的bug敏感度,建议从下面几 ...

  5. React组件生命周期过程说明【转】

    实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...

  6. 通过spring来配置某个命令号和执行方法之间的映射

    整理的内容 1.手动获取spring的ApplicationContext和bean对象 写一个工具类实现ApplicationContextAware接口 2.反射的知识整理 3.前后端协议交互的时 ...

  7. [01] Oracle数据库简介

    Oracle关系型数据库:建立在关系模型上. Oracle10g:g(grid)网格技术,网格计算(Grid Computing)通过网络共享,将大量的计算机连接起来,联合各个计算机的多余处理能力,产 ...

  8. oc 一些通用函数

    1 i= 0,1,2... unichar c = [self characterAtIndex:i]; //取出i这个位置对应的字符 2 拼凑字符串 [NSString stringWithForm ...

  9. asp：第三平台登陆

    第三平台登陆接口申请网址: http://open.51094.com/ 文档: 第三方合作登录平台使用说明 为方便更多的开发朋友,本人特将当前市面上所有支持第三方联合登录的接口集为一体,以前需要多次 ...

  10. unity发布ios游戏总结

    自己做了几个ios的小游戏,因此总结了一点经验 判断按钮要用unity里面的button不要用OnMouseDown()之类的函数,否则拒绝原因为缺少ios特征 排行榜之类的本地存储数据,不要用本地本 ...