CSS, 의사, 의사 : 호버, 아이, 대상

HTML과 CSS를 결합함으로써, 당신은 절대적으로 웹 페이지의 모든 요소를 제어 할 수 있습니다. 스타일을 사용하면 쉽게 블록 또는 라인의 모양을 변경할 수 있습니다. 종종 더 복잡한 작업을 수행해야 코더 - 별도의 일부 또는 특정 상태로, 그 자체가 아닌 요소의 모양을 변경할 수 있습니다. 이 경우, 의사 CSS의 도움으로.

마크 업의 정규 수업과 같은 원칙에 의사는-작동하지만 물리적으로 그들은 여기에 존재하지 않습니다. 그들은 일반적인 선택을 선택하지 않습니다 문서 정보에 포함되지 않은 요소를 기준으로 선택할 수 있습니다. 다음은 간단한 예입니다 : 당신은 빨간 버튼이 있고, 당신이 파란색 된 마우스를 가져 가면 당신이 원하는. 이론적으로는 자바 스크립트에서 구현 될 수 있지만, 왜 어려운가? 훨씬 더 편리는 사용하기 : CSS를 맴 돕니 다. 그것의 도움으로 당신은 어떤 유닛에만 마우스 커서를 트리거 될 매개 변수를 제공 할 수 있습니다.

CSS 의사 클래스 목록은 정기적으로 업데이트됩니다. 아마,이 소재, 몇 가지 새로운 나타납니다 읽는 동안. CSS3의 사양에 나타난 사람을 고려, 시작합니다.

: N 번째 - 형

당신은 당신이 즉, 교대 색상을 사용하고자하는 목록을 가지고 가정, 첫 번째 줄은, 빨간색 문자로 작성 예,하고 초 - 블루에서 다시, 다시 세 번째 붉은 네 번째 ... 블루. 이전에는 새로운 클래스를 생성했다. 과거의 레이아웃 클래스 목록에있는 각 요소에 추가 한 다음 스타일 시트 모양을 변경했습니다. 너무 편안하고 레이아웃을 오염하지 않았다.

이제 모든 것이 쉽다. CSS 의사 클래스를 사용하여 n 번째의 형. 이 마크 업에 아무 것도 변경하지 않고, 원하는 시각 효과를 얻을 수있는 기회를 제공 할 것입니다. 원리는 간단하다 : 당신은 선택을 입력하고 괄호 안에 이름 뒤에 공식 또는 필수 요소를 찾을 키워드를 작성합니다. 홀수 - n 번째의 형 (홀수) : 예를 들어, 모든 짝수 요소 (짝수)의 제 n 형 -, 및 ,:. 공식 많은 수의 정밀 제어하는 데 사용됩니다있다. 브래킷은 가능 매수를 표시 -이 경우 스타일 인덱스가이 수와 동일한 요소에 적용된다.

: N 번째 - 아이

행동의 원칙이 CSS 의사 클래스는 이전과 비슷하지만 달리 선택한 항목의 아이들과 함께 독점적으로 작동합니다. (가)

은 부모
• 이기 때문에, n 번째 아이 : 당신이 목록에서
• 태그의 모양을 사용자 정의하는 데 사용하려는 경우 예를 들어, UL 디자인을 사용해야합니다.

  하기 식의 정확한 제어를 위해 사용된다. 그들은 초보자를위한 매우 어려운,하지만 모든 것이 쉬워집니다 방법의 구문에 좀 더 깊이 가치가있다. 다음과 같은 공식은 : A가 B +, - 오프셋 - 인자 및 B이다. N 나타내는 괄호 안의 경우, 예를 들어, (가 및의 형태로 추가적인 조건을 지정하지 않기 때문에 b) 모든 하위 요소는 의사 - 선택한다. (오프셋은 2와 동일하기 때문에)는, N + 2, 제 제외한 모든 요소를 지정하는 경우를 선택한다. 무엇보다도, 이번에는 실제로 공부. 하위 구성 요소와 다른 수식 실험.

  : 마지막 아이

  모든 것은 간단합니다. CSS 아이 의사 클래스는 특정 항목을 선택하는 데 사용됩니다. 이는 상위 구성 요소의 마지막 자식을 선택합니다. 다음 행으로의 전송을 방지하기 위해 테이블의 마지막 행을 선택하거나 마지막 블록에서 들여 쓰기를 제거하기 위해, 예를 들어, 매우 자주 사용됩니다.

  : N 번째 - 마지막으로 아이

  상향 이동 요소를 사용하는 경우, 즉. E. 동작 원리에 의해 앞서 언급 한 n 번째 자식 유사하지만 반대 방향으로 작용한다. 마지막 몇 가지 항목을 찾아야하는 경우에 유용합니다.

  당신은 당신이 일 기존 클래스에 의해 잘받을 수 있기 때문에 이러한 의사 클래스와 가상 요소, 쓸모 CSS 생각할 수 있습니다. 이는 그렇지 않다. : n 번째 자녀, : nth- 마지막 아이 - 예를 들어, 블록이 아이들의 거대한 숫자가 있습니다 경우 대형 프로젝트에서 작업 할 때와 그 유사체 매우 편리합니다. 수동으로 클래스가 길고 힘든 준비.

  의사 - 상태 제어

  당신은 특정 상태에서 요소의 모양을 변경할 수 무엇을해야하는 경우? 이 경우는 CSS 의사 클릭 가리키고 다른 행위를 제공합니다. 우리가 자세히를 살펴 보자.

  : 링크

  이 의사 CSS 참조는, 모든하지만 만 아직 방문하지 않은. 그것은 당신이 요소 , 사용자가 아직 통과하지 않은 스타일을 지정할 수 있습니다.

  : 방문

  단지 이미 방문한 링크를 제어하는 이전의 실시 예,의 아날로그. 당신이 필요로하는이 두 의사 클래스 결합, 정확히 태그의 모양을 사용자 정의 할 수 있습니다. 상태가 특정 브라우저에 대해 계산 및 처리 내역 후 배출되는 것을 유의하십시오.

  의사 - 클래스 : 대상 CSS

  어느 정도 사용하면 가장 흥미있는 의사 클래스 중 하나는 자바 스크립트의 사용을 대체합니다. 이 식별자는 페이지의 로우 어드레스에 포함 된 제어를 가능하게한다. 예, 그것은 어려운 처음으로 이해합니다. 예를 구문 분석하려고합니다.

  ID1, ID2, ID3 :의 우리가 특정 ID를 가진 페이지 3 블록의 DIV에있는 가정 해 봅시다. #의 ID1, #의 ID2, : 우리는 또한 href가 해당 값에 세 개의 링크가 #의 ID3합니다. 당신은 페이지 자체가 될 것입니다 해당 ID에 대한 링크 후 페이지의 행 주소의 첫 번째 링크를 클릭합니다.

  속성 표시 지정된 모든 블록의 DIV를위한 CSS : 없음, 그들은 기본적으로 표시되지 않습니다. 우리는 목표 사용 : DIV와 그것을 속성 표시 줄 : 블록을. 특정 href를 함께 링크를 클릭하면 이제 해당 ID를 가진 블록 디스플레이에 할당됩니다 : 블록, 따라서, 그들은 페이지에 표시하기 시작합니다! 당신이 = HTTP를 HREF 링크를 클릭하면 : // 사이트 / 기사 / 319683 / % E2의 % 80 % 9D 번호의 ID1의 %의 E2 % 9D 등등 ID1로 차단 것이다 80 % ..

  여전히 아무것도 이해하지? 실험을 시도하십시오. 위에서 설명한 페이지 레이아웃과 스타일을 만듭니다. 몇 분 후에 당신은 큰 그림의 모든 것을 가지고있다.

  모든 소자에 적용 할 수있는 의사

  작업에 필요한 전술 한 의사 링크의 대부분. 그러나, 모든 요소는 이 필요합니다. 몇몇 실시 완전히 페이지 중 어느 부분에 적용 할 수있다.

  • : 활성 사용자가 마우스 왼쪽 버튼을 클릭하는 스타일 요소로 사용된다;
  • : 호버 -에 요소에 대한 CSS는 사용자가 가리킬;
  • : 초점 - 초점이 지금 페이지의 그 부분에 대해. 이 의사 클래스는 종종 형태로 작업하는 데 사용됩니다. 예를 들어, 방문자가 위에 커서를 설정하고 전화 걸기 문자를 시작할 때, 사용자 이름 프롬프트를 선택합니다.

  그 기억 : 긴급한시 활동에만 유효합니다. 마우스 왼쪽 버튼의 종료가 사라집니다 스타일의 도움으로 설정되고이 기본적으로 표시 될 때 항목이 표시됩니다 직후. 대부분의 경우,이 의사 클래스는 버튼을 사용하여 작업하는 데 사용됩니다. 당신은 국가의 큰 숫자로 설정할 수 있습니다. 녹색 눌러 - - 예를 들어, 기본 버튼은 파란색, 호버이다 빨강, 등 ...

  물론, 단지 의사 클래스는 완전히 현대적인 브라우저에서 지원됩니다. 예를 들어, IE6과 7 만 6으로 참조 작업에 초점 및 호버 활성을 사용할 수 없습니다. 바라건대, 당신은 이러한 브라우저에서 작동하지 않습니다,하지만 당신은 여전히 올라 오네해야하는 경우, 조건부 주석을 사용합니다.

  추가 의사

  목록 위에 나열된 옵션이 멈추지 않습니다. (: 선택) 전용으로 표시 체크 박스와 라디오 스위치 (: 사용 가능)하거나 잘라 (장애인) 만 포함 된 요소는 현대 CSS 덕분에 복구 할 수 있습니다. 간단히 좀 더 철저한 제어 내용의 모양을 위해 사용할 수있는 몇 가지 더 많은 옵션을 설명합니다.

  • : 전용 아이 - 유일한 자식 요소 요소에 스타일을 적용 할 수 플러시;
  • : 랭 - 언어 lang 속성을 사용하여 준 요소와 함께 작동합니다;
  • : 루트 - 루트 요소를 선택하는 데 사용됩니다. 따라서, 이러한 HTML 태그는 ;
  • : 없습니다 - 매우 강력한 도구입니다. 그것은 당신이 선택기의 특정 스타일의 사용을 제한 할 수 있습니다. .blue 색 :하지 (스팬 여기서 예이다 ). 그들은 하지 않은 경우 셀렉터는 클래스 블루 색상의 모든 요소에 스타일을 적용합니다.

  의사 클래스의 전체 목록은 한 페이지에 기지개 할 수 없습니다. 대부분의 웹 디자이너는 자바 스크립트와 상태를 관리하기 위해 선호, 실제로 그들 중 일부를 사용합니다. 예, 그것은 편리하지만, 적절한 의사를 사용하여 더 효과적인 결과를 쉽게 달성 할 몇 가지 순간이있다.