CSS 비고 직접 ②
14405 단어 CSS
길이/크기 단위
-px
-pt
-%スタイルを指定しなかった時のボックスの幅やフォントサイズと比べて何％の大きさにするか指定する。ボックスはスタイルを適用しないとブラウザウインドウいっぱいの幅になる。そこで50%と指定すると、ブラウザウインドウの半分の幅になる-em1文字のサイズを表す。フォントサイズに依存。-rem
루트 E로 읽습니다.<html> 요소에 지정된 글꼴 크기를 1rem으로 설정합니다.
기본값은 16pt입니다.
가장자리, 채우기, 경계
- 컨텐츠 영역
블록 내에서 텍스트나 이미지 등 요소의 내용이 확보된 구역
채우기
컨텐츠 영역 외부의 경계 안쪽 영역
- 경계
외곽선 영역
- 여백
인접 상자와의 빈 영역
style.cssh2 {
color: #442220;
font-size: 18px;
border-bottom-width: 2px; /* ボックスの下線の太さ */
border-bottom-style: dotted; /* スタイルは点線 */
border-bottom-color: #442220;
margin-top: 20px; /* 上の余白 */
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 10px; /* コンテンツ領域の外側でボーダーの内側の領域 */
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
블록 수준 요소 및 인라인 수준 요소
단락 만들기는 블록 레벨 요소이고 <strong>는 인라인 레벨 요소입니다.
내연 단계 요소에서width,height,margin을 무시합니다.
동적 시뮬레이션 클래스 :link 일반:visited 링크에 액세스됨:hover 마우스 포인터가 링크에 있음:active 마우스 버튼을 누릅니다.
이 순서대로 쓰지 않으면 효과를 발휘할 수 없다.
style.cssp {
line-height: 160%; /* 行送り */
}
a:link {
color: #6aa4d6;
}
a:visited {
color: #6aa4d6;
}
a:hover {
color: #4f7697;
}
a:active {
color: #aed3f2;
}
축소 margin
수직으로 인접한 상자의 상하 가장자리는 큰 쪽에만 적용된다
행 정렬
단축키 속성
margin,padding 지정을 한 줄로 끝냅니다.위에서 오른쪽으로 회전
위 오른쪽 아래 왼쪽;
text-align
left, center, right 등의 정렬 행 지정
style.cssh1 {
margin: 30px 0 30px 0;
padding: 0 0 0 0;
line-height: 0;
text-align: center; /* 中央揃え */
}
링크 이미지 프레임 삭제
링크가 있으면 가로 스트라이프가 표시되므로 삭제합니다
style.cssimg {
border-style: none;
}
목록 항목 정렬
style.css/* すべてのページに適用 - navまわり - */
#nav li { /* 子孫コンビネータ */
display: inline; /* インラインレベル要素として表示=>横一列に */
list-style-type: none; /* 中黒の非表示 */
padding-right: 30px;
}
디스플레이 속성에서 블록 레벨 요소를 내연 레벨 요소로 표시하거나 반대로 표시할 수 있습니다.
list-style-type 속성에서 검은색을 다른 것으로 변경합니다.
배경 이미지 지정 background-image: url(画像のパス)패스는 기다림에 둘러싸이지 않는다.
style.css#nav {
margin: 0 0 0 0;
padding: 15px 30px 10px 30px;
background-image: url(../images/menu-bg.png);
}
링크 밑줄 삭제
style.css#nav li a:link {
color: #f5f3eb;
text-decoration: none;
}
잘못을 저지르다text-decoration: none;.
종속 연결
우선순위에 따라 적용되는 것을 나타낸다.
같은 우선순위에서 뒤에서 나온 것을 덮어씁니다. =>아래의 규칙을 적용하다
덮어쓰기는 속성 단위로 수행됩니다.
선택기의 우선순위는タイプセレクタ < classセレクタ < idセレクタ배경 이미지 반복 background-repeat: repeat 수직 반복background-repeat: repeat-x 가로 반복background-repeat: repeat-y 수직 반복background-repeat: no-repeat 중복 없음
글꼴 크기 font-size: smaller; 등도 가능합니다.
전체 페이지 가운데 <div class="wrapper">width 속성을 사용하여 가로 폭을 고정합니다.이때auto 가장자리의 크기가 자동으로 조정됩니다.
style.cssbody {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #f5f3eb;
}
.wrapper {
margin: 0 auto 0 auto;
width: 900px;
}
플로팅 볼 float: left인 경우 요소는 가능한 왼쪽 상단에 있습니다.
about.html<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">
KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。
皆様のお越しを心よりお待ちしております。</p>
<h2 class="clear">店舗情報</h2>
style.css/* about.html */
.float img {
float: left;
padding-right: 1em;
}
.clear {
clear: both;
}
이 예에서 ![]()
는 부원소의
상자의 왼쪽 상단.flat 속성이 적용된 컴포넌트 뒤에 있는 컴포넌트는 피하도록 설정됩니다.다음 요소가 텍스트 및 인라인 레벨 요소인 경우 결과는 이미지의 컨텐트입니다.
부동 해제
기본 사용clear 속성.clear: left; , clear: right; , clear: both;의 세 가지.clear: both;flat의 값은left나right에서 모두 해제됩니다.
책상 바깥쪽에 가로 줄무늬를 그리다
style.csstable.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
탁자의 성형
style.csstable.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapse는 <th>, <td>의 각 단지에 경계를 그리고 인접한 경계를 1개로 모아 그 중 하나를 결정하는 속성이다.collapse와 separate 두 개의 값을 얻다.collapse로 설정하면 셀 사이의 경계가 하나만 줄어듭니다.
프레임 단축키 속성
굵기 스타일 색상;
각 모서리를 지정하는 바로 가기 속성도 있습니다.
오버플로우 속성을 통해 부동 해제
부동이 적용된 블록의 부모 요소를 지정하면overflow: hidden; 부동이 해제됩니다.
menu.html<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
style.css/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- 컨텐츠 영역
블록 내에서 텍스트나 이미지 등 요소의 내용이 확보된 구역
채우기
컨텐츠 영역 외부의 경계 안쪽 영역
- 경계
외곽선 영역
- 여백
인접 상자와의 빈 영역
style.css
h2 {
color: #442220;
font-size: 18px;
border-bottom-width: 2px; /* ボックスの下線の太さ */
border-bottom-style: dotted; /* スタイルは点線 */
border-bottom-color: #442220;
margin-top: 20px; /* 上の余白 */
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 10px; /* コンテンツ領域の外側でボーダーの内側の領域 */
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
블록 수준 요소 및 인라인 수준 요소
단락 만들기는 블록 레벨 요소이고
<strong>는 인라인 레벨 요소입니다.내연 단계 요소에서width,height,margin을 무시합니다.
동적 시뮬레이션 클래스 :link 일반:visited 링크에 액세스됨:hover 마우스 포인터가 링크에 있음:active 마우스 버튼을 누릅니다.
이 순서대로 쓰지 않으면 효과를 발휘할 수 없다.
style.cssp {
line-height: 160%; /* 行送り */
}
a:link {
color: #6aa4d6;
}
a:visited {
color: #6aa4d6;
}
a:hover {
color: #4f7697;
}
a:active {
color: #aed3f2;
}
축소 margin
수직으로 인접한 상자의 상하 가장자리는 큰 쪽에만 적용된다
행 정렬
단축키 속성
margin,padding 지정을 한 줄로 끝냅니다.위에서 오른쪽으로 회전
위 오른쪽 아래 왼쪽;
text-align
left, center, right 등의 정렬 행 지정
style.cssh1 {
margin: 30px 0 30px 0;
padding: 0 0 0 0;
line-height: 0;
text-align: center; /* 中央揃え */
}
링크 이미지 프레임 삭제
링크가 있으면 가로 스트라이프가 표시되므로 삭제합니다
style.cssimg {
border-style: none;
}
목록 항목 정렬
style.css/* すべてのページに適用 - navまわり - */
#nav li { /* 子孫コンビネータ */
display: inline; /* インラインレベル要素として表示=>横一列に */
list-style-type: none; /* 中黒の非表示 */
padding-right: 30px;
}
디스플레이 속성에서 블록 레벨 요소를 내연 레벨 요소로 표시하거나 반대로 표시할 수 있습니다.
list-style-type 속성에서 검은색을 다른 것으로 변경합니다.
배경 이미지 지정 background-image: url(画像のパス)패스는 기다림에 둘러싸이지 않는다.
style.css#nav {
margin: 0 0 0 0;
padding: 15px 30px 10px 30px;
background-image: url(../images/menu-bg.png);
}
링크 밑줄 삭제
style.css#nav li a:link {
color: #f5f3eb;
text-decoration: none;
}
잘못을 저지르다text-decoration: none;.
종속 연결
우선순위에 따라 적용되는 것을 나타낸다.
같은 우선순위에서 뒤에서 나온 것을 덮어씁니다. =>아래의 규칙을 적용하다
덮어쓰기는 속성 단위로 수행됩니다.
선택기의 우선순위는タイプセレクタ < classセレクタ < idセレクタ배경 이미지 반복 background-repeat: repeat 수직 반복background-repeat: repeat-x 가로 반복background-repeat: repeat-y 수직 반복background-repeat: no-repeat 중복 없음
글꼴 크기 font-size: smaller; 등도 가능합니다.
전체 페이지 가운데 <div class="wrapper">width 속성을 사용하여 가로 폭을 고정합니다.이때auto 가장자리의 크기가 자동으로 조정됩니다.
style.cssbody {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #f5f3eb;
}
.wrapper {
margin: 0 auto 0 auto;
width: 900px;
}
플로팅 볼 float: left인 경우 요소는 가능한 왼쪽 상단에 있습니다.
about.html<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">
KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。
皆様のお越しを心よりお待ちしております。</p>
<h2 class="clear">店舗情報</h2>
style.css/* about.html */
.float img {
float: left;
padding-right: 1em;
}
.clear {
clear: both;
}
이 예에서 ![]()
는 부원소의
상자의 왼쪽 상단.flat 속성이 적용된 컴포넌트 뒤에 있는 컴포넌트는 피하도록 설정됩니다.다음 요소가 텍스트 및 인라인 레벨 요소인 경우 결과는 이미지의 컨텐트입니다.
부동 해제
기본 사용clear 속성.clear: left; , clear: right; , clear: both;의 세 가지.clear: both;flat의 값은left나right에서 모두 해제됩니다.
책상 바깥쪽에 가로 줄무늬를 그리다
style.csstable.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
탁자의 성형
style.csstable.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapse는 <th>, <td>의 각 단지에 경계를 그리고 인접한 경계를 1개로 모아 그 중 하나를 결정하는 속성이다.collapse와 separate 두 개의 값을 얻다.collapse로 설정하면 셀 사이의 경계가 하나만 줄어듭니다.
프레임 단축키 속성
굵기 스타일 색상;
각 모서리를 지정하는 바로 가기 속성도 있습니다.
오버플로우 속성을 통해 부동 해제
부동이 적용된 블록의 부모 요소를 지정하면overflow: hidden; 부동이 해제됩니다.
menu.html<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
style.css/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
p {
line-height: 160%; /* 行送り */
}
a:link {
color: #6aa4d6;
}
a:visited {
color: #6aa4d6;
}
a:hover {
color: #4f7697;
}
a:active {
color: #aed3f2;
}
수직으로 인접한 상자의 상하 가장자리는 큰 쪽에만 적용된다
행 정렬
단축키 속성
margin,padding 지정을 한 줄로 끝냅니다.위에서 오른쪽으로 회전
위 오른쪽 아래 왼쪽;
text-align
left, center, right 등의 정렬 행 지정
style.cssh1 {
margin: 30px 0 30px 0;
padding: 0 0 0 0;
line-height: 0;
text-align: center; /* 中央揃え */
}
링크 이미지 프레임 삭제
링크가 있으면 가로 스트라이프가 표시되므로 삭제합니다
style.cssimg {
border-style: none;
}
목록 항목 정렬
style.css/* すべてのページに適用 - navまわり - */
#nav li { /* 子孫コンビネータ */
display: inline; /* インラインレベル要素として表示=>横一列に */
list-style-type: none; /* 中黒の非表示 */
padding-right: 30px;
}
디스플레이 속성에서 블록 레벨 요소를 내연 레벨 요소로 표시하거나 반대로 표시할 수 있습니다.
list-style-type 속성에서 검은색을 다른 것으로 변경합니다.
배경 이미지 지정 background-image: url(画像のパス)패스는 기다림에 둘러싸이지 않는다.
style.css#nav {
margin: 0 0 0 0;
padding: 15px 30px 10px 30px;
background-image: url(../images/menu-bg.png);
}
링크 밑줄 삭제
style.css#nav li a:link {
color: #f5f3eb;
text-decoration: none;
}
잘못을 저지르다text-decoration: none;.
종속 연결
우선순위에 따라 적용되는 것을 나타낸다.
같은 우선순위에서 뒤에서 나온 것을 덮어씁니다. =>아래의 규칙을 적용하다
덮어쓰기는 속성 단위로 수행됩니다.
선택기의 우선순위는タイプセレクタ < classセレクタ < idセレクタ배경 이미지 반복 background-repeat: repeat 수직 반복background-repeat: repeat-x 가로 반복background-repeat: repeat-y 수직 반복background-repeat: no-repeat 중복 없음
글꼴 크기 font-size: smaller; 등도 가능합니다.
전체 페이지 가운데 <div class="wrapper">width 속성을 사용하여 가로 폭을 고정합니다.이때auto 가장자리의 크기가 자동으로 조정됩니다.
style.cssbody {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #f5f3eb;
}
.wrapper {
margin: 0 auto 0 auto;
width: 900px;
}
플로팅 볼 float: left인 경우 요소는 가능한 왼쪽 상단에 있습니다.
about.html<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">
KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。
皆様のお越しを心よりお待ちしております。</p>
<h2 class="clear">店舗情報</h2>
style.css/* about.html */
.float img {
float: left;
padding-right: 1em;
}
.clear {
clear: both;
}
이 예에서 ![]()
는 부원소의
상자의 왼쪽 상단.flat 속성이 적용된 컴포넌트 뒤에 있는 컴포넌트는 피하도록 설정됩니다.다음 요소가 텍스트 및 인라인 레벨 요소인 경우 결과는 이미지의 컨텐트입니다.
부동 해제
기본 사용clear 속성.clear: left; , clear: right; , clear: both;의 세 가지.clear: both;flat의 값은left나right에서 모두 해제됩니다.
책상 바깥쪽에 가로 줄무늬를 그리다
style.csstable.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
탁자의 성형
style.csstable.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapse는 <th>, <td>의 각 단지에 경계를 그리고 인접한 경계를 1개로 모아 그 중 하나를 결정하는 속성이다.collapse와 separate 두 개의 값을 얻다.collapse로 설정하면 셀 사이의 경계가 하나만 줄어듭니다.
프레임 단축키 속성
굵기 스타일 색상;
각 모서리를 지정하는 바로 가기 속성도 있습니다.
오버플로우 속성을 통해 부동 해제
부동이 적용된 블록의 부모 요소를 지정하면overflow: hidden; 부동이 해제됩니다.
menu.html<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
style.css/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
h1 {
margin: 30px 0 30px 0;
padding: 0 0 0 0;
line-height: 0;
text-align: center; /* 中央揃え */
}
링크가 있으면 가로 스트라이프가 표시되므로 삭제합니다
style.css
img {
border-style: none;
}
목록 항목 정렬
style.css/* すべてのページに適用 - navまわり - */
#nav li { /* 子孫コンビネータ */
display: inline; /* インラインレベル要素として表示=>横一列に */
list-style-type: none; /* 中黒の非表示 */
padding-right: 30px;
}
디스플레이 속성에서 블록 레벨 요소를 내연 레벨 요소로 표시하거나 반대로 표시할 수 있습니다.
list-style-type 속성에서 검은색을 다른 것으로 변경합니다.
배경 이미지 지정 background-image: url(画像のパス)패스는 기다림에 둘러싸이지 않는다.
style.css#nav {
margin: 0 0 0 0;
padding: 15px 30px 10px 30px;
background-image: url(../images/menu-bg.png);
}
링크 밑줄 삭제
style.css#nav li a:link {
color: #f5f3eb;
text-decoration: none;
}
잘못을 저지르다text-decoration: none;.
종속 연결
우선순위에 따라 적용되는 것을 나타낸다.
같은 우선순위에서 뒤에서 나온 것을 덮어씁니다. =>아래의 규칙을 적용하다
덮어쓰기는 속성 단위로 수행됩니다.
선택기의 우선순위는タイプセレクタ < classセレクタ < idセレクタ배경 이미지 반복 background-repeat: repeat 수직 반복background-repeat: repeat-x 가로 반복background-repeat: repeat-y 수직 반복background-repeat: no-repeat 중복 없음
글꼴 크기 font-size: smaller; 등도 가능합니다.
전체 페이지 가운데 <div class="wrapper">width 속성을 사용하여 가로 폭을 고정합니다.이때auto 가장자리의 크기가 자동으로 조정됩니다.
style.cssbody {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #f5f3eb;
}
.wrapper {
margin: 0 auto 0 auto;
width: 900px;
}
플로팅 볼 float: left인 경우 요소는 가능한 왼쪽 상단에 있습니다.
about.html<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">
KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。
皆様のお越しを心よりお待ちしております。</p>
<h2 class="clear">店舗情報</h2>
style.css/* about.html */
.float img {
float: left;
padding-right: 1em;
}
.clear {
clear: both;
}
이 예에서 ![]()
는 부원소의
상자의 왼쪽 상단.flat 속성이 적용된 컴포넌트 뒤에 있는 컴포넌트는 피하도록 설정됩니다.다음 요소가 텍스트 및 인라인 레벨 요소인 경우 결과는 이미지의 컨텐트입니다.
부동 해제
기본 사용clear 속성.clear: left; , clear: right; , clear: both;의 세 가지.clear: both;flat의 값은left나right에서 모두 해제됩니다.
책상 바깥쪽에 가로 줄무늬를 그리다
style.csstable.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
탁자의 성형
style.csstable.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapse는 <th>, <td>의 각 단지에 경계를 그리고 인접한 경계를 1개로 모아 그 중 하나를 결정하는 속성이다.collapse와 separate 두 개의 값을 얻다.collapse로 설정하면 셀 사이의 경계가 하나만 줄어듭니다.
프레임 단축키 속성
굵기 스타일 색상;
각 모서리를 지정하는 바로 가기 속성도 있습니다.
오버플로우 속성을 통해 부동 해제
부동이 적용된 블록의 부모 요소를 지정하면overflow: hidden; 부동이 해제됩니다.
menu.html<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
style.css/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
/* すべてのページに適用 - navまわり - */
#nav li { /* 子孫コンビネータ */
display: inline; /* インラインレベル要素として表示=>横一列に */
list-style-type: none; /* 中黒の非表示 */
padding-right: 30px;
}
background-image: url(画像のパス)패스는 기다림에 둘러싸이지 않는다.style.css
#nav {
margin: 0 0 0 0;
padding: 15px 30px 10px 30px;
background-image: url(../images/menu-bg.png);
}
링크 밑줄 삭제
style.css#nav li a:link {
color: #f5f3eb;
text-decoration: none;
}
잘못을 저지르다text-decoration: none;.
종속 연결
우선순위에 따라 적용되는 것을 나타낸다.
같은 우선순위에서 뒤에서 나온 것을 덮어씁니다. =>아래의 규칙을 적용하다
덮어쓰기는 속성 단위로 수행됩니다.
선택기의 우선순위는タイプセレクタ < classセレクタ < idセレクタ배경 이미지 반복 background-repeat: repeat 수직 반복background-repeat: repeat-x 가로 반복background-repeat: repeat-y 수직 반복background-repeat: no-repeat 중복 없음
글꼴 크기 font-size: smaller; 등도 가능합니다.
전체 페이지 가운데 <div class="wrapper">width 속성을 사용하여 가로 폭을 고정합니다.이때auto 가장자리의 크기가 자동으로 조정됩니다.
style.cssbody {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #f5f3eb;
}
.wrapper {
margin: 0 auto 0 auto;
width: 900px;
}
플로팅 볼 float: left인 경우 요소는 가능한 왼쪽 상단에 있습니다.
about.html<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">
KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。
皆様のお越しを心よりお待ちしております。</p>
<h2 class="clear">店舗情報</h2>
style.css/* about.html */
.float img {
float: left;
padding-right: 1em;
}
.clear {
clear: both;
}
이 예에서 ![]()
는 부원소의
상자의 왼쪽 상단.flat 속성이 적용된 컴포넌트 뒤에 있는 컴포넌트는 피하도록 설정됩니다.다음 요소가 텍스트 및 인라인 레벨 요소인 경우 결과는 이미지의 컨텐트입니다.
부동 해제
기본 사용clear 속성.clear: left; , clear: right; , clear: both;의 세 가지.clear: both;flat의 값은left나right에서 모두 해제됩니다.
책상 바깥쪽에 가로 줄무늬를 그리다
style.csstable.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
탁자의 성형
style.csstable.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapse는 <th>, <td>의 각 단지에 경계를 그리고 인접한 경계를 1개로 모아 그 중 하나를 결정하는 속성이다.collapse와 separate 두 개의 값을 얻다.collapse로 설정하면 셀 사이의 경계가 하나만 줄어듭니다.
프레임 단축키 속성
굵기 스타일 색상;
각 모서리를 지정하는 바로 가기 속성도 있습니다.
오버플로우 속성을 통해 부동 해제
부동이 적용된 블록의 부모 요소를 지정하면overflow: hidden; 부동이 해제됩니다.
menu.html<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
style.css/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
#nav li a:link {
color: #f5f3eb;
text-decoration: none;
}
우선순위에 따라 적용되는 것을 나타낸다.
같은 우선순위에서 뒤에서 나온 것을 덮어씁니다. =>아래의 규칙을 적용하다
덮어쓰기는 속성 단위로 수행됩니다.
선택기의 우선순위는
タイプセレクタ < classセレクタ < idセレクタ배경 이미지 반복 background-repeat: repeat 수직 반복background-repeat: repeat-x 가로 반복background-repeat: repeat-y 수직 반복background-repeat: no-repeat 중복 없음
글꼴 크기 font-size: smaller; 등도 가능합니다.
전체 페이지 가운데 <div class="wrapper">width 속성을 사용하여 가로 폭을 고정합니다.이때auto 가장자리의 크기가 자동으로 조정됩니다.
style.cssbody {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #f5f3eb;
}
.wrapper {
margin: 0 auto 0 auto;
width: 900px;
}
플로팅 볼 float: left인 경우 요소는 가능한 왼쪽 상단에 있습니다.
about.html<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">
KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。
皆様のお越しを心よりお待ちしております。</p>
<h2 class="clear">店舗情報</h2>
style.css/* about.html */
.float img {
float: left;
padding-right: 1em;
}
.clear {
clear: both;
}
이 예에서 ![]()
는 부원소의
상자의 왼쪽 상단.flat 속성이 적용된 컴포넌트 뒤에 있는 컴포넌트는 피하도록 설정됩니다.다음 요소가 텍스트 및 인라인 레벨 요소인 경우 결과는 이미지의 컨텐트입니다.
부동 해제
기본 사용clear 속성.clear: left; , clear: right; , clear: both;의 세 가지.clear: both;flat의 값은left나right에서 모두 해제됩니다.
책상 바깥쪽에 가로 줄무늬를 그리다
style.csstable.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
탁자의 성형
style.csstable.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapse는 <th>, <td>의 각 단지에 경계를 그리고 인접한 경계를 1개로 모아 그 중 하나를 결정하는 속성이다.collapse와 separate 두 개의 값을 얻다.collapse로 설정하면 셀 사이의 경계가 하나만 줄어듭니다.
프레임 단축키 속성
굵기 스타일 색상;
각 모서리를 지정하는 바로 가기 속성도 있습니다.
오버플로우 속성을 통해 부동 해제
부동이 적용된 블록의 부모 요소를 지정하면overflow: hidden; 부동이 해제됩니다.
menu.html<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
style.css/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
font-size: smaller; 등도 가능합니다.전체 페이지 가운데 <div class="wrapper">width 속성을 사용하여 가로 폭을 고정합니다.이때auto 가장자리의 크기가 자동으로 조정됩니다.
style.cssbody {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #f5f3eb;
}
.wrapper {
margin: 0 auto 0 auto;
width: 900px;
}
플로팅 볼 float: left인 경우 요소는 가능한 왼쪽 상단에 있습니다.
about.html<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">
KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。
皆様のお越しを心よりお待ちしております。</p>
<h2 class="clear">店舗情報</h2>
style.css/* about.html */
.float img {
float: left;
padding-right: 1em;
}
.clear {
clear: both;
}
이 예에서 ![]()
는 부원소의
상자의 왼쪽 상단.flat 속성이 적용된 컴포넌트 뒤에 있는 컴포넌트는 피하도록 설정됩니다.다음 요소가 텍스트 및 인라인 레벨 요소인 경우 결과는 이미지의 컨텐트입니다.
부동 해제
기본 사용clear 속성.clear: left; , clear: right; , clear: both;의 세 가지.clear: both;flat의 값은left나right에서 모두 해제됩니다.
책상 바깥쪽에 가로 줄무늬를 그리다
style.csstable.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
탁자의 성형
style.csstable.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapse는 <th>, <td>의 각 단지에 경계를 그리고 인접한 경계를 1개로 모아 그 중 하나를 결정하는 속성이다.collapse와 separate 두 개의 값을 얻다.collapse로 설정하면 셀 사이의 경계가 하나만 줄어듭니다.
프레임 단축키 속성
굵기 스타일 색상;
각 모서리를 지정하는 바로 가기 속성도 있습니다.
오버플로우 속성을 통해 부동 해제
부동이 적용된 블록의 부모 요소를 지정하면overflow: hidden; 부동이 해제됩니다.
menu.html<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
style.css/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #f5f3eb;
}
.wrapper {
margin: 0 auto 0 auto;
width: 900px;
}
float: left인 경우 요소는 가능한 왼쪽 상단에 있습니다.about.html
<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">
KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。
皆様のお越しを心よりお待ちしております。</p>
<h2 class="clear">店舗情報</h2>
/* about.html */
.float img {
float: left;
padding-right: 1em;
}
.clear {
clear: both;
}
상자의 왼쪽 상단.flat 속성이 적용된 컴포넌트 뒤에 있는 컴포넌트는 피하도록 설정됩니다.다음 요소가 텍스트 및 인라인 레벨 요소인 경우 결과는 이미지의 컨텐트입니다.
부동 해제
기본 사용
clear 속성.clear: left; , clear: right; , clear: both;의 세 가지.clear: both;flat의 값은left나right에서 모두 해제됩니다.책상 바깥쪽에 가로 줄무늬를 그리다
style.csstable.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
탁자의 성형
style.csstable.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapse는 <th>, <td>의 각 단지에 경계를 그리고 인접한 경계를 1개로 모아 그 중 하나를 결정하는 속성이다.collapse와 separate 두 개의 값을 얻다.collapse로 설정하면 셀 사이의 경계가 하나만 줄어듭니다.
프레임 단축키 속성
굵기 스타일 색상;
각 모서리를 지정하는 바로 가기 속성도 있습니다.
오버플로우 속성을 통해 부동 해제
부동이 적용된 블록의 부모 요소를 지정하면overflow: hidden; 부동이 해제됩니다.
menu.html<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
style.css/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
table.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
style.css
table.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapse는 <th>, <td>의 각 단지에 경계를 그리고 인접한 경계를 1개로 모아 그 중 하나를 결정하는 속성이다.collapse와 separate 두 개의 값을 얻다.collapse로 설정하면 셀 사이의 경계가 하나만 줄어듭니다.프레임 단축키 속성
굵기 스타일 색상;
각 모서리를 지정하는 바로 가기 속성도 있습니다.
오버플로우 속성을 통해 부동 해제
부동이 적용된 블록의 부모 요소를 지정하면overflow: hidden; 부동이 해제됩니다.
menu.html<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
style.css/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
부동이 적용된 블록의 부모 요소를 지정하면
overflow: hidden; 부동이 해제됩니다.menu.html
<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
단축키 속성 생략 margin: 上 右 下 左;=>4시간margin: 上 左右 下;=>3시margin: 上下 左右;=>2시간margin: 四辺;=>1개시
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takenakat/items/44ece22387c514f8e98a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(CSS 비고 직접 ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takenakat/items/44ece22387c514f8e98a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
