进击은 python
기본 프런트 엔드를 알아 --CSS
CSS 스타일은 어디를 기록 할 수 있습니까? 사실, CSS 스타일을 매우 유연 플러그인
삽입 된 상황에 따르면, 세 가지 경우로 나눌 수 있습니다
그리고 다음은이 세 가지 경우 간단한 논의 될 것입니다
내 끼움 식
CSS 스타일 시트는 직접 안으로 들어가 기존의 라벨에 코드를 삽입 할 수 있습니다
이 방법은 인라인 호출됩니다
<p style='color:red;'>文字颜色为红色</p>시작 레이블 p 태그에 기록 된 해당 스타일의 숙박 시설,
설정 CSS 스타일 코드의 복수가 함께 쓸 수있는 경우 쓰기 스타일 CSS 스타일 코드 = ""큰 따옴표는, 세미콜론으로 구분
<p style='color:red;font-size:12px;'>文字颜色为红色</p>임베디드
새 작업이되고 百因必有果！你的报应就是我！, 나는 과일이 있어야하기 때문에 하나, 당신은 내 세 빨간색으로 변 백 싶어
내장 사용하는 경우, 그 너무 어려울 것입니다 (각 <span>스타일 =에 태그 "색상 : 빨강;"? 문을 여러 범위가있는 경우)
그래서 임베디드 쓰기 CSS 스타일은 우리가 신속하게이 문제를 해결하기 위해 할 수 있습니다
포함 된 CSS 스타일의 스타일 코드를 작성하는 것입니다 <style type='text/CSS'></style>라벨 사이
스팬 스타일 태그의 집합 통합 :
<style type='text/CSS'>
span{
color:red;
}
</style>포함 된 CSS 스타일을 작성해야합니다 <style></style>사이
그리고 일반적으로 포함 된 CSS 스타일 서면 <head></head>사이
외부 식
우리가 Taobao 몰 웹 사이트의 유사한 종류를 할 경우 그냥 상상
프로젝트의 증가하는 요구에 그래서, 우리의 CSS 코드의 양이 나중 단계에서 더 크고 더 될 것입니다
우리의 전술 인라인 및 임베디드 CSS 스타일은 우리가 어떻게해야 다음, 확실히 방법이 아니다?
이 시간, 우리는 사후 유지 보수 편의성 우리의 코드 것을, 또 다른 별도의 파일로 우리의 CSS 코드를 작성하는 데 사용할 수있는
그런 다음이 외부 CSS 스타일 스타일이다
(또한 외부 체인 함) 외부 CSS 스타일 스타일은 별도의 외부 파일에 CSS 코드를 작성하는 것입니다의 CSS 스타일 파일 ".CSS"확장
에서 <head>내부 (안 스타일 태그)를 사용하여 <link>태그 스타일 파일을 HTML 파일, 다음 코드에 연결되어 있습니다 :
<link rel="stylesheet" href="index.CSS" type="text/CSS">- 같은 의미있는 알파벳 이름에 CSS 스타일 파일 이름, main.css가, index.css, base.css 등
- REL은 = "스타일"
- 확인해 : 약어 관계 사이의 관계는, 문서 링크 및 HTML 문서를 정의하는 데 사용되는 속성 REL
- 스타일 : 외부 스타일 시트 문서
- HREF : 주소 값 스타일 시트 파일 URL, 대상의 href 속성을 (시간을 학습하기 전에 레이블) 하이퍼 링크를 지정
<link>라벨의 위치는 일반적으로 작성<head>의 태그
우선
그래서 여러 가지 방법이 오버레이는 누구의 스타일로해야한다, 사용하는 경우? ? ? 그것은 우리가 고려하는 것이 지금 가지고있는 문제입니다
우리는 테스트를 수행합니다
- 사용 인라인 CSS를 빨간색 텍스트 "과일이 있어야 백 때문에"세트를.
- 그런 다음 사용하십시오 포함 된 CSS는 녹색으로 텍스트를 설정
- 마지막으로, 사용 외부 스타일은 블루 (index.css 파일 설정)에 텍스트를 설정
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span style="color: red">百因必有果！</span>你的报应就是我！</p>
</body>
</html>span{
color: pink;
}우리는 색깔이 붉은 것을 발견, 그 이유는 무엇입니까? 이 세 가지 방법의 도입이 우선 순위가 높은 브라우저가 표시됩니다 수있는 우선 순위이기 때문에 누가 스타일 속성입니다
内联式>嵌入式>外部式
여기에 초점! ! 嵌入式>外部式전제가있다 : 어떤 스타일의 외부 뒷면에 내장 된 위치 CSS 스타일!
녹색 :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>핑크 :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
color: green;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>그래서 기본적인 우선 순위는 실제로 근접의 원칙이다! , 어떤 스타일로 과거의 요소를 수정!
이것은 왜 CSS라는 캐스 케이 딩 스타일 시트입니다!