CSS의 기본 지식 포인트를 자세히 설명
- 亚连원래의
- 2018-05-17 21:47:461985검색
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;
}2.ID 선택 선택기: #id 이름 {}
<font id="flower">心若浮沉</font>
[html] view plain copy
/*ID选择器*/
#flower{
color: blue;
}3. 클래스 선택기: .class 클래스 이름{}<font class="happy">清风自来</font>
[html] view plain copy
/*类选择器*/
.happy{
color:gold;
}4. 속성 선택기: 태그 이름 [속성='속성 값']텍스트: < ;input type= "text" name="texts"/> /*属性选择器*/
input[type=text]{
background-color: brown;
}5. 선택기 포함: 상위 라벨 하위 라벨 <p class="day">
<font>
今天天气好晴朗
</font>
</p>/*包含选择器*/
.day font{
color:orangered;
}
1.테두리 너비 높이2.display : 블록 블록 수준 속성 인라인 행 수준 속성 없음 숨겨진 속성 inline-block: 행의 블록 수준 요소에는 너비가 있습니다. 블록 수준 요소 p, 행 수준 요소 범위 3. 글꼴: 색상 글꼴 크기 배경 -color 4. float: float clear: 클리어 float
5. 상자 모델
패딩: 패딩, 상자 및 콘텐츠 상자 모델은 우리가 실생활에서 흔히 사용하는 상자로, 고유한 테두리 두께, 내부 개체와의 거리, 상자 자체와 외부 세계 사이의 거리를 갖습니다.
요약: CSS 캐스케이딩 스타일은 선택기 사용, 속성 설정, 상자 모델 사용 여부에 관계없이 태그에서 함께 작동하는 여러 스타일의 조합입니다. 기본적으로 HTML의 스타일을 변경합니다. 이런 힘이 아름다운 페이지의 효과를 낳는다. 관련 기사:JS 및 CSS 파일을 PHP
JS+CSS3로 동적으로 압축하여 마우스와 이미지 간 상호 확대 효과를 구현하는 단계에 대한 자세한 설명
위 내용은 CSS의 기본 지식 포인트를 자세히 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!