집 >웹 프론트엔드 >JS 튜토리얼 >CSS 분류, 속성 및 선택기

CSS 분류, 속성 및 선택기

php中世界最好的语言원래의: 2018-03-19 13:51:081436검색

이번에는 CSS 분류, 속성, 선택자에 대해 알아보고, CSS 분류, 속성, 선택자 사용 시 주의사항은 무엇인지 살펴보겠습니다.

Css 페이지를 아름답게 하기 위한 캐스케이딩 스타일 시트용 작은 도구

카테고리:

　 인라인(inline)은 태그 내부의 속성 형태로 표현되고, 속성 이름 스타일

은 포함된 head 태그의 레이블 형식. 태그 이름 스타일 h 외부 Head 태그와 외부 파일을 소개하는 링크 태그*.css

<link rel="stylesheet" type="text/css" href="file:///D|/SSs/作业/3.12/图标.css" />

링크 태그

아이콘 아이콘 삽입(플러스 아이콘 아이콘, 경로는 필수) 절대 경로)

<link rel="shortcut icon" href="xxx.ico" type="image/x-icon"/>

icon 아이콘

선택기:

요소를 찾고 레이블에 스타일을 적용하는 데 사용됩니다.

Tag selector .p{}

　 id selector #id{

}　　class selector.class{}

　　병렬(쉼표 추가) 선택기 1, 선택기 2

부모-자식(플러스 공백) 상위 선택기

하위 선택기

　　 *{}전체 페이지

속성:

텍스트:

　　t ext-장식 텍스트 수정(밑줄 등) ) Text-indent Indent

text-shadow Shadow 1px (가로 그림자 위치) 1px (세로) 1px (흐릿한 거리) # (그림자 색상)

font-weight 글꼴 굵게

　　em은 한 문자의 크기를 나타냅니다.

Background:

background-position

: 속성은 p에서 p의 그림 위치를 정의합니다. 왼쪽과 오른쪽, 위쪽과 아래쪽

<head>
    <style>        
        #p{ 
        width:100%;
        height:111px;
        background-image:url();
            background-position:34% 0        }
    </style></head><body>
    <p id="p"></p></body>

bg- position

배경 크기

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　1.text-indent Indent 속성은 블록 태그에만 사용할 수 있습니다) , SPAN 등의 행 레이블은 사용할 수 없습니다

해결 방법: display:inline-block; 속성을 스팬에 추가하여 인라인 블록 레이블로 전환합니다.

　　2. 큰 p는 작은 p입니다. 부모 p가 너비와 높이를 설정하지 않으면 자식 p의 위치에 따라 변경됩니다.

　　 자식 p에 margin float 속성을 적으면 부모 p도 이동합니다.

해결 방법: 테두리를 설정하거나 상위 p의 너비와 높이를 정의하세요.

, 배경색을 높게 설정하세요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!