HTML에서 CSS 스타일의 역할은 무엇입니까?
- 藏色散人원래의
- 2023-02-02 10:31:272530검색
HTML에서 CSS 스타일의 기능은 페이지 콘텐츠와 수정 효과를 별도로 관리하는 것이며 HTML 태그에 대해 CSS를 통해 다양한 수정 효과를 추가할 수 있습니다. 수정 속성이 있지만 결과 페이지 효과는 상대적으로 간단합니다. 페이지 효과를 다양화하려면 여전히 CSS 스타일 시트의 도움이 필요합니다.
html에서 CSS 스타일의 기능은 무엇인가요?
HTML에서 CSS 스타일 시트의 역할
1. CSS 스타일 시트의 역할:
HTML 태그의 경우 결과 페이지 효과는 상대적으로 간단합니다. more 페이지 효과를 다양화하려면 여전히 CSS 스타일 시트의 도움이 필요합니다. 스타일 시트를 사용하면 페이지 내용과 수정 효과를 분리하고 관리할 수 있습니다. (html은 페이지와 관련 내용을 생성하고, CSS는 다양한 수정 효과를 추가하는 데 사용됩니다.)
2. CSS 스타일 시트 적용 1(내부 스타일 시트) : Put 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1
Format 1:
<style type="text/css">
选择器(关键词) {属性1:属性值1;属性2:属性值2...}
</style>font-size: 글꼴 크기 설정
font-family: 글꼴 스타일 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
p {color:red;font-size: 35px;font-family: "微软雅黑";}
h3 {color: pink;}
</style>
</head>
<body>这是我的第一句话。
这是我的第二句话
这是我的第三句话
<h1>我是标题标签H1</h1>
<h2>我是标题标签H2</h2>
<h3>我是标题标签H3</h3>
</body>
</html>Format 2:
여러 번, 일부 태그 동일한 스타일 효과가 필요하므로 스타일을 공유 작업으로 설정할 수 있습니다. 태그에 필요한 한 직접 참조할 수 있습니다.
<style type="text/css">
.类名 {属性1:属性值1;属性2:属性值2...}
</style>태그 참조:
fe2921cd609aa37d6e2e3d62431c612ef22a6da9db034d9dd80eaf31ebbb9a7a
질문: 태그에 선택기 스타일 사용과 클래스 스타일 참조가 모두 있는 경우 결과는 어떻게 되었나요?
다른 부분의 속성은 병합됩니다. 동일한 부분의 속성은 클래스 스타일을 기반으로 합니다.
| Text 속성 | Description |
|---|---|
| font-size | Font size |
| font -family | 글꼴 유형 |
| font-style | 글꼴 스타일(스타일) |
| color | 텍스트 색상 설정 또는 검색 |
| text-align | Text-align |
CSS 스타일시트 배경 속성 설정:
배경 색상: background-color
배경 이미지: background-image
배경 이미지의 타일링 방법 설정: background-repeat:
repeat-x X를 따라 타일 axis
repeat -y 축을 따라 타일
no-repeat 실제 이미지를 사용하여 배경 위치를 차지
repeat하여 전체 페이지를 덮음
배경 이미지를 로드할 때 url()--을 사용해야 합니다. -> src 함수와 동일합니다.
background-image:url (이미지 경로 정보)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.testcss {color: green;font-size: 25px;font-family: "微软雅黑";}
.test1 {color: yellow;}
.tet4 {background-image:url(img/tupian03.jpg);background-repeat: repeat-y;}
</style>
</head>
<body class="test4">
我是第一个段落文字
我是第二个段落文字
我是斜体标签i
我是第二个斜体标签i
我是删除线标签del
</body>
</html>3.CSS 스타일 시트 적용 2(인라인 스타일 시트)
3.1 개요: 스타일 시트에는 수정만 있습니다. 내용의 특정 행에 영향을 주거나 스타일을 변경합니다. 표는 특정 행에 포함됩니다(특정 태그 내부)
3.2 형식: 스타일을 속성으로 처리
<开始标签 style="属性1:属性值1;属性2:属性值2..."></结束标签>
나는 첫 번째 단락의 내용입니다
I am은 두 번째 문단의 내용
나는 큰 태그 내용이다
4. CSS 스타일 시트 적용 3(외부 스타일 시트)
4.1 개요: 스타일 시트 선언이 더 이상 html 파일에 중첩되지 않습니다. 하지만 별도의 CSS 파일에 배치됩니다. 진정한 의미에서 html 파일과 css 파일은 독립적으로 분리되어 있습니다. html 파일에 스타일이 필요한 경우 이를 연결하면 됩니다.
4.2 형식: 별도의 새로운 CSS 파일을 생성하고 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 태그에 내용을 복사한 후 스타일 문을 직접 작성합니다.
4.3html 파일은 외부 스타일 시트와 어떻게 연결되나요? 모두 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1
방법 1:
<link href="写上引用的外部css文件" rel="stylesheet" type="text/css" /> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css</title> <link href="css/外部css.css" rel="stylesheet" type="text/css" /> </head> <body> 我是段落一 <h1 >我是标题标签h1</h1> <h2 class="test5">我是标题标签h2</h2> </body> </html>
권장 학습: "css 비디오 튜토리얼"
위 내용은 HTML에서 CSS 스타일의 역할은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!