0217_CSS | Parent_child_selector

CSS

0217_CSS | Parent_child_selector | tag

Amarans 2020. 2. 19. 12:50

<!DOCTYPE html>
<html>
<head>
    <style>
       li {
           color: red;
       }
       #select{
           font-size: 22px; color: blue;
       }
       #select1{
           font-size: 33px; color: green;
       }


    </style>
</head>
<body>
   <ul>
       <li>HTML</li>
       <li id="select">CSS</li>
       <li id="select1">Java Script</li>
   </ul>
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <style>
        ul li{
            color: red;
        }
        #select>li{
            border:1px solid red; color:maroon;
        }
        ul,ol{
            background-color: skyblue;
        }
        #select2{
            color: green; font-size: 33px;
        }
       


    </style>
</head>
<body>
   <ul>
       <li>HTML</li>
       <li id="select2">CSS</li>
       <li>Java Script</li>
   </ul>

   <ol id="select">
      <li>HTML</li>
      <li>CSS
        <ol>
            <li>selector</li>
            <li>declaration</li>
        </ol>
      </li>
        
      <li>Java Script</li>
   </ol>
    
</body>
</html>

#hi = hi 라는 아이디를 가지고 있는 녀석과 , 그녀석 밑에있는 모든녀석
ul li {}= ul밑에 있는 li라는 모든 녀석들
#select>li {} = select 라는 id 를 가진 녀석의 밑에 있는 li 라는 녀석들
ul,ol {} = ul 과 ol 이라는 녀석들 (밑에있는 녀석들도 포함)
id를 쓸때 #id명
class를 쓸때 .class명

<!DOCTYPE html>
<html>
<head>
    <mata charset="utf-8">
    <style>
        a:link{
            color: black;
        }
        a:visited{
            color:red;
        }
        a:hover{
            color:yellow;
        }
        a:active{
            color:green;
        }
        input:focus{
            background-color: black; color: wheat;
        }
     

    </style>    
</head>

<body>
    <h1><a href="https://opentutorials.org">방문함</a>
    <a href="https://a.a">방문안함</a></h1>
    <input type="text">
   
    
</body>
</html>

a:active  { color : green; } = 마우스를 클릭하고 있을때 = 초록색
a:hover           : yellow;  = 마우스를 올려 놓았을때. = 노란색
a:visited          : red; = 방문한 곳 = 빨간색
a:link         : black; = 아직 클릭하지 않은 링크 방문하지 않은 곳 = 검은색