文字段落排版

权值的规则:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

例如下面的代码:

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

某些样式设置具有最高权值,这时候我们可以使用!important来解决。

如:   p{color:red!important;}

注意:!important要写在分号的前面

文字排版--字体、字号、颜色

  例子: body{font-family:"宋体";font-size:12px;color:#666 }

粗体

span{font-weight:bold;}

斜体 

span{font-style:italic;}

下滑线

span{text-decoration:underline;}

删除线

.oldPrice{text-decoration:line-through;}
........
<p >原价: <span class="oldPrice"> 300</span>元,现价:100元 </p>

段落排版:

缩进

p{text-indent:2em;}          //2em的意思就是文字的2倍大小。

行间距(行高)

p{line-height:1.5em;}               //实现设置段落行间距为1.5倍。

间距

中文字或字母:

h1{
    letter-spacing:50px;
}
...
<h1>测试测试测试</h1>

单词:

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

对齐

h1{
    text-align:center/right/left;
}
<h1>好一个俊俏的小人儿</h1>

猜你喜欢

转载自blog.csdn.net/weixin_40980087/article/details/81430782