때론 살아남기 위해오늘날의 세계에서는 웹사이트를 만드는 방법을 알아야 합니다. 학교에서도 HTML의 기초를 가르칩니다. 그러나 이것은 양질의 자원을 만들기에 충분하지 않습니다. 또한 CSS 유사 클래스 및 유사 요소와 같은 CSS 스타일 시트의 기본 사항도 알아야 합니다.
이게 뭐야?
무언의 법칙에 의해,웹마스터는 소스 코드에서 볼 수 있는 구조 요소에 사용되는 CSS 마크업을 작성합니다. 그러나 HTML 문서에 작성되지 않았지만 스타일을 지정해야 하는 요소 그룹이 있습니다.
예를 들어 HTML 파일에는 다음을 포함하는 단일 태그가 없습니다.특정 요소 앞에 새 단락이나 영역을 대문자로 표시하는 역할을 합니다. 그리고 태그를 사용하면 링크의 활동을 표시하거나 마우스 커서가 이미지 위에 있을 때 이미지를 변경할 수 없습니다. 이러한 의미와 다른 많은 의미를 장식하기 위해 CSS 선택기가 있습니다: 의사 클래스 및 의사 요소.
의사 클래스는 영향을 주는 선택자입니다.문서의 기존 요소에 의사 요소는 일반적으로 원본 파일에 원래 존재하지 않는 영역을 설정하고 변경하는 데 사용됩니다. 간단히 말해서 의사 요소는 HTML 마크업에 없는 페이지의 새 영역을 정의하고 의사 클래스는 특정 조건에서 개체의 상태를 정의합니다.
이후: 이후
가장 먼저 살펴봐야 할 것은모든 자부심 있는 리소스가 사이트의 모양, 가독성 및 매력을 향상시키기 위해 사용하기 때문에 CSS 의사 요소 전후. 이러한 요소는 원본 문서 앞이나 뒤에 새 영역, 레이블 및 스타일을 추가하는 기능을 제공합니다.
모두, 아마도 적어도 한 번은 일부를 보았을 것입니다.사이트 공지, "New", "New" 또는 "Shock", "Favorites", "Best", "Super" 등의 단어가 뒤따릅니다. 이러한 개체는 유사 요소 뒤에 CSS를 사용하여 설정되었습니다.
이러한 위치를 생성하려면 캐스케이딩 스타일 시트에 다음 코드를 추가해야 합니다.
여기서 new라는 단어는 새 클래스의 이름을 지정합니다.따라서 HTML 마크업에서 원하는 단락 앞에 class = "new"를 입력해야 합니다. 클래스 이름은 여는 태그의 괄호 사이에 있어야 합니다. 모든 것이 올바르게 완료되면 브라우저 페이지의 단락 끝에 "새로운 것"이라는 문구가 나타납니다.
당연히 이 예제는 간단한 스크립트를 제공합니다.글자가 있지만 아무도 크기, 색상 및 위치를 변경할 수 없다고 말했습니다. 필요한 모든 매개변수는 콘텐츠 특성 뒤에 새 클래스에 입력할 수 있습니다. 세미콜론으로 구분하고 끝에 중괄호를 닫습니다.
전: 전
거의 동일한 특성을 가지고 있습니다.CSS 의사 요소 이전. 한 가지 작은 차이점이 있습니다. 필요한 요소를 개체 앞에 추가하도록 설계되었습니다. after와 정확히 같은 방식으로 씁니다. before라는 단어만 사용합니다.
텍스트의 다음 단락 앞에 다음을 추가할 수 있습니다.관심을 끄는 단어를 사용하거나 단순히 텍스트 앞에 그림이나 유니코드 요소를 배치할 수 있습니다. 예를 들어 여는 따옴표 또는 들여쓰기. 이를 구현하려면 CSS 마크업에 새 클래스를 추가하고 필요한 특성을 설정해야 합니다. 가장 간단한 솔루션은 다음과 같습니다.
문서의 끝을 들여쓰려면 after pseudo-class를 생성해야 합니다. 내용: 열기 쓰기 내용: 닫기, 그에 따라 변경포지셔닝. 이전 의사 클래스가 왼쪽 여백에서 들여쓰기된 경우 이후 클래스에서는 오른쪽에서 들여쓰기해야 합니다. 마크업에 이미지를 추가할 수도 있습니다(예: 같은 따옴표). 그러면 텍스트가 더 이상 둔한 시트처럼 보이지 않습니다.
에픽 사가: 퍼스트
새로운 프로젝트를 만드는 데 큰 인기또한 CSS 첫 번째 의사 요소를 사용합니다. 특히 이것은 엔터테인먼트 및 동화 주제가 포함된 프로젝트와 역사적 및 과학적 방향의 웹 리소스에 적용됩니다.
이 CSS 의사 요소에는 선과 문자의 두 가지 특성이 있습니다.
- 편지 - 텍스트 조각의 첫 글자를 다음으로 변경거기에 추가됩니다. 따라서 기준선이 본문 아래 몇 줄에 있는 요소인 단락 시작표시문자를 형성합니다. 계단식 스타일 시트에서 이 매개변수를 설정하려면 단락의 특성을 설정해야 합니다. 예를 들어, P: 첫 글자 {***} - 그리고 이미 괄호 사이에 필요한 모든 것을 나타냅니다.색상, 글꼴, 크기와 같은 매개변수. 첫 번째 단락에 대해서만 단락 시작표시문자를 생성해야 하는 경우 새 클래스가 생성됩니다(예제에서와 같이 새로운: 이후)
- 선 - 이 위치는 첫 번째 줄을 완전히 바꿉니다.절. 중요한 정보를 강조해야 하는 경우 과학 출판물에서 사용하는 것이 매우 편리합니다. 다른 예와 같은 방식으로 작성되었습니다. 그러나 여기서 기억해야 할 중요한 점은 의사 요소가 문장을 강조 표시하지 않고 문자열을 강조 표시한다는 것입니다. 사용자가 사용하는 브라우저에 따라 첫 번째 줄이 더 길거나 짧을 수 있으므로 이 선택이 우스꽝스럽게 보이지 않도록 하는 것이 중요합니다. 이러한 경우를 위해 CSS 의사 줄 바꿈이 생성되었습니다.
새로운 라인
사실 이 요소는 거의 사용되지 않습니다.<br> 태그로 성공적으로 대체되었습니다. 그러나 의사 요소로 줄 바꿈을 지정해야 하는 상황이 있습니다. 이러한 목적을 위해 같은 것을 사용할 수 있습니다. 이렇게 하려면 다음 코드를 작성하십시오. {내용: "A"; 공백: pre;}... 여는 태그의 괄호 사이에 클래스 이름을 입력해야 하며 태그가 닫히면 바로 뒤에 줄 바꿈이 옵니다.
이 옵션은 읽을 수 있는 콘텐츠를 구성할 때 더 많은 시간이 걸리며, 변칙적으로 알 수 없는 브라우저로 작업할 필요가 없다면 <br> 태그로 제한하는 것이 좋습니다.
의사 클래스 구문
이미 언급했듯이 의사 클래스는 다음을 정의합니다.사용자가 상호 작용하는 요소의 상태입니다. 구조에 보이지 않는 특성을 정의하는 CSS 의사 요소와 달리 가상 클래스는 행동 지향적입니다. 더 명확하게 하기 위해 작은 예를 들 수 있습니다. 사이트에 유용한 링크 목록이 있고 사용자가 해당 링크를 클릭하고 정보를 읽지만 잠시 후 이미 본 콘텐츠가 있다고 가정해 보겠습니다. 그는 많은 링크가 있고 다르지 않기 때문에 이 페이지로 다시 이동했습니다. 이러한 일이 발생하지 않도록 웹마스터는 표시된 링크의 색상을 변경하는 의사 클래스를 추가하면 사용자는 자신이 읽은 내용과 아직 이동하지 않은 위치를 정확히 알 수 있습니다.
모든 의사 클래스는 간단하고 검증된 구문을 사용하여 계단식 스타일 시트에 작성됩니다.
- 선택기: 유사 클래스 {스타일 특성: 색상, 크기, 들여쓰기, 위치 지정 등}
이러한 클래스는 세 가지 주요 그룹으로 나눌 수 있습니다.
- 요소의 상태를 결정하는 요소;
- 유사 요소와 관련된 것;
- 콘텐츠의 언어를 정의하는 더미 클래스.
의사 클래스 및 요소 상태
무엇이 될 수 있는지 순서대로 생각해 봅시다.의사 클래스. 첫 번째 아종은 특정 순간의 상태에 따라 요소의 상태가 변경되는 것이 특징입니다. 이것은 위의 예와 동일합니다. 링크를 따라가면 색상이 변경됩니다. 여기에는 다음 의사 클래스가 포함됩니다.
- :활동적인. 이 유사 클래스를 적용하면 별도의 조각 위로 마우스를 가져가면 활성화됩니다. 이것은 색상 변경, 크기 증가 또는 애니메이션으로 나타납니다.
- :링크... 주로 사용자가 아직 방문하지 않은 링크에 적용됩니다. 변경되지 않은 상태로 유지됩니다.
- : 초점... 텍스트 문서에 가장 많이 사용되며,사용자가 필드에 커서를 놓으면 텍스트의 색상을 변경할 수 있습니다. 이것은 때때로 이미지에도 사용됩니다. 예를 들어 그림은 음영으로 표시되지만 클릭하면 자연스러운 색상을 얻습니다.
- :호버... 사용자가 특정 개체 위로 마우스를 가져가면 색상이나 모양을 변경할 수 있으며 클릭할 필요가 없습니다.
- :방문... 기본적으로 이 의사 클래스는 기본적으로 색상을 자주색으로 변경하는 방문한 링크용입니다.
초보자는 이러한 유사 클래스가 링크용으로만 의도된 것으로 잘못 가정하지만 적절한 욕망과 상상력으로 사이트의 모든 요소를 변경할 수 있습니다.
특히 CSS 의사 요소용
이 선택기 그룹에는 의사 요소를 변경할 수 있는 의사 클래스가 포함됩니다. 그러한 유사 클래스는 : 첫째 아이... 계단식 스타일 시트에서 새 클래스를 생성해야 합니다. : 첫째 아이 텍스트 색상 또는 크기를 설정합니다. 결과는 다음과 같습니다.
- B: 첫째 아이 {색상: 빨강; }
가장 자주 이것은 필요할 때 수행됩니다.굵게 표시된 텍스트의 여러 부분을 선택하고 단락의 시작 부분만 달라야 합니다. 따라서 클래스 이름은 굵은 텍스트를 담당하는 태그와 동일합니다. 이것을 실행하면 의사 클래스 덕분에 굵은 글씨의 첫 번째 부분만 빨간색이 되고 나머지 단어는 표준 검정색이 됩니다.
또한 : 첫째 아이 첫 번째 단락에서 들여쓰기를 제거하는 데 사용한 다음 대신 색상: 빨간색; 작성해야 할 것입니다 텍스트 들여쓰기: 0;, 그리고 B를 P로 바꿉니다(단락의 시작을 담당하는 태그도 표시됨).
콘텐츠 언어
의사 클래스 : 랑 주로 다음과 같은 텍스트에 적용됩니다.다른 언어로 작성되었습니다. 예를 들어 기사에 원래 언어로 된 인용문이 포함된 경우 별도의 특성을 설정할 수 있습니다. 이 클러스터의 구문은 다음과 같습니다.
- 클래스명 : lang(언어) {텍스트의 특성(색상, 글꼴, 유형 등)}
위치 "언어"는 지정됩니다허용된 표준에 따라. 예를 들어 영어 - en, 러시아어 - ru, 독일어 - 드 등. 이 의사 클래스 덕분에 전체 문서에서 외래 텍스트의 스타일을 변경할 수 있습니다.
결론
CSS 의사 클래스 및 의사 요소는 다음 중 하나입니다.이해하기 어려운 계단식 스타일 시트에 대한 질문입니다. 그러나 여기에는 어려운 것이 없습니다. 가장 중요한 것은 의사 클래스가 앞에서 지정한 조건에서 실행되는 특정 상태라는 것을 이해하는 것입니다. 예를 들어, 마우스를 가리키거나 클릭할 때. 의사 요소는 HTML 마크업의 일부가 아니지만 고유한 스타일을 가질 수 있는 문서의 독립적인 부분입니다. 가상 HTML이라고 말할 수도 있습니다. 이 측면에서 상황을 보면 모든 것이 매우 간단하고 이해하기 쉬워지며이 지식으로 이미 사이트 만들기를 시작할 수 있습니다.
