CSS1 - 네벨사무소

<h1 style="color:red">hello world</h1>

<style>
    h2 {color:blue;}
</style>

텍스트 색상 주기

<1. Tag-Selektor>

<style>
        li{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>

모든 li 요소에 색상 지정

(

: HTML 목록에 포함할 항목을 정의하는 데 사용됩니다.)

<style>
    li{
        text-decoration: underline;
    }
</style>

밑줄

다른 효과가 뒤따를 경우 ‘;’를 사용해야 합니다. 이전 코드에 삽입(분리)

익숙해지는 것이 좋습니다 ; CSS에서 효과를 지정할 때 설정합니다.

<h1>

주제

유권자

{color : red; font-size : 12px;}

설명

색상: 속성

(속성: 일부 개체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메서드 사이의 기능적으로 중간에 있는 특수 클래스 멤버 유형입니다.)

빨간색 : 값(속성 값)

“:”: 값-속성 구분 기호

“;” : 선언 구분자

<2. ID-Selektor>

<style>
    li{
        color: red;
        text-decoration: underline;
    }
</style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>

li 태그 아래 css에만 효과를 적용하고 싶습니다.

<style>
    li{
        color: red;
        text-decoration: underline;
    }
    #select{
        font-size: 100px;
    }
</style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li id="select">CSS</li>
        <li>JavaScript</li>
    </ul>
</body>

ID 값 주기

스타일에 태그 추가 이제 select만 입력하면 모든 선택이 이루어집니다. 따라서 ID 값을 지정할 때 태그 앞에 “#”을 입력합니다.

.class 값{
        text-decoration: line-through;
    }

중간에 선을 그립니다(취소선).

<style>
    li{
        color: red;
        text-decoration: underline;
    }
    #select{
        font-size: 50px;
    }
    .deactive{
        text-decoration: line-through;
    }
</style>
</head>
<body>
    <ul>
        <li class="deactive">HTML</li>
        <li id="select">CSS</li>
        <li class="deactive">JavaScript</li>
    </ul>
</body>

class=””로 값을 지정하십시오.

스타일에 “.”를 추가해야 합니다. 앞에 두다

클래스는 관리를 용이하게 하는 그룹화입니다.

id: 학번처럼 생각하면 id가 속한 하나의 코드만 있을 수 있습니다. 한 번만 나타났다

클래스: 절반이라고 생각되는 코드를 여러 개 실행하고 싶을 때 사용합니다. 여러 모양으로 그룹화

<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>

<ul>

HTML 정렬되지 않은 목록을 정의하는 데 사용

<ol>

HTML 정렬 목록을 정의하는 데 사용

<style>
    ul li {
        color: red;
    }
</style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>

ul의 li 태그에만 빨간색을 지정하려면 (공백) 스타일에 “ul li”를 지정합니다.

ol li {
        border: 1px solid red
    }

테두리: 1px 솔리드 레드

<style>
    ul li {
        color: red;
    }
    #lecture>li {
        border: 1px solid red
    }
</style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <ol id="lecture">
        <li>HTML</li>
        <li>CSS
            <ol>
                <li>selector</li>
                <li>declaration</li>
            </ol>
        </li>
        <li>JavaScript</li>
    </ol>
</body>

직계 후손인 HTML, CSS 자바스크립트에만 효과를 적용하고 싶다면

ul {
        background-color: powderblue;
    }

배경색 주기

<style>
	ul {
        background-color: powderblue;
    }
    ol {
        background-color: powderblue;
    }
</style>

좀 더 명확하게 표현하자면 “,”로 정리하면 됩니다.

<style>
	ul,ol {
            background-color: powderblue;
        }
</style>

선택기

div : 모든 div 태그

div, span : 모든 div 태그 및 모든 span 태그

div span : div 내부의 모든 span 태그

#content : ID가 “content”인 요소

.box : 클래스가 “box”인 모든 요소

ul#box : ID가 “box”인 ul 태그

span.box : “box” 클래스가 있는 모든 범위 태그

* : 모든 요소

#box* : #box 안의 모든 요소

a:link, a:active, : 클릭한 상태에서 정상적인 상태의 링크,

a:visited : 그리고 방문한 상태에서

a: Hover: 마우스를 올려 링크

div > span : 모두 div에서 한 수준 깊은 범위에 걸쳐 있습니다.

<style>
    a:active{
            color: green;
        }
</style>

사용자 활성화 항목

색상을 녹색으로 변경하려면 클릭하십시오.

a:hover{
        color: yellow;
        }

마우스를 올리면 색상이 노란색으로 바뀝니다.

두 선언이 동일한 경우 css는 다음 선언을 따릅니다(호버가 먼저 선택).

<style>
        a:link{
            color: black;
        }
        a:visited{
            color: red;
        }
        a:hover{
            color: yellow;
        }
        a:active{
            color: green;
        }
        
    </style>
</head>
<body>
    <a href="http://opentutorials.org">방문함</a>
    <a href="http://a.a">방문안함</a>
</body>

방문: 방문한 애플리케이션

미방문 : 링크 적용

a:focus{
        color: white;
        }

코드 위로 마우스를 가져간 상태에서 Tab 키를 누르면 초점이 맞춰지고 상자가 생성됩니다.

초점을 뒤로 맞추는 것이 좋습니다.

<style>
input:focus{
            background-color: black;
            color: white;
        }
</style>
<body>
    <input type="text">
</body>

이렇게 적용할 수 있습니다