>  기사  >  웹 프론트엔드  >  CSS 자세한 설명

CSS 자세한 설명

高洛峰
高洛峰원래의
2016-10-20 13:26:451129검색

CSS 소개

1. CSS 개요 및 기능

CSS(Cascading Style Sheets)는 웹 페이지의 표시 효과를 정의하는 데 사용되는 CSS 스타일 시트입니다. 이는 HTML 코드의 스타일 정의 중복을 해결하고 최신 스타일 코드의 유지 관리성을 향상시키며 웹 페이지의 표시 효과를 향상시킬 수 있습니다.
기능: CSS는 웹페이지 콘텐츠와 표시 스타일을 분리하여 표시 기능을 향상시킵니다.

2. CSS와 HTML의 조합(*****)(4가지 유형)

CSS와 HTML의 조합

1. 스타일 속성 방식:

각 태그의 표시 스타일을 변경하려면 태그의 스타일 속성을 사용하세요.

예:


p 태그 단락 콘텐츠.


이 방법은 더 유연하지만 여러 개의 동일한 태그에 대해 동일한 스타일을 정의하는 것이 더 번거롭기 때문에 로컬 수정에 적합합니다.

2. 스타일 태그 방식 : (임베디드 방식)

여러 태그를 균일하게 수정하려면 head 태그에 스타일 태그를 추가하세요. ​

<head>
    <style type=”text/css”>
        p { color:#FF0000;}
    </style></head>

이 방법은 한 페이지의 스타일을 균일하게 설정할 수 있지만, 지역적으로는 유연성이 부족합니다.

3. Import 방법 : (공통 방법)

전제는 이미 정의된 CSS 파일이 있다는 것입니다. 웹페이지 스타일의 일부를 사용해야 하는 경우 이 방법을 사용하세요.

예:

<style type="text/css">
    @import url(css_3.css);
    div { color:#FF0000;}</style> 


외부 CSS 파일(.css)의 끝을 정의합니다.
@import url("css file address");는

안에 작성해야 합니다. 참고: URL 괄호는 세미콜론으로 끝나야 합니다. 가져온 스타일이 이 페이지에 정의된 스타일과 겹치는 경우 이 페이지에 정의된 스타일이 우선 적용됩니다.

4. 링크 방식 : (일반적으로 사용되는 방식)

head 태그에 link 태그를 통해 구현되는데, 먼저 정의된 CSS 파일이 있어야 한다는 전제가 있습니다.

예:

<link rel="stylesheet" type="text/css" href="css_3.css" />
  <link rel="stylesheet" type="text/css" href="CSS文件的地址" > ,不能写在<style>内部,写在<head>标签的内部。
  rel:代表当前的文件和引入文件的关系。
  type:类型
  href:CSS的地址

참고: 여러 링크 태그를 통해 여러 CSS 파일을 연결할 수 있습니다. 반복되는 스타일에는 마지막으로 연결된 CSS 스타일이 적용됩니다.

3. CSS 스타일 우선순위 및 코드 사양

1. CSS 우선순위

(일반적으로) 위에서 아래로, 외부에서 내부로, 우선순위는 낮은 것부터 높은 것입니다.
특수 사례: 태그 이름 선택기

2. CSS 코드 사양

(1) 선택기 이름 {속성 이름: attribute 값 속성 이름: 속성값;...}

(2) 속성을 세미콜론으로 구분합니다
(3) 속성과 속성값은 콜론으로 직접 연결됩니다

 (3) 속성에 다음이 있는 경우 값이 여러 개인 경우 ​​​​값은 공백으로 직접 구분됩니다.

div{border: value 1 value 2 value 3}

4. CSS 선택자(*****)

 1. 선택자:

작성된 CSS 코드가 작동하는 레이블입니다.

2. 기본 선택자:

(1) 태그 이름 선택자

각 태그는 class 속성과 id 속성을 정의합니다. 라벨 작업을 용이하게 하기 위해 라벨을 식별하는 데 사용됩니다.
정의상 여러 태그의 class 속성 값은 동일할 수 있으며, id 값은 JavaScript에서 자주 사용되기 때문에 고유해야 합니다.

(2) 클래스 선택자: (일반적으로 사용됨)
태그에 클래스 속성을 정의하고 값을 지정합니다. 태그 name.class 값을 통해 태그의 스타일을 설정합니다.
예:
동일한 태그에 서로 다른 스타일을 설정할 경우 클래스를 사용하여 차별화하세요.

p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式</p><p class=”pclass_2”>P标签样式</p>


서로 다른 태그의 설정이 동일한 경우 클래스를 사용하여 일률적으로 정의합니다.

.classname {color:#00FF00;}

P 태그 스타일

DIV 태그 스타일

  (3) ID 선택기:
클래스 선택기와 유사하지만 형식이 다릅니다. 선택기 이름은 #id 값입니다.
예:

#pid { color:#0000FF;}

P 태그 스타일


참고: 여러 태그가 동일한 ID 값을 정의할 수도 있습니다. 하지만 JavaScript가 태그 요소를 얻으면 오류가 발생합니다. 따라서 습관을 형성하고 id 값의 고유성을 보장하는 것도 향후 데이터베이스 설계에 매우 유익합니다.

우선순위(특수):
태그 이름 선택기

3. 확장 선택기:

(1 ) 연관 선택기: 생성 여러 태그 간의 관계.
공백으로 구분
(2) 조합 선택자: 여러 개의 서로 다른 선택자에 동일한 스타일 설정
쉼표로 구분
(3) 의사 요소 선택자: CSS 정의 좋은 선택자
사용하는 경우 하이퍼링크의 4가지 상태, 사용 순서: L V H A

5. CSS 레이아웃(이해)

* 박스 모델

내 마음은 장미 냄새를 맡는 호랑이와 같습니다.


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:CSS 자동 줄 바꿈다음 기사:CSS 자동 줄 바꿈