Html+CSS
2017-08-29 17:04 unique! 阅读(490) 评论(0) 编辑 收藏 举报来介绍几个新的元素
<header>标签定义文档的页眉（介绍信息）。
在一篇文档中我们可以划分三个主要部分，分别是head,body,foot， 而<header>就是负责head这个部分的标签了。header标签跟其他标签的用法是一样的，我们来看一个实例
那么我们在来学习第二个新标签<section>，<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。该标签有点类似于将一本书分成几个章节，每个section标签代表一节。一个section通常有内容和标题组成，通常不推荐那些没有标题的内容用section。
<article> 标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。简单来说article必须是完整的独立内容，不与上下相关联。
div section article ，语义是从无到有，逐渐增强的。div没有任何语义，仅仅用作样式化。对于一段有主题的内容块，则就适用 section，而如果这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。
<nav> 标签定义导航链接的部分。
前面几种元素都是块级元素因为块级元素占一行，行内元素无法设置宽高，如果想在一行放两个元素，还要设置宽高，那只用那两种就会有点麻烦了，所以还有这一种。
块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。例：<p><div>
行内元素：一个行内元素只占据它对应标签的边框所包含的空间。例：<span>
总是在新行上开始，默认宽度占父级元素宽度100%，可以设置宽高等属性就是块级元素，div、p、header、section等都是块级元素
和其他元素在一行，宽高由内容决定的元素就是行内元素，span、i、a等就是行内元素
有一点要注意哦，就是行内元素内部不能包涵块级元素，你想想，块级元素宽高由父级元素决定，而行内元素宽高由内容决定，把块级元素放在行内元素里面，就会产生矛盾。还有一种行内块级元素，可以一行放多个的块级元素。因为块级元素占一行，行内元素无法设置宽高，如果想在一行放两个元素，还要设置宽高，那只用那两种就会有点麻烦了，所以还有这一种。但是html标签中却没有这种类型的标签
那我们就通过css来设置，css中有一个display的属性，可以设置inline、block、inline-block等几个不同的值
display:inline; 设置这个属性的元素就会变成行内元素，不论之前是块级元素还是行内元素。而且设置的宽高也会失效哦。
display:block; 设置这个属性的元素就会变成块级元素，不论之前是块级元素还是行内元素。
display:inline-block; 嗯~这个不用多说了吧，行内块级元素
如果我们要将四个模块的样式换掉，那我们就要改四个地方，那样太麻烦了，我们可以将模块的样式抽离出来
这样就看起来简单多了，还有一种方法是建立一个.css的文件，将样式表放到文件中
假如你有两个页面，两个页面的div样式都是一样的，只是内容和字体不同，这时我们就可以定义一个公共样式表，两个页面都可以引入
这时候我们要给小男神页面的内容换个颜色，并且不影响小仙女页面，要怎么做呢？
我们最常用的做法是在html02页面的css文件里修改。刚才的html.css文件是一个公共的css文件，除此之外每个页面都有一个单独的css文件，用来定义这个页面独有的样式。
我们在像之前一样，在创建一个css文件，命名为html02.css，并在html02.html文件里引入
html02.css文件一定要在html.css文件之后引入哦！
接下来我们来讲讲选择器
选择器，就是用来选择元素的。选择器有很多种，主要包括元素选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器。当然这不是全部的选择器种类，是最常用的部分。如果有小伙伴对其他选择器有兴趣可以自己在网上查找资料哦。
div{} ，这个其实就是元素选择器，很简单吧，就是根据元素名写的。当你的css里这么写了，在页面加载的时候，浏览器会给引入这个css文件的页面的所有div加上这个css样式。所以那个页面的所有div都有了同样的样式。
类选择器是选择一类元素，而这个类型是由开发者自己定的哦，我们来看一段代码：
class="left" 就是我们给第一个section定义的类选择器，而class="right" 就是我们给第二个section定义的类选择器
而在css文件中我们通过section的元素选择器给两个section定义了共有的样式，我们的第二个section元素定义了right这个class，所以他就有了这部分样式，宽度为600px。
本来两个section的宽度应该都是200px，但是第二个又用类选择器定义了600px的宽度，这里就会覆盖掉元素选择器里定义的宽度。这里涉及到样式覆盖的地方
第三种选择器是id选择器，这里我们就不多做介绍了，提醒一点：每个文档里的id选择器都是唯一的哦，就是说一个html文件里不能有两个一样的id选择器。
我们来看第四种选择器，通用选择器。我们来在html.css文件的开头加上如下代码：
网页上所有部分的文字字体大小是不是都一样了呢，都是14px了。这个 "*" 就是我们的通用选择器，
然后我们再来讲讲派生选择器，就是由之前的选择器演变而来，首先我们来说群组选择器。
图中高亮的部分就是一个群组选择器，当有多个选择器下有相同的属性时，可以写成一个群组选择器。图中header和section有一样的边框属性，所以我们写成了一个群组选择器。这样可以精简我们的代码，维护起来也很方便。
那么我们再看一个选择器，后代选择器。顾名思义，这个选择器就是选中一个元素的所有后代元素来添加样式。
这里就用到了子元素选择器，那个大于(>)符号指的是直接子元素。
".right > header"这个的意思是类选择器right的直接子元素header元素，就是我们html中的第二个section的子元素header。这样就会只修改类选择器为right的section元素中的header元素的样式。可能有点绕，多看几遍应该就好了。
然后我们在来讲讲伪类
伪类，你可以理解为伪造的类，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。它可以算是一种状态类，比如在有的网站上，有些文字或者图片，你鼠标放在上面会变样式，就是用伪类实现的
然后在浏览器里查看，是一个蓝色的正方形，当你把鼠标移上去的时候背景色就会变哦
是不是很神奇，这里就用到了":hover"伪类，当用户的鼠标悬停在相应的元素上时，该元素就会渲染伪类里定义的样式。你可以把hover改成active在试试，当鼠标按下去的时候，元素的背景色就会变成相应的样式。
你可以把hover改成active在试试，当鼠标按下去的时候，元素的背景色就会变成相应的样式。
接下来我们来写这样一段代码
在浏览器里查看效果，应该是这样的一个列表：
这时候我们想给列表里每一项下面加一条横线类分割，可能以前你会用一个分割线的元素来做，但是这样会额外多写很多html元素。我们的新方法是用元素的边框来做分割线。首先在css代码中加入这一行代码：
这时候分割线就已经有了吧，不过有个小问题，就是最底下的边框变宽了。不要急，这时候就用到了另外一种伪类：":last-child"
加上这段代码你再看看效果，是不是全部都OK啦。这个伪类的作用就是指向当前选择器选中的元素组的最后一个。在这段代码就是在 ".list li" 这个派生选择器命中的元素组中选出最后一个元素来指定样式。
既然有选出最后一个元素的伪类，当然也会有选出第一个元素的伪类啦，它就是 ":first-child"，这里我们就不多做介绍，自己试一试就知道啦，会了上一个这个自然就会了。
伪类我们说是伪造的类，伪元素我们也可以说是伪造的元素，伪元素可以显示在页面中，但在dom树中却没有。也可以说它是通过css创建的元素，而不是通过html创建的。
说在多也没有实际的例子来的清楚，还是接着刚才的例子，html代码不变，在css文件里添加如下代码：
这就是伪元素了，可以看到我们的html里并没有那个元素，有before当然也有after
再来一个ＣＳＳ的内容，就是媒体查询
媒体查询，这里的媒体不是平时我们说的那个新闻媒体，跟媒介比较接近。它的意思是查询媒体特征，当媒体类型匹配展示文档所使用的设备类型，会应用相应样式表或样式规则。
然后你按照页面上的文字操作，拖动浏览器窗口大小，当窗口宽度大于900px的时候和小于900px的时候，字体颜色是不是会变。
这就是一个简单的媒体查询了。当满足"@media()"括号中的条件时，就会应用其中的样式规则了。有一点要注意，默认样式要写在媒体查询之前。否则媒体查询的效果会被覆盖的哦。有时候只是适应大小两种尺寸可能不能完全满足用户需求，那么我们也可以这么做：
我们已经学习了关于样式规则的写法，接下来我们来看看关于匹配不同样式表的写法
既然是加载不同的样式表，当然需要在新建一个css文件。css代码如下：
这里我们引入了两个样式表，但是只会加载一个，当浏览器窗口尺寸不同时，会根据条件加载对应的一个。你可以通过改变浏览器窗口大小来看看效果。
