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>
|