css中的某些样式是具有继承性的。它允许样式不仅应用于某个特定html标签元素而且应用于其后代。
如:
p{color:red;}
<p>dsffd<span>sdfasdf</span>sd</p>
注意有些css样式是不具有继承性的。
如:
border:1px solid red;
这里的设计很合理css有个特殊性,标签的权值为1,类选择符的权值为10,id选择符的权值最高为100.注意,还有一个权值比较特殊,继承。继承也有权值但是它是最低的。突然就特么的出现了一个问题,如果在html中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权值怎么办?我就试了试另外一个功能,叫层叠层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
如:
p{color:red !important;} p{color:green;}
<p class="d">ddd<span>ppp</span>ddd</p>
注意!important要写在分号的前面(对的,你没看错。那里就是有个!号与impotent是一起的!!!建议在前面加上一个空格)
这里吧,还要注意一个东西。当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且有的蹩脚用户也会设置自己的浏览习惯样式。如果有的用户习惯把字体放(眼)大(睛)点(瞎),使其查看网页的文本更加清楚。这时就要注意了,毕竟用户都是吊大的那种。所以优先级:浏览器默认样式<网页制作者样式<用户自己设置的样式。但记住!important优先级样式是一个例(吊)外(大),权值高于用户自己设置的样式。设置字体这一块很简单,就是在style里面加上一行代码就足够。
如:
body{font-family:"某种字体"}
看需求,哪种要哪种字体,搞的定。注意一下,最好用官方语言。不要用中文,就是这个"某种字体"用官方语言,比如微软雅黑就是Microsoft Yahei 双引号也不要忘了!文字排版什么的,让你查手册你懒。我直接写了:
body{font-size:XXpx;color:xx}
就是这样!
粗体的话:
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;}
h1{letter-spacing:50px}
<h1>233333</h1>
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>