css基础和心得（二）

css中的某些样式是具有继承性的。它允许样式不仅应用于某个特定html标签元素

而且应用于其后代。如: p{color:red;}  <p>dsffd<spans>sdfasdf</span>sd</p>

注意有些css样式是不具有继承性的。如border:1px solid red;这里的设计很合理

css有个特殊性，标签的权值为1，类选择符的权值为10，id选择符的权值最高为1

00.

注意，还有一个权值比较特殊，继承。继承也有权值但是它是最低的。

突然就特么的出现了一个问题，如果在html中对于同一个元素可以有多个css样式

存在并且这多个css样式具有相同权值怎么办？我就试了试另外一个功能，叫层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的

样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被

应用。

插一句题外话，我感觉这个功能真的是motherfucker...完全没有任何卵用的。就

近原则的意思嘛。可以这么理解？就是取最后一个值，是什么就是什么。那么。。

what the fuck?写前面的干什么的？？？？后来的知识让我明白，原来是我懂的太

少了。所以希望各位学习知识的时候，一定要谦虚。。。

有些特殊情况需要为某些样式设置具有最高权值，这个时候用important来解决。

如：p{color:red!important;}

    p{color:green;}

    <p class="d">ddd<span>ppp</span>ddd</p>

这时，p段落里面的文本会变成红色red.

注意!important要写在分号的前面（对的，你没看错。那里就是有个!号与impotent

是一起的！！！）这里吧，还要注意一个东西。当网页制作者不设置css样式时，

浏览器会按照自己的一套样式来显示网页。并且有的蹩脚用户也会设置自己的浏览

习惯样式。如果有的用户习惯把字体放（眼）大（睛）点（瞎），使其查看网页的

文本更加清楚。这时就要注意了，毕竟用户都是吊大的那种。所以优先级：浏览器

默认样式<网页制作者样式<用户自己设置的样式。但记住!important优先级样式是

一个例（吊）外（大），权值高于用户自己设置的样式。

设置字体这一块很简单，就是在style里面加上一行代码就足够。

如：body{font-family:"某种字体"} 看需求，哪种要哪种字体，搞的定。注意一

下，最好用官方语言。不要用中文，就是这个"某种字体"用官方语言，比如微软

雅黑就是Microsoft Yahei 双引号也不要忘了！

文字排版什么的，让你查手册你懒。我直接写了：body{font-size:XXpx;color:x

x}就是这样！

粗体的话:p span{font-weight:blod;}

斜体的话:p a{font-style:italic}

下划线是:p a{text-decoration:underline;}

有些电商网站，比如某宝，原价上面会有个删除的横线，这一点也很简单。

如:.oldPrice{text-decoration:ine-through;} 嗨~小白们~这里的.oldPrice是

什么呢？就是这样固定用法嘛？NO！这是选择器中的类选择器！不懂的可以回过头

复习一下了哦~~~~~

中文文字中的段落前面习惯有两个空格，这个蹩脚的设定不知道是哪位老祖先设

定出来的高(S)端(B)设定。然后自然而然也是有办法解决的。一行代码：p{text

-indent:2em;}这个em之前有用到过，可以反观一下之前的内容。一定要复习~~~

注意啊，2em的意思就是文字的2倍大小。

既然有前面的空格，自然也要有上下的空格，也就是行距。同样的，一行代码解

决：p{line-height:1.5em;}

后面的设定就可谓是惊天地泣鬼神的设定了，段落排版。这种高科技的事情一般

都是文字编辑做的活，我们又跨行业了！！！这就是段落排版。中文字间距、字

母间距。如果想在网页排版中设置文字间隔或者字母间隔就可以用:letter-spacing

来实现，如：

h1{

   letter-spacing:50px

}

<h1>了不起的大宝！</h1>

这个样式使用在英文单词时，是设置字母与字母之间的距离。那么问题来了：学

挖掘机到底哪家。。。sorry，走错片场了。那么如何设置英文单词之间距离呢？

可以使用word-spacing来实现。如：

h1{

  word-spacomg:50px;

}

<h1>what the fucker!</h1>

这样很简单的吧、哈哈哈哈、但是出现了两个问题，第一，为什么不用em?第二

如果要输出的字符是这样："超级帅的funck"怎么办？？？这个问题留给你们。用

已经学会的知识就可以解决，我用了30秒~~~

然后就是段落排版的对齐问题。说白了，就是居中，靠左，靠右。同样一行代码：

h1{text-align:center;}  h1{text-align:left;}  h1{text-align:right;}

是不是不好记？很简单。中间：center 左边left 右边right 前面记住那一小段

现在说元素的分类。一共有三种类型：块状元素、内联元素（又称行内元素）和

内联块状元素。

常用的块状元素有：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>

<blockquote>,<form>说实话，常用的我只有一个不常用，就是<blockquote>于是

我查了一下资料（记住，不懂的东西一定要查手册，不要乱猜，也不要随便就过

去了，这样绝逼不是当程序员应该有的态度！！！老夫从前是深受其害的！！！）

然后找到了这个标签的意思。<blockquote>与<blockquote>之间的所有文本都会

从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有

时会使用斜体。也就是说，块引用拥有它们自己的空间。但是据我跟bejson群里

的大神们讨论，发现，这个标签页不是常用的。好吧好吧。继续说。。

常用的内联元素有：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,

<cite>,<code>

常用的内联块状元素有：<img>,<input>