文字段落排版

àì夳堔傛蜴生んèń 2022-05-17 02:24 289阅读 0赞

权值的规则：**标签的权值为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>

<marquee style="width: 30%"> 文字滑动</marquee></br>

<del>不熬夜</del>

--------------------

段落排版:

缩进

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS图片文字排版03

实现思路主要技术主要使用CSS属性visibility: hidden;将p标签文字隐藏起来，再通过：hover选择器来改变类card的高度，将p标签文字visibil

女爷i/ 2022年11月29日 11:26/ 0 赞/ 193 阅读

相关 CSS图片文字排版01

实现思路通过clip-path属性剪切不同时刻图片大小，开始，给h2，p，a标签影藏并使用transform: translateY()属性，设置不同的偏移量，通过:h

素颜马尾好姑娘i/ 2022年11月27日 12:11/ 0 赞/ 204 阅读

相关文字排版样式

<template> <view class="content"> 律师工作是知识性和智慧性工作。目前人们选择职业时，不仅希望得到较高的收入

怼烎@/ 2022年11月19日 04:14/ 0 赞/ 218 阅读

相关英文段落排版

![SouthEast][] [SouthEast]: /images/20220810/053a8f21be1d476dac2c6b2c9e5bce70.png

爱被打了一巴掌/ 2022年08月12日 00:14/ 0 赞/ 199 阅读

相关段落文字彩条效果

程序媛and程序猿，兄弟姐妹们，大家周末好，我们今天来研读一下利用纯css实现段落文字的彩条效果。有朋友就说了，不就是css3的渐变吗，最多加上webkit内核的-webkit

朱雀/ 2022年08月06日 17:03/ 0 赞/ 228 阅读

相关 CSS文字排版

时间：2017年4月27日13:35:27 [《我的博客地图》][Link 1] 对于前端开发人员来说，虽然大部分时间用来处理页面布局和业务逻辑问题，但对于

r囧r小猫/ 2022年06月17日 13:37/ 0 赞/ 317 阅读

相关 textView排版文字对齐

具有特殊字符半角全角字符时排版文字对齐 import android.content.Context; import android.graphics.Can

偏执的太偏执、/ 2022年05月20日 08:23/ 0 赞/ 324 阅读

相关文字段落排版

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码： p{color:red;} /权值为1/ p span{

àì夳堔傛蜴生んèń/ 2022年05月17日 02:24/ 0 赞/ 290 阅读

相关 Bootstrap文字排版

bootstrap中的文字排版就像word的标题一标题二。。。一样，这样可以拿来区分很多字节，简要的代码如下（注意bootstrap页面中每个都会引入这是基础样式！！

痛定思痛。/ 2021年12月21日 11:07/ 0 赞/ 374 阅读

相关 css文字与排版

文字与排版样式 `font`文字样式

谁践踏了优雅/ 2021年06月26日 16:06/ 0 赞/ 598 阅读