[TIL#3-2 WECODE]私の知らないCSS

210217 - WECODE #3

table border <table border=“1”> <style> .target th, .target td, { border: 1px solid black; } </style> このようにコードしましょう!! 同じ太い境界線ですが。 後者はtdとbackgroundColorが接触したときに境界をはっきりさせます!

border-collapse 表(table)の枠線とセル(td)の枠線との距離。 separate:表(表)の枠線とセル(td)の枠線の間に隙間を残します。 折りたたみ:表(表)の枠線とセル(td)の枠線の間の隙間を取り除きます。重なる部分を1行で表す。

<input>および<textarea>水平位置合わせ input,textareaは同じwidth値を与える widthをテキストの親に設定し、inputとtextareaのwidthを100%に設定します。 △大きさを変えるときは、親を変えればいいから! <style> .parent_div { width: 200px; } input, textarea { width: 100%; } </style>

<style> textarea { resize: none; } </style> textarea結果画面を表示し、 ブラウザの既定のスタイルは右下の三角形です。 そのスタイルを消す方法です。

プレースホルダとtypeスタイル 2つのコロンを使用してセレクタを作成できます。 input::placeholder { color: #bbb; } 複数の入力でテキストタイプのみにスタイルを設定するには input[type="text"] { } <style> input[type="text"]::placeholder { color: red; } </style>

<style> button:hover { cursor: pointer; opacity: 0.8; } </style> マウスをボタンの上に置きます。 クリック可能な状態で色が不透明になります。

はんのうネットワーク <style> @media only screen and (min-width: 320px) and (max-width: 480px) { /* ruleset for 320px - 480px */ } </style> @media–メディアクエリーを開始 only screen-どのデバイスに適用するかを示します。 たとえば、印刷時に適用する場合はprintraを作成するだけです。 screenの場合、どのデバイスでも、画面に表示される画面であれば有効になります。