CSS를 도입하는 세 가지 방법은 무엇입니까?
- 青灯夜游원래의
- 2022-09-02 17:23:5822431검색
CSS를 소개하는 세 가지 방법: 1. 인라인 소개, 스타일 속성을 사용하여 특정 HTML 태그에 CSS 코드를 삽입합니다. 구문은 "
... 입니다. name> ;"; 2. 포함된 가져오기, 문서 헤드 부분의 스타일 태그 쌍에 CSS 코드 넣기, 구문은 ""; 3. 외부 가져오기, CSS 코드 넣기 외부 CSS 파일에 추가하려면 링크 태그나 "@import" 규칙을 사용하여 HTML 문서에 추가하세요.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS: 캐스케이딩 스타일 시트는 HTML이나 XML과 같은 문서의 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS는 웹 페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립팅 언어와 협력하여 웹 페이지의 다양한 요소의 형식을 동적으로 지정할 수 있습니다. CSS는 웹 페이지의 요소 위치 레이아웃을 픽셀 수준으로 정밀하게 제어할 수 있으며 거의 모든 글꼴을 지원합니다.
CSS의 기본 구문:
CSS 규칙은 두 가지 주요 부분, 즉 선택기와 하나 이상의 명령문으로 구성됩니다. 변경해야 하는 HTML 요소, 각 선언은 속성과 값으로 구성됩니다.
1. 선택기(Selector)
선택기는 HTML 요소의 ID, 클래스 속성 또는 요소 이름 자체 및 스타일을 정의할 HTML 요소를 지정하는 데 사용되는 일부 특수 기호로 구성됩니다. , 선택기 p는 페이지의 모든
태그에 대한 스타일을 정의하는 것을 의미합니다.
2. 선언
이러한 선언은 브라우저에 지정된 개체를 렌더링하는 방법을 알려줍니다. 선택자. 모든 선언은 선택자 바로 뒤에 있는 중괄호 { } 안에 배치됩니다.
문은 속성과 속성 값이라는 두 부분을 포함해야 하며, 문 끝을 표시하기 위해 세미콜론을 사용해야 합니다. 스타일의 마지막 문에서는 세미콜론을 생략할 수 있습니다.
속성: HTML 요소에 설정하려는 스타일 이름입니다. 색상(color), 테두리(border), 글꼴(font) 등 일련의 키워드로 구성됩니다. CSS는 많은 속성을 제공합니다. W3C 공식 웹사이트 보기를 사용할 수 있습니다.
값: 숫자 값과 단위 또는 키워드로 구성되며 특정 속성의 표시 효과를 제어하는 데 사용됩니다. 빨간색 또는 #F1F1F1 등이어야 합니다.
콜론: 속성과 값을 구분하는 데 필요합니다. 각 속성과 값의 조합은 동일한 명령문의 끝에 세미콜론이 필요합니다. 선택기 중괄호 { }로 묶어야 합니다.
CSS에서 소개하는 세 가지 형식
1. 인라인 스타일 시트(인라인 소개)
단일 HTML 요소 태그에 스타일 속성을 직접 추가하여 HTML 태그의 표현 스타일을 제어할 수 있습니다.
CSS를 도입하는 이러한 방식은 분산되고 유연하며 편리하지만 무결성과 계획이 부족하여 나중에 수정하고 유지 관리하는 데 도움이 되지 않습니다. 웹 사이트의 스타일을 수정해야 할 때 동일한 수정에 여러 장소가 포함될 수 있습니다. 그 결과 유지관리 비용이 높아집니다. STYLE 속성을 사용한 스타일 효과는 가장 강력하며 다른 소개 방법의 동일한 스타일 효과를 덮어씁니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: maroon; margin-left: 40px">PHP中文网</h1>
<p style="color: blue;">https://www.php.cn/</p>
</body>
</html>
인라인(인라인 스타일)은 HTML 태그에 CSS 스타일을 쉽게 부여할 수 있지만 단점도 매우 뚜렷하므로 너무 많이 사용하는 것은 권장되지 않습니다.
인라인 스타일을 정의하려면 각 HTML 태그에 스타일 속성을 정의해야 하는데 이는 매우 불편합니다.
인라인 스타일에서 큰따옴표나 작은따옴표를 사용할 때는 특히 주의하세요. HTML 태그의 속성은 일반적으로 큰따옴표를 사용하기 때문입니다.
인라인 스타일에 정의된 스타일은 다른 곳에서는 재사용할 수 없습니다.
인라인 스타일은 나중에 유지되기 때문에 매우 불편합니다. 웹사이트는 일반적으로 여러 페이지로 구성되며 페이지 스타일을 수정할 때 페이지를 하나씩 수정해야 합니다.
인라인 스타일을 너무 많이 추가하면 HTML 문서의 크기가 커집니다.
2. 내부 스타일 시트(소개 삽입)
페이지<style>...</style> 태그에 스타일 코드를 작성합니다.
<style>
bdoy{font-size:14px;}
</style>
<style>...</style>标签结构可以位于页面标签中的任何位置，也可以多次出现。通常是将整个<style>...</style>结构写在页面的
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>https://www.php.cn/</p>
</body>
</html>
因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护。
3、外部样式表（外部引入）
在实际的开发种都用于外部样式表。适合样式较多的情况。样式单独的写到CSS文件中，之后把CSS文件引入到HTML中使用。
1）、使用link
链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的
语法：
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2）、使用@import
导入式是通过@import在
语法：
<style type="text/css">
@import url("css文件路径");
</style>简单实例：
css外部样式表 style.css
h1{
color:red;
}
p{
font-size:14px;
color:green;
}HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="styleSheet" href="style.css" />
<!-- <style>
@import url("style.cs");
</style> -->
</head>
<body>
<h1>link标签或@import的应用</h1>
<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
</body>
</html>实现效果：
link和@import的区别：
1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
（学习视频分享：web前端）
위 내용은 CSS를 도입하는 세 가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!