04-CSS 일반 선택기 및 속성

css 상용 선택기 및 속성
태그 선택기

라벨 선택기, 이 선택기는 영향 범위가 넓어서 일반적인 설정을 하거나 등급 선택기에 사용된다.예:

div{color:red} 
......
<div>     divdiv>   
<div>     divdiv>   

클래스 선택기

클래스 이름을 통해 요소를 선택할 수 있다. 한 클래스는 여러 요소에 적용할 수 있고 한 요소에서도 여러 클래스를 사용할 수 있으며 응용이 유연하고 복용이 가능하며 css에서 가장 많이 응용된 선택기이다.예:

.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold} 
......
<div class="blue">....div>
<h3 class="blue big box">....h3>
<p class="blue box">....p>

계층 구조 선택기

주로 라벨이 끼워진 구조에 응용되고 층별 선택기는 위의 두 가지 선택기와 결합하여 쓴 선택기로서 라벨 선택기와 결합하여 사용할 수 있고 이름을 줄일 수 있으며 층계를 통해 양식의 작용 범위를 제한할 수 있다.예:

.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
    <span>....span>
    <a href="#" class="pink">....a>
    <a href="#" class="gold">...a>
div>
<span>....span>
<a href="#" class="pink">....a>

CSS 속성 시작
레이아웃 일반 스타일 속성

width는 요소(라벨)의 폭을 설정합니다. 예를 들어:width:100px;

height 설정 요소(라벨)의 높이, 예를 들어:height:200px;

background는 요소의 배경색이나 배경 그림을 설정합니다. 예를 들어:background:gold;요소 배경색을 금색으로 설정

border는 요소 주위의 경계선을 설정합니다. 예를 들어:border:1px solid Black;요소 주위 테두리가 1픽셀 너비인 검은색 실선 설정

또한 4개의 모서리를 각각 설정하는 4개의 모서리로 나누는 쓰기 방법을 사용할 수도 있습니다.

border-top은 상단 테두리를 설정합니다. 예를 들어:border-top:10px solid red;

border-left는 왼쪽 테두리를 설정합니다. 예를 들어:border-left:10px solid blue;

border-right는 오른쪽 경계선을 설정합니다. 예를 들어:border-right:10px solid green;

border-bottom은 밑에 테두리를 설정합니다. 예를 들어:border-bottom:10px solid pink;

padding은 요소가 포함하는 내용과 요소 테두리의 거리를 설정하는데 내변거리라고도 부른다. 예를 들어padding:20px;패딩은 네 개의 변을 동시에 설정하고border처럼 네 개의 변으로 나눌 수 있다. 패딩-top,padding-left,padding-right,padding-bottom이다.

margin은 요소와 외부의 거리를 설정하는데 외부 거리라고도 부른다. 예를 들어margin:20px;margin은 네 개의 변을 동시에 설정하고border처럼 네 개의 변으로 나눌 수 있다. 그것이 바로 margin-top,margin-left,margin-right,margin-bottom이다.

float는 원소의 부동을 설정합니다. 부동은 블록 원소를 한 줄에 배열할 수 있습니다. 부동은 왼쪽 부동:float:left로 나눌 수 있습니다.오른쪽 부동:float:right;

텍스트 일반 스타일 속성 1:

color는 문자의 색을 설정합니다. 예를 들어:color:red;

font-size는 문자의 크기를 설정합니다. 예를 들어 font-size:12px;

font-family는 문자의 글씨체를 설정합니다. 예를 들어 font-family:'마이크로소프트 블랙';중국어가 호환되지 않는 것을 피하기 위해 일반적으로'font-family:'Microsoft Yahei'라고 쓴다.

font-weight 설정 문자가 굵어질지, 예를 들어:font-weight:bold;굵게 설정 font-weight:normal 설정은 굵게 하지 않음

line-height는 문자의 줄 높이를 설정합니다. 예를 들어:line-height:24px;문자의 높이와 문자의 상하 간격이 24px, 즉 줄마다 차지하는 높이가 24px

임을 나타낸다

text-decoration은 문자의 밑줄을 설정합니다. 예를 들어:text-decoration:none;밑줄 제거

스타일의 주석

/*         */
.header{
    width:960px;
    height:80px;
    background:gold;
}