이제 CSS의 기본 지식에 대해 설명하겠습니다.
기본 지식에 앞서 CSS에서 댓글을 작성하는 방법을 알아야 합니다.
/*댓글 내용*/
글꼴: 글꼴
글꼴에 대해 어떤 작업이 있나요?:
글꼴 색상 색상 글꼴 크기 크기 글꼴 스타일 글꼴 패밀리 기울임꼴 글꼴 스타일 글꼴 두께 밑줄 텍스트 장식 줄 높이
예를 통해 설명하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font-size: 20px; /*字体大小*/
color: red; /*字体颜色*/
font-weight: bold; /*字体粗细*/
font-style: oblique;
/*italic:斜体。对于没有斜体变量的特殊字体，将应用 oblique
normal:默认值。正常的字体
oblique倾斜的字体
*/
text-decoration:none; /*none : 默认值。无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
*/
font-family:隶书; /*什么样的字体。宋体，隶书等*/
}
</style>
</head>
<body>
中华名族伟大复兴
</body>
</html>텍스트 텍스트
텍스트 정렬 텍스트 정렬
rreee
배경
배경 색상 배경색 배경 이미지 배경 이미지
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
text-align:center;
}
</style>
</head>
<body>
中华名族伟大复兴
</body>
</html>크기
너비 너비 높이 height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color:red;
background-image:url("1.jpg");
}
</style>
</head>
<body>
中华名族伟大复兴
</body>
</html>margin and padding
margin 단축 속성은 하나의 명령문 속성에서 모든 여백을 설정합니다. 이 속성은 1~4개의 값을 가질 수 있습니다. <<>
여백: 10px 5px 15px 20px;
위쪽 거리는 10px입니다.
>
아래쪽 여백은 15px
왼쪽 여백은 20px
padding 속기 속성은 하나의 문에서 모든 패딩 속성을 설정합니다. 이 속성은 1~4개의 값을 가질 수 있습니다.
패딩: 10px 5px 15px 20px; 🎜>왼쪽 패딩은 20px
참고: 4개의 매개변수 중 아무것도 작성되지 않은 경우 기본값은 0px입니다
테두리 테두리
테두리의 두께와 색상 설정
border:1px solid red 테두리선은 실선입니다. 1픽셀인데 줄이 빨간색이군요
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: red;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>이렇게 실행하면 단어가 나옵니다. div 왼쪽 상단에 있는 텍스트를 가운데로 이동하는 방법은 실제로 매우 간단합니다 div의 CSS에 두 가지 스타일을 추가하면 됩니다. text-align: center; line-height: 150px;
다음 섹션