프론트엔드 개발 CSS3 기술 경험 공유

최근에는 향후 검토를 용이하게 하기 위해 프런트엔드에 대한 몇 가지 지식을 요약했으며, 모든 사람이 우회하지 않기를 바라면서 이를 모든 사람과 공유했습니다. 이 글은 주로 CSS3 관련 지식을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 글꼴 설정(모든 브라우저와 호환)

@font-face {
font-family: 'iconfont';
src: url("fonts/iconfont/iconfont.eot");
src: url("fonts/iconfont/iconfont.eot?#iefix") format("embedded-opentype"), 
url("fonts/iconfont/iconfont.ttf") format("truetype"), 
url("fonts/iconfont/iconfont.woff") format("woff"),
 url("fonts/iconfont/iconfont.svg#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
@font-face { font-family : name ; src : url( url ) ; sRules }

지침:

name: 글꼴 이름

url: OpenType 글꼴을 지정하려면 절대 또는 상대 주소를 사용하세요.

s규칙: 스타일 시트 정의

포함 설정 HTML 문서의 글꼴입니다.

@font-face { 글꼴-가족: dreamy; 글꼴-가중치: src: url(http://www.example.com/font.eot) }

2. test"]

class 속성 값이 "test"로 시작하는 모든 div 요소의 배경색을 설정합니다.

div[class^="test"]
{
background:#ffff00;
}

3, [class*="abc"]

class 값에 "abc" " 요소가 포함되어 있습니다.

div[class*="abc"]

는 div

4에서 class=abc인 스타일만 나타냅니다. 마지막 p 태그

p:last-child{ background:#ff0000;}

5의 배경 스타일을 지정합니다. 디스플레이 장치의 최소 해상도가 768일 때 abc(CSS3)를 표시합니다. 최대값은 979입니다.

@media (min-width: 768px) and (max-width: 979px) {
.abc{}
}

ie6-ie9는

<style>
@media screen and (min-width: 1201px) {
.y-row {
width: 1200px;
border:1px solid #333; height:300px;
min-width: 1200px; } }
@media screen and (max-width: 1200px) {
.y-row {
width: 900px;
border:1px solid #333; height:300px;
min-width: 900px; } }
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

6, div >span(IE6는 지원하지 않음)

div>span{font 12px}

div 태그 내 아들 스팬 스타일을 지원합니다. 글꼴은 12px이고 div 내의 손자 범위는 작동하지 않습니다. 우선순위

7, 글꼴 그림자

.blue { background:#01dbff; text-shadow:2px 2px 2px #09a5ef }

Shadow 글꼴 왼쪽 거리 아래쪽 거리 그림자 거리 범위 그림자 색상

글꼴 배경 + 글꼴 그림자

8, 상자 그림자

-moz-border-radius:0px 5px 5px 0px -webkit-border-radius:0px 5px 5px 0px; border-radius:0px 5px 5px 0px; -moz- box-shadow:0px 0px 1px #fff 삽입; -webkit-box-shadow:0px 0px 1px #fff 삽입; box-shadow:0px 0px 1px #fff 삽입; -moz는 Firefox 브라우저 개인 속성을 나타냅니다.

-ms는 IE 브라우저 개인 속성을 나타냅니다.

-webkit은 Chrome 및 Safari 개인 속성을 나타냅니다.

-o는 Opera Apple 브라우저를 나타냅니다.

settings

border-radius:0px 5px 5px 0px; 테두리의 오른쪽 상단과 오른쪽 하단 둥근 모서리는 5px

box-shadow:0px 0px 1px #fff 삽입입니다. 이는 테두리 간격이 왼쪽으로 0, 상단으로 0, 그림자 범위가 흰색임을 의미합니다.

Inset이 있으면 Inset이 없는 상자 내부의 그림자, 즉 상자 외부의 그림자를 의미합니다.

참고: box-shadow:0px 0px 1px #fff

첫 번째 값이 0이면 상자의 그림자를 의미합니다. 왼쪽 및 오른쪽 테두리는 1px 범위입니다

첫 번째 값은 왼쪽 테두리의 그림자를 나타내는 양의 정수입니다.

첫 번째 값은 오른쪽 테두리의 그림자를 나타내는 음의 정수입니다.

마찬가지로

두 번째 값은 0으로 위쪽 및 아래쪽 테두리의 그림자를 나타냅니다.

두 번째 값은 위쪽 테두리에서 1px 그림자의 거리를 나타내는 양의 정수입니다.

첫 번째 값은 음의 정수입니다. 아래쪽 테두리의 그림자 설정

border- radius rounded Corners

9, :first-letter

p:first-letter{font-size:20px}

은 첫 번째 단어의 크기를 의미합니다. p 태그는 20px

10, div: 첫 번째 줄 { color: red; 글꼴 크기: 16px; }

은 DIV의 첫 번째 텍스트 줄이 빨간색이고 글꼴이 16px

임을 의미합니다. 11, p a: first-child { color: green }

은 p 상자의 첫 번째 줄이 a 하이퍼링크의 글꼴 색상이 green

12임을 의미합니다. p:before { content: "I am here" }

은 p 태그 개체 앞에 콘텐츠를 추가하는 것을 의미합니다: "I am here"

13. table: after { content: END OF TABLE }

은 테이블 뒤에 "END OF TABLE" 콘텐츠를 표시하는 것을 의미합니다.

14. 단일 콜론과 이중 콜론

의사 요소는 이중 콜론과 의사 요소 이름으로 구성됩니다. 현재 사양에서는 의사 클래스와 의사 요소를 구별하기 위해 이중 콜론이 도입되었습니다. 그러나 의사 클래스는 기존 스타일과 호환되며 브라우저는 :first-line, :first-letter, :before, :after 등과 같은 이전 의사 클래스를 동시에 지원해야 합니다.

이제 제목의 질문에 완전히 답할 수 있습니다. :before와 같이 CSS2 이전에 존재했던 의사 요소의 경우 단일 콜론과 이중 콜론::before가 동일한 효과를 갖습니다.

따라서 웹사이트가 웹킷, 파이어폭스, 오페라 및 기타 브라우저와만 호환되어야 한다면 의사 요소에 이중 콜론 쓰기를 사용하는 것이 좋습니다. IE 브라우저와 호환되어야 한다면 CSS2를 사용하는 것이 더 안전합니다. 단일 콜론 쓰기.

15. .uploader input[type=file]{}

은 클래스가 업로더이고 상자의 입력 레이블 특성 스타일이 type=file임을 의미합니다.

위 내용은 프론트엔드 개발 CSS3 기술 경험 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!