文字段落排版

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

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

例如下面的代码：

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

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

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

  1. 如：   p{color:red!important;}

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

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

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

粗体

  1. span{font-weight:bold;}

斜体 

  1. span{font-style:italic;}

下滑线

  1. span{text-decoration:underline;}

删除线

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

文字滑动

不熬夜

段落排版:

缩进

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

行间距（行高）

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

间距

中文字或字母：

  1. h1{
  2.     letter-spacing:50px;
  3. }
  4. ...
  5. <h1>测试测试测试</h1>

单词：

  1. h1{
  2.     word-spacing:50px;
  3. }
  4. ...
  5. <h1>welcome to imooc!</h1>

对齐

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

发表评论

表情：
评论列表 （有 0 条评论，388人围观）

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

相关阅读

    相关 CSS图片文字排版03

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

    女爷i女爷i/ 0 赞/ 255 阅读

    相关 文字排版样式

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

    怼烎@怼烎@/ 0 赞/ 279 阅读

    相关 段落文字彩条效果

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

    朱雀朱雀/ 0 赞/ 309 阅读

    相关 CSS文字排版

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

    r囧r小猫r囧r小猫/ 0 赞/ 376 阅读

    相关 Bootstrap文字排版

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

    痛定思痛。痛定思痛。/ 0 赞/ 476 阅读