집 > 기사 > 웹 프론트엔드 > CSS 소개

CSS 소개

WBOY원래의: 2016-08-10 08:49:441417검색

오늘의 연구는 마침내 CSS에 이르렀습니다. CSS는 많은 멋진 인터페이스를 구현할 수 있으며 CSS의 출현은 이 문제를 해결하는 것입니다

HTML 구조에서 스타일 작성의 혼란으로 인해 탄생한 언어입니다. 과거에는 스타일이 구조와 함께 작성되었습니다.

서로 구별되지 않고, 같은 스타일이 반복적으로 반복되고, 계속해서 다시 작성할 수 밖에 없기 때문에 코드의 양이 크게 늘어납니다

자, 코드를 작성한 후에도 읽기가 어렵고, 이때 CSS가 등장하여

오류를 찾기가 매우 어려워집니다.

에는 그 장점이 반영되어 있는데, 위의 문제점을 해결하고 성능과 구조를 분리한다는 장점이 있습니다.

CSS가 무엇인지 이야기해볼까요?

CSS란 무엇인가요?

CSS(캐스케이딩 스타일 시트) 캐스케이딩 스타일 시트

CSS3는 CSS2의 업그레이드 버전입니다. 3은 단지 버전 번호일 뿐이며 CSS2.1을 기반으로 하는 많은 강력한 새 기능이 추가되었습니다.

현재 Chrome, Safari, Firefox, Opera, 심지어 360과 같은 주류 브라우저는 이미 대부분의 CSS3 기능을 지원합니다

, IE10도 CSS3를 완벽하게 지원하기 시작할 예정입니다. 브라우저마다 다른 접두사가 필요할 수 있습니다. 이 CSS 속성을 나타냅니다

또는 규칙이 아직 W3C 표준의 일부가 되지 않았고 브라우저의 비공개 속성이지만 최신 버전의 브라우저에서는 현재 요구되지 않습니다.

에는 접두사가 필요하지만, 더 나은 호환성을 위해서는 여전히 접두사가 필수입니다.

CSS는 HTML의 구조를 꾸미기 위해 등장했습니다. 이전 HTML이 할 수 없었던 일을 할 수 있습니다.

매우 아름답기 때문에 CSS는 HTML을 보완하는 것입니다.

예:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #ff00ff</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 16px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-weight</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> bold</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>wowaoda<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

css는 글꼴이 분홍색, 굵은 글꼴, 글꼴 크기가 16픽셀이 되도록 p 태그를 수정합니다. 이를 통해 CSS가 HTML의 요소에 스타일을 추가할 수 있음, 즉 수정하고 꾸미는 것을 알 수 있습니다. .

그럼 CSS는 무엇을 할 수 있나요?

CSS는 무엇을 할 수 있나요? ? ? ?

CSS는 이전에 단 몇 줄의 코드만으로 이미지와 스크립트를 사용해야 했던 애니메이션 효과를 포함한 다양한 효과를 얻을 수 있습니다.

둥근 모서리, 그림 테두리, 텍스트 그림자 및 상자 그림자, 전환, 애니메이션 등

CSS는 프런트엔드 개발자의 디자인 프로세스를 단순화하여 보다 유연한 페이지 레이아웃과 더 빠른 페이지 로딩 속도를 제공합니다.

사이트의 모든 웹페이지 스타일은 CSS 파일을 사용하여 제어할 수 있습니다.

CSS 파일에서 해당 코드를 수정하면 됩니다.

그러면 전체 사이트의 모든 페이지가 이에 따라 변경됩니다. CSS는 휴대폰, PDA, 프린터, 텔레비전, 게임 콘솔 등과 같은 다양한 장치를 지원할 수 있습니다.

목적: 성능과 구조를 분리합니다.

예:

코드

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(200,150,200,0.3)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 2px 2px 2px 3px #eee</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

이것은 페이지를 아름답게 만드는 CSS를 통해 전적으로 달성됩니다.

다음 항목도 클릭하세요:

애니메이션 CSS

위에서 언급한 내용으로 인해 그 힘이 궁금해집니다. 다음으로 언어를 살펴보겠습니다.

CSS 구문 구조?

CSS 구문은 선택기, 속성, 값의 세 부분으로 구성됩니다

속성은 설정하려는 스타일 속성입니다.

각 속성에는 값이 있습니다. 속성과 값은 콜론으로 구분됩니다.

<span style="color: #000000;">p{
    font-size:15px;
    }</span>

p는 선택자이고 속성은 글꼴 크기이며 값은 15px입니다.

<span style="color: #000000;">a{
    color:#000;
    }</span>

이것도 같은 의미로 이해되는데, 아주 비슷하죠? 구조는 이 세 부분으로 아주 간단합니다.

이미 CSS에 대해 충분히 알고 계시다면, 이러한 CSS를 어떻게 구현하시나요? 그럼 페이지 인용에 대해 이야기해 보겠습니다.

CSS를 어떻게 소개하나요?

소개하는 세 가지 방법:

1. 인라인 인용 인라인 인용이란 HTML 태그의 style 속성에 CSS 스타일 인코딩을 직접 작성하는 것을 말합니다.

CSS를 이런 방식으로 도입할 때는 선택기를 작성할 필요가 없다는 점에 유의하세요.

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:#ff7600;"</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

2. 페이지 인용

페이지 내 참조는 페이지의 별도 부분으로 사용되며