CSS 자세한 설명
- 高洛峰원래의
- 2016-10-20 13:26:451132검색
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 태그 스타일
(3) ID 선택기:
클래스 선택기와 유사하지만 형식이 다릅니다. 선택기 이름은 #id 값입니다.
예:
#pid { color:#0000FF;}
P 태그 스타일
참고: 여러 태그가 동일한 ID 값을 정의할 수도 있습니다. 하지만 JavaScript가 태그 요소를 얻으면 오류가 발생합니다. 따라서 습관을 형성하고 id 값의 고유성을 보장하는 것도 향후 데이터베이스 설계에 매우 유익합니다.
우선순위(특수):
태그 이름 선택기
3. 확장 선택기:
(1 ) 연관 선택기: 생성 여러 태그 간의 관계.
공백으로 구분
(2) 조합 선택자: 여러 개의 서로 다른 선택자에 동일한 스타일 설정
쉼표로 구분
(3) 의사 요소 선택자: CSS 정의 좋은 선택자
사용하는 경우 하이퍼링크의 4가지 상태, 사용 순서: L V H A
5. CSS 레이아웃(이해)
* 박스 모델
내 마음은 장미 냄새를 맡는 호랑이와 같습니다.