精华内容
下载资源
问答
  • text-indent:2em;

    text-indent:2em;

    展开全文
  • CSS中三种最基本的选择器: 标签选择器 类选择器 ID选择器 标签选择器 一个 HTML 页面是通过很多标签组成的,CSS 标签选择器就是用来声明这些标签的,因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称...

    CSS中三种最基本的选择器:

    • 标签选择器
    • 类选择器
    • ID选择器

    标签选择器

    一个 HTML 页面是通过很多标签组成的,CSS 标签选择器就是用来声明这些标签的,因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。

    示例:

    下面是一段html代码:

    <!DOCTYPE>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CSS学习</title>
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body>
            <h3>学习</h3>
            <p>我爱学习,学习使我快乐。</p>
        </body>
    </html>
    

    如果我们要为这两个标签定义 CSS 样式,就可以直接在 .css 文件内通过标签选择器来声明样式:

    h3{
        color: red ;
    }
    p{
        color: green;
    }
    

    CSS 语法就是由选择器和**声明块 {}**组成,每个声明块中可以包含一个或多个样式声明,并且每条声明后面以分号 ; 结尾。

    除了上述例子中的 ph3 标签可以作为标签选择器,其他的例如htmlbodyaimg等标签都是可以作为标签选择器的。

    类选择器

    类选择器用于描述一组标签的样式,一个类选择器可以在多个标签上使用。
    语法:

    .class_name{
    
        属性:属性值;
    }
    

    类选择器前面必须有一个点 .,这个点必不可少,是类选择器的标志。类选择器的名称 class_name 是自定义的,选择器中的属性和属性值跟标签选择器中一样。

    示例:
    html代码:

    <!DOCTYPE>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CSS学习</title>
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body>
            <h3>动物园</h3>
            <p class="rabbit">小白兔</p>
            <p>小狮子</p>
            <p>小老虎</p>
            <p>小猴子</p>
        </body>
    </html>
    

    要给“小兔子” 字体样式设置为粉色加粗,可以自定义一个类选择器:

    .rabbit{
        color: pink;
        font-weight: bold;
    }
    

    然后在 HTML 标签上通过 class 属性来使用定义好的类样式,格式为:

    <标签名 class="类名称">标签内容</标签名>
    

    类选择器有一个好处就是,我们可以在同一个页面中多个 HTML 标签上,使用同一个类选择器

    ID选择器

    • ID 选择器的是以井号#开头来定义的。而类选择器是以点.来定义的。
    • ID 选择器在 HTML 中是可以通过id属性来使用。而类选择器是通过class属性来使用的。
    • 同一个页面中一个ID选择器只能在中出现一次,是唯一的。而类选择器可以在多次出现,所以ID选择器的针对性更强。

    示例:

    通过#来定义一个ID选择器,设置背景颜色为粉色的样式:

    #only{
        background-color: pink;
    }
    

    然后在 HTML 中通过 id 属性使用这个ID选择器:

    <!DOCTYPE>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CSS学习</title>
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body>
            <h3>动物园</h3>
            <p class="rabbit">小白兔</p>
            <p>小狮子</p>
            <p>小老虎</p>
            <p id="only">小猴子</p>
        </body>
    </html>
    

    最后

    基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack、git、node学习的再好也无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多,并不是理解就ok了,有些是真的要去记。当然了我们是牛x的前端工程师,每天像背英语单词一样去背知识点就没必要了,只要平时工作中多注意总结,面试前端刷下题目就可以了。

    什么?你问面试题资料在哪里,这不是就在你眼前吗(滑稽

    资料领取方式:戳这里免费领取

    展开全文
  • 当页面或列的宽度太窄而无法容纳行时,通常需要使用连字符。 它可以使段落以适当的间距对齐,并且还可以最大程度地减少河流的出现,这是因为将单词分开。 为了进行比较,让我们看下面的屏幕截图,注意单词之间的...

    当页面或列的宽度太窄而无法容纳行时,通常需要使用连字符。 它可以使段落以适当的间距对齐,并且还可以最大程度地减少河流的出现,这是因为将单词分开。

    为了进行比较,让我们看一下下面的屏幕截图,注意单词之间的间距。

    我们已经能够在印刷媒体中对段落进行断字了,但是直到最近,我们才能够使用名为hyphens的新CSS3属性来对段落进行断字,尽管缺乏浏览器的支持。

    在撰写本文时,此新属性hyphens仅在带有前缀的Internet Explorer 10,Firefox 6 +,Safari 5.1+中受支持-令人惊讶的是,它尚未在Chrome中实现。

    用法

    hyphens属性接受两个值automanualauto值将使浏览器在适当的时候自动为段落连字符。

    p {
    	text-align: justify;
    	-webkit-hyphens: auto;
       	-moz-hyphens: auto;
    	hyphens: auto;
    }

    这给我们以下结果。

    使用manual值,作为内容作者,我们需要通过插入&shy;来手动指定单词的拆分方式&shy; 字词之间的符号(Soft Hyphen)。

    <p>Lorem ipsum dolor sit amet, consect­etur adipisic­ing elit, sed do eius­mod tempor incididunt ut labore et dolore magna ali­qua [...]</p>
    p {
    	text-align: justify;
    	-webkit-hyphens: manual;
       	-moz-hyphens: manual;
    	hyphens: manual;
    }

    根据段落的长度,结果可能会有所不同。

    结论

    如果所有浏览器都支持此功能,我相信Web上的段落会更好地显示。 在此之前,有一个使用名为HyphenatorJavaScript库的不错选择,该库具有更好的兼容性并且还可以在许多语言中工作。


    翻译自: https://www.hongkiat.com/blog/css3-hyphenation/

    展开全文
  • text-indent属性可实现首行缩进

    text-indent属性可实现首行缩进

    1、首先应用缩进CSS属性:text-indent

    2、单位准确的选择:

    1. px单位

    如果知道字体大小,而且是固定的可以使用px作为缩进值单位。

    如果字体大小在12px,设置text-indent:24px(24px左右即可)。

    1. em单位(强烈推荐)

    em是相对长度单位

    无论字体大小设置多少,em单位作为缩进样式单位,即可自适应实现要缩进文字长度。

    text-indent:2em 设置2em,就能实现无论字体大小设置多少,都能自适应缩进2个字的距离空格效果。

    3、缩进2个汉字位置实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Text-indent属性设置缩进两字符</title>
      <style type="text/css">
        div {
          width: 200px;
          padding: .5rem;
          margin: 1rem auto;
        }
    
        .f12 {
          font-size: 12px;
        }
    
        .f20 {
          font-size: 20px;
        }
    
        .indent {
          text-indent: 2em;
        }
    
        .negative-indent {
          text-indent: -2em;
        }
    
      </style>
    </head>
    <body>
    <div>
      <p class="f12 indent">字体大小12px,需要缩进2汉字,需要缩进2汉字</p>
      <p class="f20 indent">字体大小20px,需要缩进2汉字,需要缩进2汉字</p>
      <p class="f20 negative-indent">字体大小20px,我是负的缩进</p>
    </div>
    </body>
    </html>
    

    效果

    展开全文
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... 无标题文档 ...*css设置段落文字首行缩进2字符文字靠左侧显示,文字间距0.5像素 */ #test{ text-align:left; text-indent:2em; letter-
  • HTML正文首行缩进2字符

    千次阅读 2019-05-03 11:42:04
    HTML正文首行缩进2字符 <style type="text/css">...引用text使首行缩进2字符 举例: <div class="text"> <br> <div align="justify"> <span class="STYLE28...
  • 使用CSS实现首行缩进效果

    千次阅读 2019-09-04 09:45:43
    CSS中,可以使用text-indent属性来实现首行缩进效果。text-indent属性用于定义每个文本块中第一行的缩进;它可采取负值。如果使用负值,那么首行会被缩进到左边。下面本篇文章就来给大家介绍一下text-indent属性,...
  • 段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定...用CSS实现段落首缩进两个字符,实现首行缩进的通用方法是加四个小角空格。 在style里定义如下缩进
  • html首行缩进2字符,可以使用CSS属性中的【text-indent】进行设置。 设置代码如下: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 缩进2字符 p{ text-...
  • 小程序端文本首行缩进字符

    千次阅读 2020-04-27 15:32:12
    content.wxml <view class="content" style="word-break: break-all"> content.wxss .content{ text-align: left; text-indent:2em; }
  • css 首行缩进

    2020-07-20 11:05:58
    CSS实现段落首缩进两个字符,应该使用首行缩进text-indent。比如文本块中一般每段前空两个汉字。在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象(父元素)内文本的字体尺寸。我们中文段落一般...
  • 内容: <p>1.sjfprokfoprkcpdpl[orpofddefrdhfyjjua[oejojdksjfidjihuagyedgbjhbzuhjygeduk</p>...css设置: p{ text-indent: 2em; } 这里的单位为em,em是相对单位不是绝对单位。
  • html首行缩进2字符,可以使用CSS属性中的【text-indent】进行设置。 p{ text-indent:2em; } 说明: text-indent表示段落首行缩进2em表示缩进2字符
  • css p段落首行缩进两个字符

    千次阅读 2018-12-06 16:23:44
    p{  text-indent:2em; /*每个P段落,首行空出两个空格,即缩进两个字符*/ }
  • CSS实现段落首缩进两个字符,应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。 在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前...
  • 一开始设置微信小程序首行缩进两个字不生效,查找原因是应为使用了容器造成的,改为ro容器完美解决,
  • css首行缩进无效 首先: 1确定标签是否为块级元素,不是的可以通过display:inline-block;使它拥有不分块级元素的属性 2 查看是否为! important引起的无效问题 优先级! important>id>class>tag 缩进...
  • H5页面-两步搞定文字首行缩进

    千次阅读 2019-06-17 16:53:16
    有时我们需要对一大段文字进行首行缩进(就是那种写作文每段前面空2格的意思) 1. 定义样式 在head里面定义好样式 p: p标签 text-indent: 文字缩进 2em: 两个字符 <style type="text/css"> p{ text-indent:2...
  • 在HTML电子邮件的群发中,需要按照中文排版风格自动缩进字符,很自然就想到了利用空格与CSS伪类的content属性,如下:p:before { content : "\20\20"; } /*第一个段落不缩进*/ p:first-child:before { content :...
  • 解决:.content{ text-align: justify;//两端对齐 text-justify: auto; display: inline-block;...//首行缩进,值自己设置 } 如下图文字段落右边狗啃的一样不整齐 改正后:找不到原图了,用下面的图代替一下 ...
  • css首行缩进2字符

    2017-12-05 18:54:00
    css设置: p{ text-indent:2em; } 转载于:https://www.cnblogs.com/moguzi12345/p/7988807.html
  • HTML首行缩进字符

    万次阅读 2016-03-08 22:07:26
    缩进2字符 p{ text-indent:2em;} 善良是你的本性,漂亮是你的天性,聪明是你的优点,贤惠是你的资本,温柔是你的标志,真诚是你的品格,妇女节,提前祝你开心幸福,年轻美丽一辈子! 温暖三月,春回大地,阳光...
  • 首行缩进代码

    千次阅读 2020-09-08 09:40:45
    首行缩进2字符:text-indent: 2em; css样式: p{text-indent: 2em;} /*首行缩进2字符*/ html代码: <p> 首行缩进字符<br> br换行后将不会进行首行缩进效果 </p> 注意:br换行后将不会进行...
  • css实现首行缩进

    2021-09-17 14:08:26
    CSS实现段落首缩进两个字符,应该使用首行缩进text-indent。比如文本块中一般每段前空两个汉字。在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象(父元素)内文本的字体尺寸。我们中文段落一般...
  • css如何设置首行文字缩进

    千次阅读 2020-07-15 10:14:08
    在html网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法。 css可以使用text-indent属性来设置首行文字缩进,我们...
  • 首行缩进怎么设置

    千次阅读 2020-04-29 20:42:01
    本篇文章所说的内容是一个用HTML缩进段落第一行的代码,我们要知道缩进段落需要用到的属性是text-indent,下面我们就来看一看具体的内容。...通过指定“text-indent:1em”缩进一个字符的段落的开头。 ...
  • div+CSS实现段落首行缩进两个字符 段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符。 应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前...
  • 首行缩进两个字符

    2021-06-15 10:19:28
    <pstyle="padding-top:20px;text-indent:2em;">{{bCompanyBO.compProfile}}</p> 添加text-indent:2em

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,683
精华内容 2,673
关键字:

css文字首行缩进2字符