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

CSS 분류, 속성 및 선택기

php中世界最好的语言
풀어 주다: 2018-03-19 13:51:08
원래의
1434명이 탐색했습니다.

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

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

카테고리:

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

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

<link rel="stylesheet" type="text/css" href="file:///D|/SSs/作业/3.12/图标.css" />
로그인 후 복사
e링크 태그

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

<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의 너비와 높이를 정의하세요.

  3.


 


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

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

추천 도서:

프런트엔드 HTML 기본 지식

유명 웹사이트 프런트엔드 레이아웃 분석

프론트엔드 CSS 기본 지식

위 내용은 CSS 분류, 속성 및 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿