초보자를위한 유용한 CSS 팁 20 가지

예전에는 개발자와 프로그래머에게 웹 사이트 업데이트를 돕기 위해 많은 노력을 기울였습니다. CSS와 유연성 덕분에 스타일을 코드에서 독립적으로 추출 할 수 있습니다. 이제 CSS에 대한 기본적인 이해로 초보자조차도 웹 사이트 스타일을 쉽게 바꿀 수 있습니다..

자신의 웹 사이트를 만들기 위해 CSS를 선택하거나 단순히 블로그의 모양과 느낌을 약간 조정하는 데 관심이 있는지 여부에 관계없이 더 강력한 기반을 얻기 위해서는 기본 사항부터 시작하는 것이 좋습니다. 몇 가지를 살펴 보겠습니다. CSS 팁 우리는 유용 할 것이라고 생각했다. 초보자. 점프 후 전체 목록.

1. 용도 reset.css

   CSS 스타일을 렌더링 할 때 Firefox 및 Internet Explorer와 같은 브라우저는 다양한 방식으로 처리합니다.. reset.css 모든 기본 스타일을 재설정하므로 실제 빈 스타일 시트로 시작합니다..

   다음은 일반적으로 사용되는 몇 가지 예입니다. reset.css 프레임 워크 - Yahoo Reset CSS, Eric Meyer의 CSS 재설정, 트리폴리

2. 속기 CSS 사용

   속기 CSS는 CSS 코드를 작성하는 짧은 방법을 제공하며, 무엇보다 중요한 것은 코드를 명확하고 이해하기 쉽도록 만드는 것입니다..

   이런 식으로 CSS를 만드는 대신

   .header background-color : #fff; 배경 이미지 : url (image.gif); background-repeat : no-repeat; 배경 위치 : 왼쪽 상단; 

   다음과 같이 단축 할 수 있습니다.

   .header background : #fff url (image.gif) no-repeat 왼쪽 위

   더 - CSS 소개, 유용한 CSS 속기 속성

3. 이해 수업 과 신분증

   이 두 선택자는 종종 초보자를 혼동합니다. CSS에서, 수업 점으로 표시됩니다. " 동안 신분증 해시 '#'입니다. 간단히 말해서 신분증 고유하고 자체를 반복하지 않는 스타일에서 사용됩니다., 수업 반대편에서 다시 사용할 수 있습니다..

   더 - 클래스 대 ID | 클래스, ID | 클래스와 ID를 함께 적용

4. 의 힘

5. a.k.a 링크 목록은 올바르게 사용할 때 매우 유용합니다.
   또는
   , 특정 탐색 메뉴 스타일 지정.

   • 잊다 , 시험

     CSS의 가장 큰 장점 중 하나는

     스타일링면에서 총체적 유연성을 달성하기 위해.

     달리하다

     , 어디에 내용이 '잠겨'있는지

     의 세포. 대부분을 말하는 것이 안전합니다. 레이아웃은 적절한 스타일링, 거대한 표 내용을 제외하고는. 더 - 테이블이 죽었다., 테이블 대. CSS, CSS 대 테이블 CSS 디버깅 도구 CSS를 조정하는 동안 레이아웃의 즉각적인 미리보기를 얻는 것이 좋으며, CSS 스타일을 더 잘 이해하고 디버깅하는 데 도움이됩니다. 다음은 브라우저에 설치할 수있는 무료 CSS 디버깅 도구입니다 : FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar 및 Firebug. 불필요한 선택자 피하기 때로는 CSS 선언이 더 간단해질 수 있습니다. 즉, 다음을 코딩하는 경우입니다. ul li ... ol li ... 테이블 tr td ... 그것들은 단지 짧아 질 수 있습니다. li ... td ... 설명: 안에 만 존재할 것입니다. 또는 과 과 내부에만있을거야. 그래서 다시 삽입 할 필요가 없습니다.. 앎 !중대한 표시가있는 모든 스타일 !중대한 아래에 덮어 쓰기 규칙이있는 경우 관계없이 사용하게됩니다.. .페이지 배경색 : 파랑! 중요; 배경색 : 빨강; 위의 예에서, 배경색 : 파란색 표시가되어 있기 때문에 적응할 수 있습니다. !중대한, 거기에 배경색 : 빨강; 그 밑에. !중대한 덮어 쓰지 않고 강제로 스타일을 적용하려는 상황에서 사용되지만 Internet Explorer에서는 작동하지 않을 수 있습니다. 이미지로 텍스트 바꾸기 대체적으로 이것은 연습입니다. 표제 텍스트 기반 제목에서 이미지로. 방법은 다음과 같습니다.. h1 텍스트 들여 쓰기 : -9999px; 배경 : url ( "title.jpg") no-repeat; 너비 : 100px; 높이 : 50px; 설명: 텍스트 들여 쓰기 : -9999px; 텍스트 제목을 화면에서 꺼내고에 의해 선언 된 이미지로 대체합니다. 배경: … 고정 된 폭 과 신장. CSS 포지셔닝 이해하기 다음 기사에서는 CSS 위치 지정 사용에 대한 명확한 이해를 제공합니다. - 위치 : ... 더 - 10 단계로 CSS 포지셔닝 배우기 CSS @수입 대 외부 CSS 파일을 호출하는 두 가지 방법이 있습니다. @수입 과 . 어떤 방법을 사용해야하는지 잘 모를 경우 결정할 수있는 몇 가지 기사가 있습니다.. 더 - @import와 link의 차이점 CSS에서 양식 디자인하기 웹 양식은 CSS로 쉽게 디자인하고 사용자 정의 할 수 있습니다. 다음 기사에서는 방법을 설명합니다. 더 - 표가없는 양식, 양식 정원, 더 많은 양식 컨트롤 스타일 지정하기 영감을 얻으십시오. 영감을 얻기 위해 멋지게 디자인 된 CSS 기반 웹 사이트를 둘러 보거나 단순히 좋은 UI를 찾기 위해 탐색하는 경우 다음은 CSS 쇼케이스 사이트입니다. CSS 리믹스 CSS 뷰티 CSS 엘리트 CSS Mania CSS 누출 CSS 코드를 깨끗하게 유지하십시오 CSS 코드가 엉망인 경우, 혼동으로 코딩을 끝내고 이전 코드를 참조하는 데 어려움을 겪을 수 있습니다. 우선, 들여 쓰기를 적절히 작성하고 적절히 주석을 달 수 있습니다.. 더 - 코드 정리를위한 12 가지 원칙, CSS 코드 온라인 서식 지정 타이포그래피 측정 : 픽셀 대 여자 이름 측정 단위 사용시 문제가 있음 픽셀 또는 여자 이름? 다음 기사는 타이포그래피 단위에 대해 더 잘 이해할 수 있습니다.. CSS 브라우저 호환성 표 우리는 모두 각 브라우저가 CSS 스타일 렌더링 방식이 다르다는 것을 알고 있습니다. 각 브라우저에 대한 전체 CSS 호환성을 보여주는 참조, 차트 또는 목록을 갖는 것이 좋습니다.. CSS 지원 테이블 : #1, # 2, #삼, # 4. CSS의 다중 열 디자인 왼쪽, 가운데 및 오른쪽 열이 올바르게 정렬되는 데 문제가 있습니까? 다음은 도움이 될만한 몇 가지 기사입니다. 성배 검색에서 가짜 칼럼 CSS 열이 엉망인 이유 Litte 박스 (예제) 다중 열 레이아웃이 상자 밖으로 벗어남 절대 열 자유로운 CSS 편집자를 얻으십시오 전용 편집기는 항상 메모장보다 좋습니다. 다음은 우리가 권장하는 몇 가지 예입니다. 더 - 간단한 CSS, 메모장 ++, 스타일 CSS 편집기 미디어 유형 이해 CSS를 선언 할 때 미디어 유형이 적습니다. . 인쇄, 투영 및 화면은 일반적으로 사용되는 유형 중 일부입니다. 적절한 방법으로이를 이해하고 사용하면 더 나은 사용자 액세스가 가능합니다. 다음 기사에서는 CSS 미디어 유형을 다루는 방법을 설명합니다.. 더 - CSS 및 미디어 유형, W3 미디어 유형, CSS 미디어 유형, CSS2 미디어 유형 개발자 및 디자이너를위한 20 가지 유용한 iPhone 앱 더 나은 그래픽을위한 유용한 SVG 도구 20 개 웹 디자이너를위한 20 개의 매우 밝고 우아한 글꼴 다음 기사 유용한 Firefox 사이드 바 부가 기능 20 개 이전 기사 Instagram을 최대한 활용하는 20 가지 유용한 앱