html一些基础用法

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样式会被应用。

插一句题外话,我感觉这个功能真的是motherfucker...完全没有任何卵用的。就近原则的意思嘛。可以这么理解?就是取最后一个值,是什么就是什么。那么。。WTF?写前面的干什么的????后来的知识让我明白,原来是我懂的太少了。所以希望各位学习知识的时候,一定要谦虚。。。有些特殊情况需要为某些样式设置具有最高权值,这个时候用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: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;}
后面的设定就可谓是惊天地泣鬼神的设定了,段落排版。这种高科技的事情一般都是文字编辑做的活,我们又跨行业了!!!这就是段落排版。中文字间距、字母间距。如果想在网页排版中设置文字间隔或者字母间隔就可以用:letter-spacing
来实现,如:
h1{letter-spacing:50px}
<h1>233333</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>


原文链接:,转发请注明来源!
「html一些基础用法」评论列表

发表评论