CSS 규칙이 무엇인가요?-CSS 튜토리얼-php.cn

CSS 규칙은 무엇인가요?

여기서 31가지 CSS 문법 규칙을 정리했습니다:

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

일부 브라우저는 후보 스타일, 키워드를 지원합니다: 대체:

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 , :hover

IE6의 유연한 사용은 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

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) 공유

레이아웃, 레이아웃 레이아웃.css

themes. css

columns columns.css

Textfont.css

formforms.css

patch mend.css# 🎜🎜#

Print print.css

18. 패딩이 너비 문제에 영향을 미칩니다

중첩할 태그 그룹 사이에 공백이 있으면 그냥 외부에 있는 라벨의 패딩을 정의하는 대신 내부에 있는 라벨의 여백 속성을 그대로 둡니다

19. 완벽한 단일 픽셀 개요 테이블

table{border-collapse:collapse ;}

td{border:1px solid #000;}

20. 텍스트가 너무 길면 긴 부분이 줄임표로 표시됨 #🎜🎜으로 변경됩니다. #

21. 모든 스타일이 필요한 것은 아닙니다. 줄여서

p{padding:1px 2px 3px 4px}와 같이 스타일 시트를 정의하면 후속 프로젝트에서 padding 5px의 다른 스타일이 추가됩니다. 반드시 p.style1{padding:5px 6px 3px 4px}를 작성할 필요는 없습니다. p.style1{padding-top:5px;padding-right:6px;} 이렇게 쓰면 원본만큼 좋지 않다고 생각하실 수도 있는데, 혹시 생각해보신 적 있으신가요? 메소드는 스타일을 반복적으로 정의합니다. 또한 원래의 아래쪽 패딩 값과 왼쪽 패딩 값이 무엇인지 알 필요가 없습니다! 나중에 이전 스타일 P가 변경되면 정의한 p.style1의 스타일도 변경됩니다. (이 방법은 나중에 스타일을 수정할 때 매우 중요합니다.)

22. 일반적으로 사용되는 여러 CSS 세부 처리 스타일

1) 한자의 양쪽 끝 정렬: text-align: justify;text-justify:inter-ideograph;

2) 고정 너비 한자 잘림:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(줄바꿈하지 마세요. 하지만 여러 줄이 아닌 한 줄의 텍스트 잘림만 처리할 수 있습니다. (IE5 이상) FF는 처리할 수 없으며 숨기기만 합니다.

***범용 강제 줄 바꿈: 공백:normal;word-break:break-all

금지된 줄 바꿈: 공백:nowrap

#🎜 🎜#강제 줄 바꿈: word-wrap: break-word; word-break: Normal;

.AutoNewline

{

/ *word- break: break-all; 방법 1은 필수*/

/*word-wrap:break-word;overflow:hidden; 방법 2*/

/* word-wrap :break-word; word-break: 일반; 방법 3*/

word-wrap:break-word;

}#🎜 🎜#

.NoNewline

{

/*word-break: 방법 1 필수*/

#🎜🎜 #white- space:nowrap;

}

3) 고정 너비 한자(단어) 줄바꿈: table-layout:fixed; (IE5 이상) FF는 불가능합니다.

4)Text효과를 보려면 마우스를 사용하여 이전 텍스트를 배치하세요. . 이런 효과는 외국 사이트에서는 많이 볼 수 있지만, 국내 사이트에서는 거의 볼 수 없습니다.

5) 이미지를 반투명으로 설정합니다. .halfalpha {Background-color:#000000;filter:Alpha(Opacity=50)}는 IE6 및 IE5에서 테스트를 통과했지만 FF에서는 실패했습니다. 이는 이 스타일이 IE의 비공개 항목이기 때문입니다.

6) FLASH 투명도: swf를 선택하고 원래 코드 창을 열고 앞에 위는 IE용 코드입니다.

FIREFOX의 경우 유사한 매개변수 wmode="transparent"를 태그에 추가하세요

7) 웹 페이지를 만들 때 마우스를 배치하는 데 자주 사용됩니다. 사진에 사진이 나타납니다. 밝게 하는 효과를 위해 사진 교체 기술을 사용하거나 다음 필터를 사용할 수 있습니다:

.pictures img {

필터: 알파(불투명도=45); }

.pictures a:hover img {

filter: 알파(불투명도=90)

#🎜🎜 #8) 레이어가 브라우저 중앙에 있습니다. 질문

body { text-align: center }

#content { text-align: left; margin: 0 auto }

#🎜🎜 #9) 레이어의 한 줄 콘텐츠의 수직 정렬 문제

# content{height:19px; line-height:19px; 콘텐츠가 포장되어서는 안 됩니다.

10) 브라우저에서 레이어의 세로 가운데 정렬 문제

단점: 스크롤 막대가 가로 또는 세로로 나타날 수 없고 한 화면에만 표시됩니다# 🎜🎜## 🎜🎜#사실 해결책은 다음과 같습니다. position:absolute 절대 위치 지정이 필요합니다. 레이어 위치 지정에는 음수 외부 패치 여백을 사용하는 방법을 사용합니다. 음수 값의 크기는 레이어 자체의 너비와 높이를 2로 나눈 값입니다.

예: 레이어의 너비는 400이고 높이는 300입니다. 절대 위치 지정을 사용하고 상단 및 왼쪽 거리를 50%로 설정합니다. margin-top의 값은 -150입니다. margin-left 값은 -200입니다. 이러한 방식으로 우리는 레이어가 브라우저의 수직 중앙에 위치하는 스타일 작성을 달성합니다.

예제 코드를 참조하세요.

div {

position:absolute;

top:50%;# 🎜 🎜#

왼쪽:50%;

margin:-150px 0 0 -200px;

너비:400px;

높이 : 300px;

border:1px 단색 빨간색;

}

11) CSS 제어 이미지 적응형 크기

div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?"600px ":"auto");

overflow:hidden;

}

23. 부동 속성이 있는 요소를 사용할 때 주의할 문제# 🎜🎜 #

1 테두리 속성을 사용하여 오류 요소

의 레이아웃 특성을 결정합니다.

부동산 속성 레이아웃을 사용하면 주의하지 않으면 오류가 발생할 수 있습니다. 이때 요소의 경계를 결정하기 위해 요소에 border 속성을 추가하면 오류의 원인이 밝혀집니다.

2. float 요소의 상위 요소는clear 속성을 지정할 수 없습니다.

MacIE에서 float 요소의 상위 요소에clear 속성을 사용하면 주변 float 요소의 레이아웃이 혼동됩니다. 이것은 MacIE의 유명한 버그입니다. 모르면 우회하게 됩니다.

3. 부동 요소는 너비 속성을 지정해야 합니다.

많은 브라우저에는 지정된 너비 없이 부동 요소를 표시할 때 버그가 있습니다. 따라서 float 요소의 내용에 관계없이 width 속성을 지정해야 합니다.

또한 요소를 지정할 때 단위는 px 대신 em을 사용해 보세요.

4. 플로트 요소는 여백 및 패딩과 같은 속성을 지정할 수 없습니다.

IE에는 마진 및 패딩이 지정된 플로트 요소를 표시할 때 버그가 있습니다. 따라서 float 요소에 여백 및 패딩 속성을 지정하지 마십시오(여백 및 패딩을 설정하기 위해 float 요소 내에 div를 중첩할 수 있음). 해킹을 사용하여 IE에 특수 값을 지정할 수도 있습니다.

5. float 요소의 너비 합은 100%보다 작아야 합니다.

float 요소의 너비 합이 정확히 100%인 경우 일부 고대 브라우저에서는 제대로 표시되지 않습니다. 따라서 너비의 합이 99% 미만인지 확인하시기 바랍니다.

24가지 브라우저 호환성 문제(FF/IE6/IE7)

1. CSS 해킹: IE6, IE7, firefox

구별 FF, IE7, IE6:

배경: 녹색 !중요; ; *배경:blue;

IE6은 *를 인식할 수 있지만 !important는 인식할 수 없습니다.

IE7은 *를 인식할 수 있고 !important도 인식할 수 있습니다.

FF는 *를 인식할 수 없지만 !important는 인식할 수 있습니다.

한 가지 더 추가하려면 밑줄 "_"을 추가하세요.

IE6은 밑줄을 지원하지만 IE7이나 Firefox는 밑줄을 지원하지 않습니다.

이렇게 하면 firefox, IE7, IE6도 구분할 수 있습니다

background:green!important , IE7은 중간에, IE6은 끝에 쓰여 있습니다.

2. Firefox와 IE의 BOX 모델 해석이 일치하지 않아 2px 차이가 발생합니다. reversed, !important 이 속성은 IE에서는 인식되지 않지만 다른 브라우저에서는 인식됩니다. 따라서 IE에서는 실제로 다음과 같이 해석됩니다. div{maring:30px;margin:28px}를 반복적으로 정의하면 마지막 정의에 따라 실행되므로 그냥 margin:XXpx!important;

3이라고 쓸 수는 없습니다. 다른 것을 선택하기 위한 조건부 주석 브라우저(CSS 핵보다 간단함)

4. IE8

.color{

Background-color: #CC00FF; /*모든 브라우저가 보라색으로 표시됩니다*/

배경 색상: #FF00009; /*IE6, IE7 및 IE8은 빨간색으로 표시됩니다*/

*배경 색상: #0066FF /*IE6 및 IE7은 파란색으로 표시됩니다*/

_Background-color: #009933; * IE6은 녹색으로 변합니다*/

25. W3C

1에 따른 표준 원칙. 테이블을 정렬하기 전에 세 가지 수준 내에서 테이블 중첩을 제어하도록 노력하세요. 두 개의 태그 은 이 두 태그가 많은 문제를 일으키는 것으로 나타났습니다.

2. 웹 페이지는 전체 큰 테이블을 사용하지 않도록 해야 합니다. 브라우저가 페이지의 요소를 해석할 때 테이블 단위로 하나씩 표시하기 때문입니다. 웹 페이지는 큰 테이블 내에 중첩되어 있으므로 방문자가 URL을 입력할 때 처음에는 오랫동안 공백이 표시되고 모든 웹 콘텐츠가 동시에 나타날 수 있습니다. 이렇게 해야 한다면 태그를 사용하여 큰 테이블을 청크로 표시할 수 있습니다.

3. 조판 시 첫 번째 줄을 들여쓰기해야 하는 경우가 종종 있습니다. 효과를 얻으려면 공백을 사용하지 마세요. 표준 접근 방식은 스타일 시트에 p { text-indent: 2em } 을 정의하는 것입니다. 그런 다음 각 단락에

표시를 추가하세요. 일반적인 상황에서는 닫는 표시를 생략하지 마세요.

4. 이미지 표시 크기를 인위적으로 방해하는 사용을 금지하며, 이는 제작 과정에서 이미지를 반복적으로 수정해야 하는 경우가 많기 때문입니다. 이렇게 하면 이미지 표시 크기에 대한 사람의 개입을 피할 수 있고 브라우저 자체 기능을 최대화할 수 있습니다. 이미지를 로드하지 않은 경우, 사이트 크기로 인해 웹페이지가 로딩되는 동안 흔들릴 수 있습니다. (이미지를 고정된 크기의 테이블에 삽입하면 이러한 현상이 발생하지 않습니다.) 특히 크기가 큰 경우에는 이러한 현상이 발생하지 않습니다. 이미지의 크기가 크면 이 현상은 매우 심각할 것입니다. 따라서 이러한 상황으로 인해 웹페이지가 확실히 흔들리게 될 것으로 예상되는 경우에는 반드시 마지막에

5. 브라우저의 자동 레이아웃 기능을 극대화하려면 전체 텍스트 분할에
을 사용하여 수동으로 개입하지 마세요.

6. 각 언어의 단어 사이에는 머리글 기호 앞과 뒤 기호를 제외하고 반각 간격을 두어야 합니다. 한자 사이의 구두점은 전자 구두점이어야 하며, 영문자와 숫자 주위의 괄호는 반드시 공백이어야 합니다. 반너비 괄호.

7. 모든 글꼴 크기는 스타일 시트를 사용하여 구현해야 하며, 태그는 페이지에 표시되는 것이 금지됩니다.

8. 웹페이지에 연속해서 두 개 이상 등장하지 마시고, 전각 공백을 최대한 적게 사용해주세요. (영문 문자 세트에서는 전각 공백이 글자가 깨질 수 있습니다.) 들여쓰기, 패딩, 여백, hspace, vspace 및 투명 gif 사진을 달성합니다.

9. 중국어와 영어를 혼합할 때 영어와 숫자를 verdana 및 arial 글꼴로 정의하도록 최선을 다합니다.

10. 줄 간격을 정의하려면 백분율을 사용하는 것이 좋습니다. 일반적으로 사용되는 두 줄 간격 값은 line-height:120%/150%입니다.

11. 웹 사이트의 모든 경로는 상대 경로를 사용합니다. 일반적으로 기본 파일의 링크 경로는 전체 이름으로 작성할 필요가 없습니다. 예를 들어

12. 삽입 그래픽 텍스트에는 더 큰 글꼴 크기를 사용하고 그래픽에 텍스트를 포함하지 않는 것이 좋습니다.

13. "웹 페이지 크기"는 HTML 파일과 모든 포함된 개체를 포함한 모든 웹 페이지의 파일 크기의 합으로 정의됩니다. 사용자는 참신한 사이트보다는 빠른 사이트를 선호합니다. 모뎀 사용자의 경우 페이지 크기를 34K 미만으로 유지하는 것이 적합합니다.

14. Float 요소는 너비 속성을 지정해야 합니다.

많은 브라우저에서 지정된 너비 없이 Float 요소를 표시할 때 버그가 있습니다. 따라서 float 요소의 내용에 관계없이 width 속성을 지정해야 합니다.

또한 요소를 지정할 때 단위는 px 대신 em을 사용해 보세요.

15. 부동 요소는 여백 및 패딩과 같은 속성을 지정할 수 없습니다.

IE에는 여백 및 패딩이 지정된 부동 요소를 표시할 때 버그가 있습니다. 따라서 float 요소에 여백 및 패딩 속성을 지정하지 마십시오(여백 및 패딩을 설정하기 위해 float 요소 내에 div를 중첩할 수 있음). 해킹을 사용하여 IE에 특수 값을 지정할 수도 있습니다.

16. float 요소의 너비 합은 100%보다 작아야 합니다.

26. 목록 요소 ul ol li dl dt dd 해석

Content 1

Content 2

제목
: 콘텐츠 설명 1; 콘텐츠 설명 2