Web制作課題Q13
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>復習(2)文字と背景Q13</title> <link rel="stylesheet" href="style.css" > </head> <body> <p class="sample1">テキストの囲みを表現したい[標準]</p> <p class="sample2">テキストの囲みを表現したい[線の太さ]</p> <p class="sample3">テキストの囲みを表現したい[線のカラー]</p> <p class="sample4">テキストの囲みを表現したい[線のスタイル]</p> <p class="sample5">テキストの囲みを表現したい[複数の指定]</p> <p class="sample6">テキストの囲みを表現したい[複数の指定]</p> </body> </html>
@charset"UTF-8"; body{ margin: o; padding: 0; } P{ padding:8px 0; } p.sample1 { width: 400px; height: auto; border: 2px solid #000000; } p.sample2 { width: 400px; height: auto; border: 5px solid #333333; } p.sample3 { width: 400px; height: auto; border: 2px solid #ff0000; } p.sample4 { width: 400px; height: auto; border: 2px dotted #333333; } p.sample5 { width: 400px; height: auto; border-top: 4px solid #2e8b57; border-right: 2px dotted #2e8b57; border-left: 10px solid #2e8b57; border-bottom: 2px dotted #2e8b57; } p.sample6 { width: 400px; height: auto; border-top: 4px solid #000080; border-right: none; border-left:2px solid #000080; border-bottom:2px double #000080; }