CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したテキストインデント

CSS text-indentプロパティは、要素の最初の行のインデントを設定するのに役立ちます。

構文

CSStext-indentプロパティの構文は次のとおりです-

Selector {
   text-indent: /*value*/
}

例

次の例は、CSSのtext-indentプロパティを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
   margin: auto;
   padding: 10px;
}
article {
   text-indent: 25%;
   background-color: darkseagreen;
   padding: 15px;
   font-size: 1.3em;
}
h3 {
   text-indent: -0.8em;
}
</style>
</head>
<body>
<div>
<h3>Doing it our way. Nothing gonna turn us back now.</h3>
<article>
This is demo paragraph. This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. This is demo paragraph. </article>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用したテキストインデント

例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style: none;
   display: flex;
   float: left;
   text-indent: 23px;
   background-image: url("https://www.tutorialspoint.com/angular4/images/angular-4.jpg");
   font-size: 1.5em;
}
li {
   border: thin solid;
}
</style>
</head>
<body>
<ul>
<li>This is demo text. This is demo text.</li>
<li>Angular 4 is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. </li>
<li>Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc</li>
<li>This is demo text. This is demo text.</li>
</ul>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用したテキストインデント


  1. CSSを使用したテキストの色の設定

    CSSのcolorプロパティは、要素のテキストの色を設定するために使用されます。 構文 CSSカラープロパティの構文は次のとおりです- Selector {    color: /*value*/ } 例 次の例は、CSSカラープロパティ-を示しています。 <!DOCTYPE html> <html lang="en"> <head> <style> div {    height: 100px;    width: 200px;    mar

  2. CSSを使用したテキスト変換

    CSS text-transformプロパティを使用すると、要素のテキストの大文字化を設定できます。次の値を受け入れることができます：大文字、小文字、大文字、全幅、フルサイズの仮名、なし。 構文 CSStext-transformプロパティの構文は次のとおりです- Selector {    text-transform: /*value*/ } 例 次の例は、CSSテキスト変換プロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> h2 {    te