CSS 규칙은 무엇인가요?
여기서 31가지 CSS 문법 규칙을 정리했습니다:
1 CSS 약어 규칙을 잘 활용하세요
/*top, right의 쓰기 순서에 주의하세요. , 하단 및 왼쪽 */
1. 여백(4변) 관련:
1px 2px 3px 4px(상단, 오른쪽, 하단, 왼쪽)
1px 2px 3px(생략된 왼쪽은 오른쪽과 같음)
1px 2px (생략된 상단은 하단과 같음)
1px (네 변 모두 동일함)
2. 모든 것을 단순화합니다:
*/ body{margin:0}------------ 나타냅니다. 웹 페이지의 모든 요소의 마진은 0
#menu{ margin:0}------------메뉴 상자 아래의 모든 요소의 마진은 0
3임을 나타냅니다. 약어(테두리) 특정 스타일:
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4 텍스트 약어 규칙:
Font-style:italic form
Font- 변형:소형 대문자/일반; 변형 스타일: 소형 대문자 /Normal
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%) ;
Font-family:arrial,sans-serif, verdana;
약어:
Font:italic small-caps Bold 12px/1.5em arrial,sans-serif;
참고: 글꼴 크기 및 줄 높이 슬래시와 결합되어 별도로 쓸 수 없습니다.
5. 배경 이미지 정보:
배경: #FFF url(log.gif) 왼쪽 상단 고정;
6 목록 정보:
List-style-type:square/none;
List -style-position:inside;
List-style-image:url(filename.gif);
약어:
List-style:none inside url(filename.gif)
2. CSS 스타일 소개
1.link
rel 관계
type 데이터 유형, 많은
href가 있습니다. Path
일부 브라우저는 후보 스타일, 키워드를 지원합니다: 대체:
2.
h1{color:red;}
–>
3.@import
@import url{a.css }
참고: 이 지시문은
의 설정--외부 참조 CSS 파일 (2) 우선 순위는 액세스 순서에 따라 레벨이 설정되지 않으며, 그러나 CSS의 선언 순서에 따라. 위의 예에서와 같이도 노란색으로 표시됩니다. CSS에서 .yellow가 .blue 뒤에 있기 때문입니다. 정의.
8. 올바른 링크 스타일을 작성하세요 CSS를 사용하여 링크의 다양한 상태를 정의할 때 작성 순서에 주의하세요: :link :visited :hover : active use 첫글자 : L V H A, LoVe, Hate, 두 단어를 외워서 순서를 기억하시면 됩니다. :link --------링크 색상:visited -----마우스 클릭 후 색상#🎜 🎜#: hover -------마우스를 놓았으나 클릭하지 않았을 때의 색상(hover)
:active-------마우스를 클릭했을 때의 색상#🎜 🎜#
9 , :hoverIE6의 유연한 사용은 a 태그 이외의 :hover 속성을 지원하지 않습니다. :hover 속성은 마우스 호버 효과라는 것을 알고 있습니다. IE7과 FF에서는 거의 모든 요소에 :hover 속성 효과를 설정할 수 있습니다. 이는 다양한 방문을 하는 데 큰 도움이 됩니다. 예: p { 너비: 360px 높이: 80px# 🎜 🎜#패딩: 20px;
margin: 50px 자동 0 자동
border: 1px #ccc#
배경: #fff; 🎜🎜#배경 : #ddd;
}
----------------이 효과는 IE7용입니다. 및 FF
p a {
color : #00f
text-장식 : 없음
font-size; : 13px;
}
p a:hover {
color :
text-장식 : 밑줄 ;
}
-----------------이 효과는 IE6
10에 적용됩니다. 정의 A 태그와 관련하여 주의해야 할 작은 문제
{color:red;}를 정의하면 A의 네 가지 상태의 스타일을 나타냅니다. 마우스가 있는 상태를 정의하려면 배치되면 a:hover를 정의하면 충분합니다. 다른 세 가지 상태는 A에 정의된 스타일입니다.
a:link가 하나만 정의된 경우 다른 세 가지 상태를 정의해야 한다는 점을 기억하세요!
11. 콘텐츠 래핑을 금지하고 콘텐츠를 강제로 래핑합니다.
테이블이나 레이어에서 콘텐츠가 래핑되지 않거나 강제로 래핑되도록 할 수 있습니다. CSS 속성이 필요합니다.
줄 바꿈 금지: 공백:nowrap
줄 바꿈 강제: word-break: break-all; 공백: 일반;
#🎜🎜 #十2. 상대 위치와 절대 위치의 차이Absolute---CSS의 작성 방법은 다음과 같습니다. position:absolute; TOP, RIGHT, BOTTOM , LEFT(이하 TRBL)과 결합하여 위치결정을 합니다. TRBL이 설정되지 않은 경우 기본값은 부모의 원점을 기준으로 합니다. TRBL이 설정되고 상위 항목이 위치 속성을 설정하지 않은 경우 현재 절대값은 브라우저의 왼쪽 상단을 원래 지점으로 사용하여 위치가 지정되고 위치는 TRBL에 의해 결정됩니다.Relative---CSS의 작성 방법은 position:relative입니다. 이는 절대 상대 위치 지정을 의미합니다. 상위 항목이 없으면 BODY의 원래 위치를 사용합니다. TRBL과 결합된 원점 위치 지정을 위해 상위 항목에 패딩 등 CSS 속성이 있는 경우 상위 콘텐츠 영역의 원점을 기준으로 현재 레벨의 원점을 위치시킵니다.
13. 블록 수준 요소 블록과 인라인 요소의 차이점
블록 수준---너비와 높이를 정의할 수 있으며 별도의 줄을 차지합니다(예: div ul)
인라인---너비와 높이 텍스트 요소(예: 범위)와 같이 높이는 정의할 수 없습니다.
14. 표시와 표시의 차이점
display:none과 visible:hidden은 모두 요소를 숨길 수 있지만 visible:hidden은 요소의 내용만 숨깁니다. 요소이지만 사용된 위치 공간은 여전히 예약되어 있습니다. Display:none은 페이지에서 요소를 제거하는 것과 동일하며 해당 요소가 차지하는 위치도 삭제됩니다.
15. 배경 배경의 일부 구문
배경-이미지:url (배경 패턴.jpg, gif, bmp)
배경 색상: #FFFFFF(배경 색상)
배경 색상: 투명; --배경을 투명색으로 설정 –>
background-repeat 나란하게 반복되는 배경 이미지 설정 변경
사용 방법
repeat 배경 이미지를 나란히
repeat-x 배경 이미지를 나란히 -X 방향으로 나란히
repeat- y 배경 이미지는 Y 방향으로 나란히 있습니다.
반복되지 않는 배경 이미지는 나란히 처리되지 않습니다.
background-attachment 이미지 위치를 고정할지 여부
설명
스크롤 스크롤을 당길 때 배경 이미지도 함께 이동합니다(기본값)
fixed 스크롤을 당길 때 배경 이미지도 이동하지 않습니다.
위치 배경-길이별 위치: 아래로 이동
backgroud. -위치: 0% 0%; 왼쪽 상단
backgroud-position: 0% 50%; 중간 왼쪽
backgroud-position: 50% 0% 왼쪽 상단
backgroud-position: 50% 50%; backgroud-position: 100% 0%; 상단 오른쪽
backgroud-position: 0% 100%; 하단 왼쪽
backgroud-position: 100% 50%; 중간 오른쪽
backgroud-position: 50% 100%;
backgroud-position: 100% 100%; 오른쪽 아래
키워드별 위치
키워드 설명
top ( y = 0 )
center ( x = 50, y = 50)
bottom 하단 (y = 100 )
left left (x= 0)
Exp:
background-position:center;
사진은 지정된 배경 중심의 X=50% Y=50% 위치에 있습니다
background-position: 200px 30px
16. HTML에서 댓글
을 작성하는 방법:
<-- footer -->
content
<-- end footer -->
중형:
/* ---------- 헤더 ---- */
style
Seventeen, CSS 명명 규칙
1. ID 명명
( 1) 페이지 구조
Container: 컨테이너
Header: header
Content: content/container
Page body: main
Tail: footer
Navigation: nav
Side Column: sidebar
Column: column
페이지 주변 장치 제어 전체 레이아웃 너비: 래퍼
왼쪽 오른쪽 가운데
(2) Navigation
Navigation: nav
Main Navigation: mainnav
Sub-navigation: subnav
상단 네비게이션: topnav
사이드 네비게이션: sidebar
왼쪽 탐색: 왼쪽 사이드바
오른쪽 탐색: 오른쪽 사이드바
메뉴: 메뉴
하위 메뉴: 하위 메뉴
Title: 제목
요약: 요약
(3) 기능
로고: 로고
광고: 배너
로그인 : login
로그인 바: loginbar
Register: regsiter
Search: search
Ribbon: shop
Title: title
Join: Joinus
Status: status
버튼: btn
스크롤: 스크롤
탭 페이지: 탭
기사 목록: 목록
프롬프트 정보: msg
현재: 현재
팁: Tips
아이콘: 아이콘
댓글: 참고
가이드: 길드
서비스: 서비스
핫스팟 : 핫
뉴스: 뉴스
다운로드: 다운로드
투표: vote
파트너: 파트너
친근한 링크: link
저작권: copyright
2. 색상: 색상 이름을 사용합니다. 또는
.red { color: red }
.f60 { color: #f60; }
.ff8600 { color: #ff8600 }
(2) 글꼴 크기, 직접 사용 +font size"를 이름으로
.font12px {font-size: 12px; }
.font9pt {font-size: 9pt; }
(3) 정렬 스타일, 정렬 대상의 영문 이름을 사용합니다. , 예:
.left { float:left; }
.bottom { float:bottom; }
(4) 제목 표시줄 스타일, "카테고리 + 함수" 사용 이름 지정 방법, 예:
.barnews { }
.barproduct { }
참고:
u는 항상 소문자여야 합니다.
u는 가능한 한 영어를 사용해야 합니다.
u는 대시와 밑줄을 사용하지 마세요.
u 2 두 번째 단어의 첫 글자는 대시나 밑줄 없이 대문자로 표기할 수 있습니다(예: mainContent).
u 한눈에 이해하기 쉬운 단어가 아니면 축약하지 마세요.
3. 메인사이트 CSS 파일
Main master.css
# 🎜🎜#module module.css 기본적으로 base.css(root.css) 공유 레이아웃, 레이아웃 레이아웃.cssthemes. csscolumns columns.cssTextfont.cssformforms.csspatch mend.css# 🎜🎜#Print print.css
18. 패딩이 너비 문제에 영향을 미칩니다
중첩할 태그 그룹 사이에 공백이 있으면 그냥 외부에 있는 라벨의 패딩을 정의하는 대신 내부에 있는 라벨의 여백 속성을 그대로 둡니다
19. 완벽한 단일 픽셀 개요 테이블
table{border-collapse:collapse ;}
td{border:1px solid #000;}
20. 텍스트가 너무 길면 긴 부분이 줄임표로 표시됨 #🎜🎜으로 변경됩니다. #