1. 개념
CSS(Cascading Style Sheets): CSS 스타일 뒤의 계단식 스타일 시트: 동일한 HTML 태그에 스타일을 추가하려면 다양한 스타일을 사용하세요. HTML 태그는 표시해야 하는 효과를 추가합니다.
주로 HTML 페이지의 텍스트 내용, 이미지 모양, 레이아웃과 같은 모양 표시 스타일을 설정하는 데 사용됩니다.
기능: CSS는 페이지를 더 아름답게 만들고, CSS+Div는 레이아웃을 더 유연하게 만듭니다.
규칙: 스타일 선택자는 대소문자를 엄격하게 구분하지만 속성과 속성 값은 그렇지 않습니다.
여러 속성은 영어 세미콜론으로 구분됩니다.
속성 값이 여러 단어로 구성된 경우 영어 인용부호로 묶습니다. 스타일 선택 도구는 다음과 같습니다.
<font style="color:red;size:14;"></font>
2. CSS 스타일 소개 1. 인라인 스타일
<body> <!--行内样式--> <font style="color:red">浅笑安然</font><br /> </body>
2. 내부 스타일
<head> <meta charset="UTF-8"> <title></title> <!--内部样式--> <style type="text/css"> font{ color: red; } </style> </head>
3. 외부 스타일 참조:
<head> <!--外部样式--> <link rel="stylesheet" type="text/css" href="../css/outer.css"/> </head>
CSS 파일 설정:
/*글꼴 스타일 설정*/
font{ color:green; }
우선순위: 인라인 스타일이 가장 높은 우선순위를 가지며, 내부 스타일과 외부 스타일이 서로 가장 가깝습니다.
3, 선택기
1. <font >浅笑安然</font>
[html] view plain copy
/*元素选择器*/
font{
color: red;
}
<font id="flower">心若浮沉</font> [html] view plain copy /*ID选择器*/ #flower{ color: blue; }
<font class="happy">清风自来</font> [html] view plain copy /*类选择器*/ .happy{ color:gold; }
/*属性选择器*/ input[type=text]{ background-color: brown; }
<p class="day"> <font> 今天天气好晴朗 </font> </p>
/*包含选择器*/ .day font{ color:orangered; }
블록 수준 요소 p, 행 수준 요소 범위 3. 글꼴: 색상 글꼴 크기 배경 -color 4. float: float clear: 클리어 float
5. 상자 모델
패딩: 패딩, 상자 및 콘텐츠 상자 모델은 우리가 실생활에서 흔히 사용하는 상자로, 고유한 테두리 두께, 내부 개체와의 거리, 상자 자체와 외부 세계 사이의 거리를 갖습니다.
요약: CSS 캐스케이딩 스타일은 선택기 사용, 속성 설정, 상자 모델 사용 여부에 관계없이 태그에서 함께 작동하는 여러 스타일의 조합입니다. 기본적으로 HTML의 스타일을 변경합니다. 이런 힘이 아름다운 페이지의 효과를 낳는다. 관련 기사:JS 및 CSS 파일을 PHP
JS+CSS3로 동적으로 압축하여 마우스와 이미지 간 상호 확대 효과를 구현하는 단계에 대한 자세한 설명
위 내용은 CSS의 기본 지식 포인트를 자세히 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!