07_CSS 입문 및 고급 기술 (5)

하이퍼 링크 미화

의사 클래스

하이퍼 링크와, 자신의 스타일로 사용자가 클릭에 따르면 :

사용자가 상황에 따라 하이퍼 링크를 클릭, 네 가지 상태가 있습니다 :
a:link접근 하이퍼 링크는
a:visited하이퍼 링크를 방문하지 않았다
a:hover마우스 오버를하면
a:active마우스 다운 타임

<style type="text/css">
    a:link{
        color:orange;
    }
    a:visited{
        color:green;
    }
    a:hover{
        color:black;
        font-size: 20px;
        border: 1px solid black;
    }
    a:active{
        font-size: 30px;
    }
</style>

; CSS를 내부 클래스라고,이 것은 당신이 명시 적으로 라벨의 종류를 지정할 수 있습니다 엔지니어가 추가
, 링크, : 방문 페이지를 편집 할 때 사용자가 지정한 상태, 우리는 정의 할 수 있습니다,하지만하지 :하지만를 당신은 종류, 소위 속한 알고 "의사 클래스입니다."

2. 사랑과 지침

첫 사랑, 증오합니다.
CSS의 규정은, 순서는 네 개의 가상 클래스이어야합니다
링크는, 활성를 가져 방문한
과 사랑은 증오 같은 순서로, 그것이라고, 메모리 도움이 될 수 있습니다 "사랑하고 지침을."
순서가 동일하지 않은 경우, 어떤 스타일의 혼란이있을 수 있습니다.

A는 생략 될 수 있지만, 순서가 변경 될 수 없습니다. 링크, 활성 가져 예를 들어, 우리는 다음 방문을 생략 할

3. 일반적인 표현

함께 쓰기 방문, 그래서 아무 소용 점은 이상과 같은 스타일을 통해이 없다 : a는 링크 : 일반적으로, 우리는을 넣어 것입니다 :

<style type="text/css">
    a:link,a:visited{
        text-decoration: underline;
        color:#333;
    }
    a:hover{
        color:red;
    }
</style>

당신이 블록을 설정하려면, 폭과 높이를 설정, 그래서 우리는 일반적으로 선택기이 작성 박스 모델 속성에 익숙해 있습니다. 의사 클래스 선택기로 작성된 텍스트의 속성. 특히, 우리는이 기억해야 text-decoration내부 의사 클래스를 작성해야합니다, 또는 태그가 상속 아버지로부터 상속되지 않아야 text-decoration:none;기본 하이퍼 링크 밑줄을 건조 할 여유가 없다.

 .nav ul li a{
    display: block;
    width: 120px;
    height: 40px;
 }
 .nav ul li a:link , .nav ul li a:visited{
    text-decoration: none;
    color:white;
 }
 .nav ul li a:hover{
    background-color: gold;
 }

이것은 선택하는 "의미" a:link, a:visited그래서 당신은 쓸 수 없습니다 a:link, a:visited직접 쓰기a:hover

 .nav ul li a{
    display: block;
    width: 120px;
    height: 40px;
    text-decoration: none;
    color:white;
 }
 .nav ul li a:hover{
    background-color: gold;
 }

의사 수준의 무게와 체중 클래스, 클래스 선택의 증가 경우.

배경 시리즈의 속성

1. 배경 색

배경 색상 속성 background-color:#f00;
, 우리가 사용하고 패딩 지역은 또한 배경 색상을 가지고, 기억 말을 많이하지를! 국경 내에서 장소는 색깔이있다.

2.background 화상

배경 이미지 속성 background-image:url(images/1.jpg);
URL이 Resource Locator의 의미 유니폼 리소스 로케이터 유니폼입니다, 사람들은 그 단어가 말하는 "웹 사이트."
URL에는 인용 부호가없는 상대 경로이며, 절대 경로가 가능하다.

그리고 삽입 사진은 동일하지 않습니다

배경 응용 프로그램

<img src=”” />

수평, 수직 확산을 많이의 기본 배경 이미지입니다.

3.background 반복

반복의 의미를 반복하는 것입니다

background-repeat:no-repeat;

background-repeat:repeat-x;

background-repeat:repeat-y;

background-image: url(images/libai.png);
background-repeat: repeat-y;

4.background 위치

사진 위치 속성입니다.

background-position:100px 200px;
오른쪽 이동이 상자에서 배경 이미지가 100 픽셀을 표현하자 200 픽셀을 아래로 이동합니다.
왼쪽에 부정적인 쓰기, 아래로 이동합니다.

background-position가장 일반적인 사용은 "CSS 스프라이트"CSS 스프라이트이다, 어떤 사람들은 "CSS 스프 라이트 기술"이라고합니다.

작은 이미지 겨, 합성 화상의 복수의 참조하고 background-position만 특정 부분을 위치.
이로 인해 HTTP 요청의 수를 줄일 수 있습니다. 원래 10 10 배경 사진이 필요하지만, 이제 하나가 필요합니다.

background-position뿐만 아니라 위치를 두 숫자를 사용할 수 있습니다, 또한 단어의 위치를 찾을 수 있습니다.
소개 수준, 우리는 바로 왼쪽, 오른쪽, 표현하기, 중심을 왼쪽으로
1, 중상 낮은 표현하기 위해 상위 및 하위 수준, 우리가 사용하는 상단, 중앙, 하단
왼쪽 첫번째 뒤 바로 다운

background-position:left bottom;

이는 백분율로 표현 될 수 background-position
backgrond-position:50% 0;동등background-position:center top;

가정 지금은 상자의 너비가 600 픽셀, 배경의 폭, 그래서 121px입니다
background-position:center top;
동등한 : background-position:50% 0;
동일합니다 :background-position:239.5px 0;

어떻게 계산?
2분의 600 - 2분의 121 = 239.5px

응용 프로그램 :
1) 배경

2) 배너 배너

와이드 스크린 화면 비율을 사용하여 사용자의 돈을 알아서하기 위해 일반적으로 매우 넓은 배너 크기는 배너의 폭이 실질적으로 1920, 1920 포인트에 도달합니다. 우리는 배경 배너를 사용합니까, 쓰기

background-image: url(images/banner160223.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #E0B895;

아무리 해상도, 우리의 배너는 배너입니다 :

- 첨부 5.background

배경 제휴 특성은 첨부 의미를 연관되어있다. 이것은 유용한 값은 고정된다;
background-attachment: fixed;

CSS2.1 레벨은 그게 다야. 시간이 될 때까지, 또 다른 다섯 개 속성에서 증가하고있는 동안 CSS3 배경은 대답.
우리가 할 수있는 공동 작성 :

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:-10px -100px;
background-attachment:fixed;

그것은 동일합니다 :
background:red url(1.jpg) no-repeat -10px -100px fixed;

배경 응용 프로그램

도. 즉 (1)

우리는 로고를 삽입 할 :

<h1>
    <img src="images/logo.png" alt="" />
</h1>

이 방법은 검색 엔진에 비우호적, 로고를 삽입했다. 우리는 H1의 내부 텍스트가 아닌 이미지를 바랍니다. 검색 엔진은지도에 텍스트를 인식 할 수 없습니다.

따라서, 더 나은 방법이 이미지를 렌더링하는 배경 이미지를 사용하는 것입니다, 라벨에 쓰여진 텍스트, 레이블 텍스트는 검색 엔진이 크롤링 할 수있다.

<h1>爱前端-专业前端开发培训</h1>

    .header h1{
        width: 221px;
        height: 68px;
        background:url(images/logo.png);
        text-indent: -999em;   → 赶走文字，让用户看不到文字
    }

또한 :

    .header h1{
        width: 221px;
        height: 68px;
        background:url(images/logo.png);
        line-height: 400px;
        overflow: hidden;
    }

2. 내부 패딩 파일럿 심볼

3. 엘프 배치

모든 작은 아이콘의 선도적 인 상징이되기 위해서는, 가장 오른쪽에 스프라이트를 넣어주십시오.