2014-11-19 3 views
0

div에 2 단락이 있습니다. 그 중 하나는 14px가되어야하고 다른 하나는 16px가되어야합니다. 첫 번째 클래스를 클래스에 넣으려고했으나 14px 값을 가져 오지 않았습니다 ... 이력서로, "12 mei, 2014 | Sport"가 필요하며 글꼴 크기는 14px이고 다른 하나는 16px.CSS의 단락 크기를 재정의하십시오

#kolom4 { 
 
    width: 1440px; 
 
    height: 718px; 
 
    background: #222222; 
 
} 
 
#kolom4 h2 { 
 
    margin-bottom: 40px; 
 
    padding-top: 29px; 
 
} 
 
#kolom4 p { 
 
    color: white; 
 
    font-size: 16px; 
 
} 
 
#kolom4 h3 { 
 
    color: #fdd400; 
 
    font-size: 20px; 
 
} 
 
.kolom4Date { 
 
    font-size: 14px; 
 
    color: white; 
 
} 
 
#section1 { 
 
    float: left; 
 
    text-align: left; 
 
    margin-left: 249px; 
 
    margin-bottom: 62px; 
 
} 
 
#text_img1 { 
 
    float: right; 
 
    width: 383px; 
 
    height: 220px; 
 
    margin-left: 20px; 
 
} 
 

 
#text_img1 a { 
 
    float: right; 
 
    text-decoration: none; 
 
    color: #fdd400; 
 
    font-style: oblique; 
 
}
<div id="kolom4"> 
 
      <h2>Nieuws</h2> 
 
      <div id="section1"> 
 
       <img src="images/kolom4Image1.jpg" /> 
 
       <div id="text_img1"> 
 
        <h3>Lorum ipsum</h3> 
 
        <p class="kolom4Date">12 mei, 2014 | Sport</p><br> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam [...]</p><br> 
 
        <a href="#">Lees meer ></a> 
 
       </div> 
 
      </div> 
 
     </div><!-- end kolom4 -->

+0

"kolumn4"라는 ID를 가진 이유에 대해 궁금한 점이 있습니다.이 항목은 "kolumn"이라는 id에 대해 반복적으로 반복되는 항목입니다. 즉 항목이 실제로 id 항목이 아닌 클래스를 사용해야한다는 의미입니다. . 거기에 –

+0

내 프로젝트에서 나는 또한 kolumn1, kolum2, ...., kolum7, 그리고 그 이유는 내가이 표기법을 사용 ... 잘못인가? – Valeriu92

+0

"kolumn"이 무엇인지에 달려 있습니다. 모든 요소가 기본적으로 동일하고 마크를 표시해야하는 경우 기본 스타일에는 클래스 "kolumn"을 사용하고 특정 스타일에는 "kolumn1"또는 "kolumn2"클래스를 사용합니다. ID는 고유 한 요소를위한 것으로 페이지 당 1 개만을 의미합니다. –

답변

3

변경 :

.kolom4Date { 

에 : 여기

내 코드입니다

#kolom4 .kolom4Date { 

이제 ID가 스타일 지정에 사용됩니다. 너무 구체적이어서 장기적으로 다른 문제가 발생합니다. 대신 클래스를 사용하면 훨씬 쉽게 될 것입니다.

+0

감사합니다. 흠. 내가이 프로젝트 ID 전체에서 사용했던 문제는 무엇입니까? – Valeriu92

+0

ID가 다른 셀렉터보다 "무게가 나가기"때문에 더 어렵게 만듭니다. 결국에는 결국 # some-id .some-class # another-id와 같은 긴 셀렉터를 얻게 될 것입니다. p {}'. 수업은 쉽게 관리 할 수 ​​있지만 계속 진행하면 항상 배우는 것이 좋습니다! –

+1

아, 잠시 내 모든 이드를 수업으로 바꾸어야한다고 생각했습니다. D ... 다음에 조언을 많이 쓰고 탱크를 많이 사용합니다! – Valeriu92

-1

이 시도 :

.kolom4Date { 
    font-size: 14px !important; 
    color: white; 
} 
+0

하지 마십시오. ! 중요한 것은 매우 악합니다. 아주 극소수의 경우에만이 작업을 수행해야합니다. 나는 언제든지! important의 사용을 권장하지 않습니다 !! –

+0

감사합니다. 한편 나는 또한 # text_img1 .kolom3Date {font-size : 14px;}도 작동한다는 것을 발견했다. – Valeriu92

+2

절대 사용하지 마라! important. 나중에 상황을 무효화해야 할 때 정말 혼란스러워집니다. CSS 캐스케이드를 사용하여 간단하게 스타일을 조정하십시오. ID를 모두 사용하지 않고 클래스를 사용하면 유연성이 향상됩니다. –

0

요소를 타겟팅하는 방식 때문에 스타일 font-size : 16px를 재정의했습니다. 대신

#kolom4 p{} 

사용을 사용 :

.kolom4p{ font-size: 16; } 

다음 단락에 클래스 kolom4p를 추가합니다.

관련 문제