집 > 기사 > 웹 프론트엔드 > CSS 세부정보

CSS 세부정보

WBOY원래의: 2024-08-21 06:11:06900검색

CSS In Details

페이지에서 HTML이 렌더링되는 방식

브라우저가 HTML을 로드합니다
HTML을 DOM으로 변환
링크된 리소스 가져오기
브라우저가 CSS(CSSOM)를 구문 분석합니다
DOM과 CSSOM 결합
UI가 그려집니다(FCP)(첫 번째 콘텐츠 포함 페인트)

HTML 유형의 요소

주로

블록 레벨
인라인

CSS 선택기:-

유형/속성 선택기
클래스 선택기
ID 선택기
범용 선택기(*)

CSS 상속

상속 CSS 속성(예: 색상)이 요소에 직접 설정되지 않은 경우 발생하며 해당 속성의 값을 찾을 때까지 상위 체인을 순회합니다.

<div class="body">
    <p>This is a Paragraph, but it will have the blue color due to inheritance</p>
</div>
<style>
.body{
    color: blue;
}
</style>

사례 2

<div class="body">
    <p>This is a Paragraph, but it will have the red color due to direct Specification</p>
</div>
<style>
p {
color: red;
}
.body{
    color: blue;
}
</style>

사례 3

<div class="body">
    <p>This is a Paragraph, but it will have the blue color due to strong Specification</p>
</div>
<style>
p {
color: red;
}
.body p{
    color: blue;
}
</style>

CSS 특정성이란

적용할 CSS 선언을 결정하기 위해 브라우저에서 사용하는 알고리즘.
각 선택기에는 계산된 가중치가 있습니다. 가장 구체적인 가중치가 승리합니다. id--클래스-유형 ID 선택기: 1 - 0 - 0 클래스 선택기: 0- 1 -0 유형 선택기: 0-0-1

참고:- 인라인 CSS는 더 구체적이며 !import는 훨씬 더 구체적입니다

Css 특정성 계산기

엠&렘

EM:- 상위 글꼴 면에 상대적

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2em; //16px * 2 = 32px;
}

p {
font-size: 2em; // 32px * 2 = 64px
}
</style>

REM:- 루트 글꼴 측에 상대적

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2rem; //16px * 2 = 32px;
}

p {
font-size: 2rem; // 16px * 2 = 32px
}
</style>

%:-% 계산

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 120%; //1.2*16 = 19.2px;
}

p {
font-size: 120%; // 1.2 * 19.2 = 23.04px
}
</style>

CSS 결합자

1.하위 선택자(ul li a)

<ul>
<li><a href='#'></a></li>
</ul>

2.하위 조합자(직계 자손) (div.text > p)

<div>
<div class="text">
   <P>Here the CSS will apply<P>
</div>
<div>
  <p>No CSS will apply</p>
</div>
</div>

3.인접 형제 조합자(h1 + p)

참고:-

h1과 p는 모두 동일한 상위에 있어야 합니다. 그리고 p는 h1 태그 바로 뒤에 와야 합니다

4.일반 형제조합(p~code)

참고:-

인접 형제자매와 같은 직계 형제자매가 있으면 안 됩니다. 하지만 형제자매가 있어야 해요
부모가 동일해야 합니다

블록 요소 수정자 아키텍처(BEM)

재사용 가능한 구성 요소 생성 및 코드 공유에 도움이 되는 설계 방법론

기타 방법론

OOCS
SMACSS
SUITCVSS
아토믹
BEM

차단

헤더
메뉴
입력
체크박스(독립형 의미)

요소(블록의 일부)

메뉴 항목
목록 항목
헤더 제목

수식어

비활성화
강조표시
확인
노란색

.block__element--modifier 구문

<form class=form>
   <input class='form__input'/>
   <input class="form__input form__input--disabled"/>
   <button class="form__button form__button--large"/>
</form>

박스 모델:-(W.I.P)

상세정보에서 더 많은 정보를 추가해야 합니다

참고:-

그리드 레이아웃과 Flex 레이아웃에 대해서는 별도의 글이 있을 예정입니다.

위 내용은 CSS 세부정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html for checkbox class Attribute Property dom flex input ul li ui

성명：

이전 기사：요일/코드 요일: 새로운 초점다음 기사：요일/코드 요일: 새로운 초점