CSS 기본 요약
7370 단어 CSS
0. 배경
웹 응용 프로그램을 만들기 위해 이제 CSS를 복습합니다.
단, 최소한으로 사용한 부분만 기재한다.
1. 기본 스타일 지정 방법
index.html: 스타일 적용 HTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
~ 中略 ~
<link rel="stylesheet" href="style.css"> ← StyleSheet(css)指定
</head>
<body>
<h1> タイトル </h1>
<p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
</body>
</html>
style.css
@charset "UTF-8";
/* "h1"タグのスタイル */
h1 {
color: red; ← 文字色：赤
border: 5px solid blue; ← 枠指定(幅,線,色)
text-align: center; ← 文字位置 {left|center|right|etc..}
}
/* "p"タグのスタイル */
p {
font-weight: bold; ← 太文字
text-decoration: underline; ← 下線
}
결과: 스타일을 적용하기 전에
결과: 스타일 적용 후
2. 범위 설정 방법 지정
index.html: 스타일 적용 HTML
index.html
<!DOCTYPE html>
<html lang="ja">
~ 中略 (css指定含む) ~
<body>
<section class="main">
<h1> タイトル </h1>
<p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
</section>
<section class="sub">
<h1 id="title2"> タイトル </h1>
<p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
<p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
<p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
<p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
</section>
</body>
</html>
style.css
@charset "UTF-8";
/* 全ての"section"タグに適用 */
section {
border: 1px solid silver; ← 枠指定(幅,線,色)
padding: 10px; ← 画面端からの幅
margin-bottom: 10px; ← section下の幅
}
/* class指定 */
.main h1 { ← class="main"の"h1"タグ
border-left: 5px solid skyblue; ← 左側だけの枠(幅,線,色)
}
/* id指定 */
#title2 { ← id="title2"
border-left: 5px solid green;
}
/* 隣接結合子での指定 */
p + p { ← "p"タグが続いた時
border-top: 1px dashed silver; ← 下側だけの枠(幅,線,色)
}
결과: 스타일 적용 후
정보원
Reference
이 문제에 관하여(CSS 기본 요약), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Daiji-Nagashima/items/5f68d4e1605a88a2fd15텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
