首页 > 代码库 > css基础和心得（二）
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>
 |
css基础和心得（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。