css 지식 포인트 요약
20346 단어 css
CSS 선택기는
1. ：p, body, img, div{}
2. ：p + p { color:#f00; }
3. ： p[title] { color:#f00; }
4. （ ） ：body ul li{}
5. ：div > p{}
6.ID ：#myDiv{}
7. ：.class1{}
8. ：E:first-line，E:before
9. ：E:first-child ，E:visited，E:focus，E:enabled
10. ：p { font-size:1em; }
하위 선택기와 하위 선택기의 차이점:
， ， 。
， “ ” 。
참고: IE6에서는 하위 선택기만 지원되며 하위 선택기는 지원되지 않습니다.
상자 모형
css 상자 모델 설명:
ul 아래의 li에 폭을 설정하면 그들이 차지하는 용기의 폭을 평균적으로 떨어뜨린다.div >ul> li> a 태그의 폭과 높이:body 요소를 지정할 때div 각div의 기본 너비는 브라우저의 100%이고 높이는 브라우저마다 해석이 다르다. 예를 들어 불여우 아래에서는 131px, chrome에서는 142px로 구체적인 메커니즘이 불분명하다.css 글꼴 속기 규칙
css로 글꼴 스타일을 정의할 때 다음과 같이 할 수 있습니다.font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
css 속기 속성을 사용할 수 있으므로 그럴 필요가 없습니다.
font: bold italic small-caps 1em/1.5em verdana,sans-serif
주의해야 할 것은
css 속기 버전은 font-size와 font-family 속성을 동시에 지정할 때만 적용됩니다.만약 당신이 지정하지 않았다면 font-weight, font-style, 또는 font-variant, 이 값들은 자동으로 normal 로 기본값됩니다.불필요한 선택기 피하기
때때로 당신은 다음과 같은 글씨를 쓸 수 있다.
ul li { ... }
ol li { ... }
table tr td { ... }
그러나 사실상 불필요한 문법이다.
<li> 할 줄 알고 <ul> 또는 <ol> 과 연결할 줄 알기 때문이다. <td> 는 <tr> 와 <table> 에만 존재할 수 있는 것처럼, 여기서는 그것들을 다시 한 번 반복할 필요가 없다.!Important
!important 표시된 모든 스타일은 나중에 다시 쓰더라도 브라우저는 표시된 스타일만 사용합니다. #content{ height:960px !important; height:900px; }
!important：IE7/IE8/IE9/FireFox는 위에 부가!important된 문장을 식별할 수 있고 부가!important된 문장을 보면 두 번째 문장을 집행하지 않는다. 비록 그들은 두 번째 문장을'알지만'!important'을 부가한 문장은 절대 우선순위가 있기 때문에 그것만 존재하면 두 번째 문장은 집행을 허락하지 않는다.IE6는
!important의 문장을 실행한 후에 두 번째 문장“height:900px”을 실행하고 뒤의 양식으로 앞의 양식을 덮어쓰기 때문에 IE6에서 최종 Height 값은 900px이다.@import and
<link> 어떤 방법을 사용해서 당신의 스타일시트를 포함할지 결정하기 전에, 당신은 이 두 가지 방법이 무엇에 사용되는지 알아야 합니다.
링크:
링크는 외부 CSS와 웹 페이지를 연결하여
<head> 머리 탭에 추가하는 것이다. 구체적인 형식은 다음과 같다. <link href="styles.css" type="text/css" />
가져오기 스타일:
두 개 이상의
css 파일의 공통 부분을 통해 css 페이지에 css 파일을 도입하고 @import url（” “）@import url("global.css");
@import url(global.css);
@import "global.css";
상기 세 가지 방식은 모두 유효하며,
차이점:
1）link XHTML ， @import CSS ;
2） ，link ， @import CSS ;
3）@import IE5 ， link XHTML ， ;
4）link @import .
인라인 요소, 블록 요소 및 빈 요소
인라인 요소 특성
1、 ；
2、 、 、 ；
3、 ， 。
인라인 요소는 수평 방향을 설정한
padding-left、padding-right、margin-left、margin-right에서는 여백 효과가 나타나지만 세로 방향padding-top、padding-bottom、margin-top、margin-bottom에서는 여백 효과가 나타나지 않습니다.블록 레벨 요소 특성
1、 ， 。（ ， ）
2、 、 、 。
3、 ， 100%（ ）， 。
html에서
<span>、<a>、<label>、<input>、 <img>、 <strong>와<em>는 전형적인 행내원소(inline)원소이다.블록급 요소는 너비를 설정할 수 있지만 실제 너비는 자체 너비 +padding입니다.Block 요소는 한 줄을 단독으로 차지해야 합니다.내연 원소는 단독으로 한 줄을 차지하지 않기 때문에 그에게 너비를 설정해 주어도 소용없다.
블록 레벨 요소 및 인라인 요소 목록:
빈 요소
유명한 공원소:
<br> <hr> <img> <input> <link> <meta> 잘 알려지지 않은 것은: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>길이 단위em
em는 현재 개체의 텍스트에 대한 글꼴 크기font-size를 기준으로 상대적인 길이 단위입니다.예를 들어 웹 페이지body의 텍스트 크기는 사용자 브라우저에서 기본적으로 렌더링16px이기 때문에 이때1em = 16px.in
인치절대 길이 단위.
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
pt
점(Points).절대 길이 단위.
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
small
<small> 라벨은 작은 글씨체 효과를 나타낸다.<strong>, <em> 및 <b>, <i> 레이블`<strong>` `<em>` ， ， 。
`em` ， ， 。 html `<i>...</i>`;
`< b > < i >` ， ， 。
em strong (phrase elements)。
b 라벨과 i 라벨의 차이
b 。
： ， 。 。
i ，
： ， ， ， 。 。
각도 단위
deg
도원 하나 총 360도
90deg = 100grad = 0.25turn
grag
계단식(Gradians).원 하나에 총 400계단
90deg = 100grad = 0.25turn
turn
Turns원 하나
90deg = 100grad = 0.25turn
rad
라디언스(Radians).하나의 원은 모두 2π호도이다
90deg = 100grad = 0.25turn
CSS 다중 클래스 선택기
class 값에는 단어 목록이 포함될 수 있으며, 단어 사이를 빈칸으로 구분할 수 있습니다.예를 들어 특정한 요소를 중요(important)과 경고(warning)로 동시에 표시하기를 원한다면 다음과 같이 글을 쓸 수 있다.<p class="important warning">
This paragraph is a very important warning.
</p>
아이디에 대해서 이렇게 쓰면 안 돼요.
모든 브라우저의 CSS 투명도
원소의 투명도는 항상 괴로운 문제이다. 다음은 모든 브라우저의 투명도 설정을 실현할 수 있는 방법이다.
.transparent { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; }
Zoom 속성은 IE 브라우저의 전용 속성으로 Firefox 등 브라우저는 지원하지 않습니다.객체의 배율을 설정하거나 읽어들일 수 있습니다.이외에도 IE의 hasLayout 속성을 촉발하고 부동 제거margin의 중첩을 제거하는 등 다른 작은 작용도 있다.원소의
hasLayout 속성 값이true일 때, 이 원소는 레이아웃 (layout) 이 있다고 합니다.css float 속성
정의 및 사용
float 속성은 요소가 부동하는 방향을 정의합니다.이전에 이 속성은 항상 이미지에 적용되어 텍스트를 이미지 주위에 두었지만 CSS에서는 모든 요소가 부동할 수 있다.부동 요소는 그 자체가 어떤 요소든지 상관없이 블록 레벨 상자를 생성합니다.대체 요소가 아닌 부동 요소의 경우 명확한 너비를 지정합니다.그렇지 않으면 가능한 한 좁아질 것이다.
주석: 만약에 한 줄 위에 부동 원소를 제공할 수 있는 공간이 극히 적다면 이 원소는 다음 줄로 넘어갈 것이다. 이 과정은 한 줄이 충분한 공간을 가질 때까지 지속될 것이다.
위대한 함몰
플로팅 (float) 을 사용하는 비교적 의심스러운 일은 그들이 부모 요소를 포함하는 데 어떻게 영향을 미치는지 하는 것이다.만약 부모 원소가 부동 원소만 포함한다면, 그것의 높이는 0으로 축소될 것이다.만약 부모 요소가 보이는 배경을 포함하지 않는다면, 이 문제는 주의하기 어려울 것이다
무너진 직관적 대립면이 더 안 좋으니 아래의 상황을 봐라.
부동 지우기
다음 원소가 무엇인지 명확하게 알고 있다면 사용할 수 있다
clear:both.를 참고하십시오.이 방법은 매우 좋다. 그것은 필요없다. hack. 추가 요소를 첨가하지 않아도 좋은 의미성을 가지게 한다.css 거짓 선택기(:after)를 사용하여 부동을 지우려면 다음과 같이 하십시오.
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }
점진적 향상과 우아한 강등
콘셉트
우아한 강등과 점진적인 인상은
css3에 따라 흐르는 개념이다.저급 브라우저는 지원하지 않는다css3. 그러나 css3의 효과가 너무 우수하여 포기할 수 없기 때문에 고급 브라우저에서 사용css3하고 저급 브라우저는 가장 기본적인 기능만 보장한다.어떻게 보면 두 개념의 차이가 많지 않다. 모두 서로 다른 브라우저 아래의 서로 다른 체험을 주목하는 것이다. 관건적인 차이는 그들이 중시하는 내용과 이런 서로 다른 작업 절차의 차이이다.점진적 강화
progressive enhancement: 저버전 브라우저를 대상으로 페이지를 구축하여 가장 기본적인 기능을 확보한 다음에 고급 브라우저를 대상으로 효과, 상호작용 등 개선과 추가 기능을 통해 더욱 좋은 사용자 체험을 할 수 있다.우아한 다운그레이드
graceful degradation: 처음부터 완전한 기능을 구축한 다음 낮은 버전의 브라우저와 호환됩니다.구별하다
우아한 강등은 복잡한 현황에서 시작하여 사용자 체험의 공급을 줄이려는 시도이고, 점진적인 강화는 매우 기초적이고 역할을 할 수 있는 버전에서 시작하여 미래 환경의 수요에 부응하도록 끊임없이 확대한다.강등(기능 쇠퇴)은 되돌아보는 것을 의미한다.점진적 강화는 앞을 내다보는 동시에 그 기반이 안전한 지대에 있다는 것을 의미한다.
visibility:hidden 및 display:none
display:none ， ， ，
。
visibility:hidden ， 。
CSS
display:none 속성을 사용하면 HTML 요소(대상)의 너비, 높이 등 각종 속성 값이'분실'됩니다.visibility:hidden 속성을 사용한 후 HTML 요소(대상)는 시각적으로만 보이지 않고 (완전 투명) 공간 위치가 여전히 존재한다.text 텍스트 속성
text-indent
text-indent 속성은 텍스트 블록의 첫 줄 텍스트의 축소를 규정한다.참고: 음수 값을 사용할 수 있습니다.마이너스 값을 사용하면 첫 줄이 왼쪽으로 축소됩니다.큰 음수 값을 사용하여 들여쓰기를 하면 텍스트가 숨겨집니다. 예를 들어
-9999emletter-spacing과word-spacingletter-spacing 속성과 word-spacing의 차이점은 전자는 자모를 수정하는 간격이고, 후자는 단어나 한 글자를 수정하는 간격이다.text-transform
text-transform 속성은 텍스트의 대소문자를 처리합니다.이 속성에는 4개의 값이 있습니다.none
uppercase：
lowercase：
capitalize：
text-decoration
text-decoration:none
underline：
overline：
line-through：
blink：
white-space
pre-line ，
normal
nowrap
pre
pre-wrap
（ ： http://segmentfault.com/a/1190000000800711）이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
