0

テキストのスタイリングに何かが乗っていると思いますが、それが何であるかはよくわかりません。私のコードには「#column-right」と「#column-right h1」があり、正しくスタイリングされています。今、段落テキストのスタイルを設定しようとしています。「#full_width」と「#full_width p」がありますが、p を正しくスタイルできません。この問題を引き起こしているコードの問題は何ですか?

アップデート：

次のようになります:スクリーンショット 1

次のようになります:スクリーンショット 2

INB4: ビルドが完了したら、スタイルを外部シートに引き出します。

<!DOCTYPE html>
<html>
<head>

<style>

/** -------------------------------MAIN - DON'T EDIT---------------------------------- **/

html {
max-width:56em;
margin:0 auto;
padding:1.25em;
font:100% "Helvetica Neue",sans-serif;
color:#222;
background:#e2e7e8;
}

* {
margin: 0;
padding: 0;
}

.clear { 
clear:both; 
}



/** ---------------------------HEADER COLUMN LEFT------------------------------------- **/

#headermanager {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

#column-left {
width: 230px;
float: left;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
background:rgba(255,255,255,0.75);
}

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
      box-sizing: border-box;
}


.pic {
 border: 10px solid #fff;  
 float: left;
 height: 180px;
 width: 180px;
 overflow: hidden;

 -webkit-box-shadow: 5px 5px 5px #111;
      box-shadow: 5px 5px 5px #111;  
}

.morphimg {
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
}

.morphimg:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
   -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
      transform: rotate(360deg);          
}

/** -------------------------------HEADER COLUMN CENTER------------------------------- **/


#column-center {
background:rgba(255,255,255,0.75);
width: 316px;
float: left;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
}

/** ---------------------------------HEADER COLUMN RIGHT------------------------------ **/


#column-right {

text-align:right;
background:rgba(255,255,255,0.75);
width: 310px;
float:right;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
}

#column-right h1 {

font-size:3em;
font-weight:200;
text-align:right;
width: 310px;
float:right;
}   

#column-right h2 {

font-size:1.3em;
font-weight:100;
text-align:right;
width: 310px;
float:right;
}   

#column-right h3 {

font-size:0.9em;
font-weight:200;
text-align:right;
width: 310px;
float:right;
} 


#progress_bar {
background:rgba(255,255,255,0.75);
width: 310px;
}

/** -----------------------------------SECTION HEADERS-------------------------------- **/

#section_header {
background: #e94939;
padding: 1rem;  
}

#section_header h1 {
font-size: 0.65em;
font-weight: 500;
letter-spacing: 0.35em;
text-transform: uppercase;
color: white;
text-align: center;

/** ---------------------------------------------------------------------------------- **/
/** -------------------------------------TEXT LAYOUTS--------------------------------- **/
/** ---------------------------------------------------------------------------------- **/

/** --------------------------------------ABOUT ME------------------------------------ **/

#full_width{    
padding-left:7.8em;
padding-right:7.8em;
padding-top:2.85em;
padding-bottom:2.85em;
background:rgba(255,255,255,0.75);
}

#full_width p { 
text-align:left;
font-size:0.8em;
font-weight:200;
}


</style>

</head>
<body>

<!--***********************************************************************************-->    
<!--********************************* HEADER STARTS ***********************************-->    
<!--***********************************************************************************-->    


<!----------------------------------COLUMN LEFT STARTS----------------------------------->    
    <div id="column-left">
        <div class="morphimg pic">
            <img src="http://i50.tinypic.com/11r4nwh.png" alt="beach">
        </div>
    </div>

 <!------------------------------- COLUMN CENTER STARTS ---------------------------------->

<div id="column-center">Social Hover</div>

<!----------------------------------COLUMN RIGHT STARTS---------------------------------->  
 <div id="headermanager">
<div id="column-right">
    <h1>John Doe</h1>
        <h2>lipsium ordium consecultar</h2>
            <h3>www.jdoedesign.com<br>
            me@jdoedesign.com<br>
            256-220-8360<br>
            141 Ritter Street Huntsville, AL 35816</h3>
    </div>
       <div class="clear"></div>
 </div>


<div id="section_header">
<h1>Hello World</h1>
</div>


<div id="full_width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui
        lorem, dictum non varius eget, accumsan ut tellus. Mauris sed nunc
        vitae lectus egestas aliquam eu eu libero. Cras tempus euismod
        interdum. Aenean rutrum orci nec mauris venenatis eu blandit est
        eleifend. Cras elit magna, tempus eu luctus quis, dapibus et purus.
        Suspendisse et quam ut est interdum porta. Morbi sed rhoncus risus.
        Pellentesque eu libero justo, at varius purus. Duis faucibus ultrices
        ipsum vitae eleifend. Suspendisse viverra congue dolor faucibus
        feugiat. Etiam pulvinar congue tellus sit amet dapibus. Morbi et
        ultricies diam. Suspendisse id vehicula lacus. Integer quis risus diam,
        a facilisis justo.<br><br>Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Sed lobortis
        aliquet lorem, at placerat orci fermentum non. Nam ut tortor eu eros
        gravida semper. Cras eget est ante. Sed vehicula justo et urna lacinia
        volutpat. Vestibulum dolor ante, sollicitudin vel ultricies nec, mattis
        non urna. Donec eget lorem ligula, quis ornare odio</p>
</div>

<!--***********************************************************************************-->    
<!--******************************** ABOUT ME STARTS **********************************-->    
<!--***********************************************************************************-->      



<!--***********************************************************************************-->    
<!--***************************** WORK EXPERIENCE STARTS ******************************-->    
<!--***********************************************************************************-->



<!--***********************************************************************************-->    
<!--******************************** EDUCATION STARTS *********************************-->    
<!--***********************************************************************************-->  



<!--***********************************************************************************-->    
<!--***************************** TECHNICAL SKILLS STARTS *****************************-->    
<!--***********************************************************************************-->



<!--***********************************************************************************-->    
<!--********************************** AWARDS STARTS **********************************-->    
<!--***********************************************************************************-->  



<!--***********************************************************************************-->    
<!--********************************** CONTACT STARTS *********************************-->    
<!--***********************************************************************************-->      
</body>
</html>
4

3 に答える 3

3

あなたはあなたの締めくくりを忘れました}

#section_header h1 {
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: white;
  text-align: center;
/* } Was not placed */

このフィドルを見てください

于 2013-03-30T21:56:15.000 に答える
0

特異性のために次のセレクターを使用します。

#full_width > p {
 /*myStyles*/
}

これにより、full_width div 内のすべての段落が選択されます。

于 2013-03-30T21:44:34.597 に答える