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

CSSによるページ付けの制御

ページ付けを制御するには、 page-break-beforeを使用します 、 page-break-after 、および page-break-inside プロパティ。

ページ分割前の両方 およびpage-break-after auto、always、avoid、left、rightキーワードを受け入れます。

キーワードauto デフォルトです。これにより、ブラウザは必要に応じてページ分割を生成できます。キーワード常に 要素の前後にページ分割を強制し、抑制を回避します 要素の直前または直後のページ分割。 左右 キーワードは1つまたは2つのページ分割を強制するため、要素は左側または右側のページにレンダリングされます。

ページネーションプロパティの使用は非常に簡単です。ドキュメントにレベル1ヘッダーがあり、セクションを示すレベル2ヘッダーで新しい章を開始するとします。各章を新しい右側のページから開始する必要がありますが、セクションヘッダーが後続のコンテンツからのページ分割に分割されることは望ましくありません。

例 これは次のルールを使用して実現できます

<style>
   <!--
      h1 {
         page-break-before : right
      }
      h2 {
         page-break-after : avoid
      }
   -->
</style>

  1. CSSを使用してWebサイトのabout/about usページを作成するにはどうすればよいですか？

    アバウトページを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    html {       box-sizing: border-box;    }    body {   &nbs

  2. CSSポインターイベントプロパティでマウスとタッチを許可するかどうかの制御

    CSSのpointer-eventsプロパティを使用して、要素でマウスとタッチを許可するかどうかを制御できます。 CSSポインタイベントプロパティの構文は次のとおりです- pointer-events: auto|none; 上記、 自動 デフォルトです。要素はポインタイベントに反応しますが、 なし： 要素はポインタイベントに反応しません 例 次の例は、CSSのpointer-eventsプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> a {    margin