당신이 알아야 할 바닐라 CSS 기본 사항-CSS 튜토리얼-php.cn

당신이 알아야 할 바닐라 CSS 기본 사항

DDD

풀어 주다： 2024-12-28 05:29:10

원래의

511명이 탐색했습니다.

VANILLA CSS BASICS YOU SHOULD KNOW

CSS(Cascading Style Sheets)의 기초

여기 CSS에서는 웹 페이지에서 대상을 얻고 작업하려는 특정 요소를 선택합니다.

CSS 작동 방식.

CSS는 주로 두 부분으로 구성됩니다.

선택자
선언: 이것도 속성과 가치로 나누어집니다.

세 가지 수준의 CSS;

인라인 CSS

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`

로그인 후 복사

내부 CSS

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.

로그인 후 복사

외부 CSS

이 경우 CSS 파일은 index.html 파일에 링크되어 있습니다.
CSS 코드를 컴파일할 때 CSS도 우선순위를 따릅니다. 이 경우 인라인 CSS가 항상 가장 높은 우선순위를 가지며, 내부 CSS, 외부 CSS 순입니다.

CSS 선택기

이러한 선택기를 사용하면 html 파일에서 요소를 선택하는 방법을 알 수 있습니다. CSS 선택기의 경우 사용하려는 선택기 유형과 대상 요소에 어떤 역할을 하는지만 알면 됩니다.

다음은 일반적으로 사용되는 CSS 선택자입니다.

범용 선택기: 이러한 선택기를 사용하면 html 파일의 모든 내용(모든 html 태그)이 대상으로 지정되거나 선택됩니다.

예:
*{
배경색: 회색
}
이는 모든 웹페이지의 배경색이 회색임을 의미합니다

개별선택자

이는
와 같은 개별 요소를 대상으로 합니다. 이에 따라 index.html의 모든 단락을 대상으로 합니다.
각 단락에 고유한 색상이나 모양을 적용하려는 경우 *클래스 또는 ID 선택기를 사용할 수 있습니다.

클래스 및 ID 선택기

클래스 선택자의 경우 점을 사용하여 적용하고, ID 선택자의 경우 해시(#)를 적용하여 적용합니다.

예를 들어
.경고{
항목 정렬: 중앙;
}

id 이름을 여러 번 적용하거나 사용해서는 안 됩니다. 하지만 그렇게 해도 컴파일 중에 파일에 오류가 발생하지 않습니다. 하지만 이는 좋지 않은 코딩 습관입니다.
단, 클래스 이름은 같은 이름을 여러 번 사용할 수 있습니다.

하위 선택기

이 선택기에서는 상위 요소의 하위 요소를 타겟팅합니다.
예: nav ul{ 디스플레이: 플렉스 }
이는 부모인 nav의 하위 요소인 ul 요소를 타겟팅한다는 의미입니다.

다른 선택기도 있습니다

n번째 하위 선택자와 같습니다.

가장 일반적으로 사용되는 선택자는 클래스 및 ID 선택자입니다

메모:

CSS에 색상을 사용할 때는 빨간색이나 녹색과 같은 단어 색상과 달리 항상 표준 색상 코드(예: #4d4d4d)를 사용하는 것이 가장 좋습니다.
브라우저마다 색상을 보는 방식이 다르기 때문인데, 색상 코드를 사용하면 다른 브라우저에서도 동일한 색상으로 보이는 표준적인 전체 색상처럼 작용하기 때문입니다.

여백 및 패딩.

여백은 텍스트가 있는 외부 공간의 크기이고 패딩은 텍스트가 있는 내부 공간의 크기입니다.*

참고: 입력 태그에는 FOCUS만 적용됩니다.

CSS에서의 위치

절대;

상위 웹페이지, 즉 전체 웹페이지의 테두리에 따라 대상의 위치를 지정합니다.

친척;

이는 현재 대상이 있는 본문이나 상자, 즉 대상의 원래 위치에 따라 대상 요소에 위치를 제공합니다.

끈적끈적

이것은 대상에게 위치를 부여하고 이후에는 다른 위치로 이동하지 않습니다.

수정됨;

적용 후에도 대상이 변경되거나 수정되지 않습니다. 할당된 대로 이 위치에 고정됩니다.