私の CSS フレームワーク - base.css (ブラウザのデフォルト スタイルをリセット)

私の CSS フレームワーク - base.css (ブラウザのデフォルト スタイルをリセット)

コードをコピー
コードは次のとおりです。

@文字セット "utf-8";
/*
@名前: ベース
@機能: ブラウザのデフォルトスタイルをリセットする
*/
/* ユーザーが Web ページの背景色をカスタマイズできないようにし、ユーザーがフォントをカスタマイズできるようにするメソッドを追加します */
html{
色:黒;
背景:白;
}
/* マージンにより、ブラウザによってスタイルが異なって表示されます */
body、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、code、form、fieldset、legend、input、textarea、p、blockquote、th、td、hr、button、article、aside、details、figcaption、figure、footer、header、hgroup、menu、nav、section {
マージン:0;
パディング:0;
}
/* フォーム要素は親フォントを継承しないことに注意してください */
本文、ボタン、入力、選択、テキストエリア {
フォント:12px SimSun、tahoma、arial、sans-serif;
}
入力、選択、テキストエリア {
フォントサイズ:100%;
}
/* 各テーブルセルの余白を削除し、端を重ね合わせます*/
テーブル {
境界線の折りたたみ:折りたたみ;
境界線の間隔:0;
}
/* IE のバグ修正: th は text-align を継承しません*/
番目 {
テキスト配置:継承;
}
/* デフォルトの境界線を削除します */
フィールドセット、画像 {
境界線:なし;
}
/* ie6 7 8(q) のバグがインラインパフォーマンスとして表示されます*/
インラインフレーム{
表示:ブロック;
}
/* Firefox でこの要素の境界線を削除します*/
略語、頭字語 {
境界線:なし;
フォントバリアント:normal;
}
/* 一貫した del スタイル */
デル{
テキスト装飾:取り消し線;
}
住所、キャプション、引用、コード、dfn、em、th、var {
フォントスタイル:通常;
フォントの太さ:500;
}
/* リストの前のマークを削除すると、li がそれを継承します */
オル、ウル {
リストスタイル:なし;
}
/* 配置はタイプセットにおいて最も重要な要素です。すべてを中央揃えにしないでください*/
キャプション、th {
テキスト配置:左;
}
/* Yahoo から、複数のシステム アプリケーションに適応するようにタイトルをカスタマイズします */
h1、h2、h3、h4、h5、h6 {
フォントサイズ:100%;
フォントの太さ:500;
}
q:前、q:後 {
コンテンツ:'';
}
/* 上付き文字と下付き文字を統合する */
サブ、sup {
フォントサイズ:75%;
行の高さ:0;
位置:相対;
垂直位置合わせ:ベースライン;
}
すする {
上:-0.5em;
}
サブ{
下:-0.25em;
}
/* マウスオーバー時にリンクに下線を付ける*/
ホバー{
テキスト装飾:下線;
}
/*ページをシンプルに保つため、デフォルトでは下線は表示されません*/
インス、a {
テキスト装飾:なし;
}
/* IE6 および 7 でフォーカス ドット ラインを削除します*/
a:フォーカス、*:フォーカス {
アウトライン:なし;
}
/* フロートをクリア */
.clearfix:before、.clearfix:after {
コンテンツ:"";
表示:テーブル;
}
.clearfix:後{
クリア:両方;
オーバーフロー:非表示;
}
.clearfix {
zoom:1; /* IE6 IE7 の場合 */
}
。クリア{
クリア:両方;
表示:ブロック;
オーバーフロー:非表示;
高さ:0;
行の高さ:0;
フォントサイズ:0;
}
/* 表示と非表示を設定します。通常は JS と組み合わせて使用​​します*/
。隠れる {
表示:なし !重要;
可視性:非表示;
}
。ブロック {
display:block !重要;
}
/* フローティングによるバグを減らすためにインラインを設定します */
.fl {
フロート:左;
表示:インライン;
}
.fr {
フロート:右;
表示:インライン;
}

<<:  Mysql の主キー インデックスと非主キー インデックスの違いについて簡単に説明します。

>>:  CSSがページのレンダリングをブロックするかどうかについての簡単な説明

推薦する

CSSは5つの一般的な2D変換を実装します

CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間...

MySQLでよく使われるSQLとコマンドの入力からデータベースの削除、そして終了まで

目次開始と停止データベース関連の操作データベーステーブル関連の操作制約関連デフォルトの制約高度なデー...

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...

HTML ウェブページでのアンカー(名前付きアンカー)の使用の概要

以下の情報はインターネットから収集したものです1. アンカーは、Web ページ作成におけるハイパーリ...

Vue 要素と Nuxt の使用に関するヒントを共有する

1. 要素時間選択提出フォーマット変換例えば 2018年9月7日金曜日 00:00:00 GMT+0...

CSS3はブラウザのスクロールバーのスタイルを変更します

注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...

HTML img タグの alt 属性と title 属性の使い方の紹介

ブラウザベンダーが標準を曲げて、ルールに従わないことをすると、問題や少なくとも混乱が生じる可能性があ...

Vueはページキャッシュ機能を実装する

この記事の例では、ページキャッシュ機能を実装するためのVueの具体的なコードを参考までに共有していま...

Dockerはポートマッピングを設定しますが、ソリューションにアクセスできません

#docker ps チェック、すべてのポートがマップされています コンテナID イメージ コマンド...

Vue の get リクエストと post リクエストの違いのまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

美容・スタイリングウェブサイト向けのカラーマッチングテクニックと効果表示

色はあらゆるウェブサイトにとって最も重要な要素の 1 つであり、閲覧者に大きな影響を与えるため、色の...

nginxはdockerコンテナ内に設定ファイルを自動的に生成します

企業が Docker 自動デプロイメントを構築する場合、Docker の実行時にコンテナ内の設定ファ...

Docker Gitlab+Jenkins+Harborは永続的なプラットフォーム運用を構築します

CI/CD の概要CIワークフロー設計Gitコードバージョン管理システムはコマンドラインでのみ管理で...

Linux ネットワーク システムの紹介

目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...

MySql インデックス使用戦略の分析

MySql インデックスインデックスの利点1. 一意のインデックスまたは主キー インデックスを作成す...