อยากเขียน css ให้ ข้อความมีพื้นหลังสีน้ำเงิน เขียนยังไงหลอครับ

[azprince]

อยากเขียน css ให้ ข้อความมีพื้นหลังสีน้ำเงิน เขียนยังไงหลอครับ

โค๊ด html ที่ผมกำหนดคือ

โค้ด เลือก ขยาย

<h1>line1<br>line2</h1>

แล้วให้บรรทัดแรกมีข้อความเป็นสีแดงก็เขียนเป็น

โค้ด เลือก ขยาย


h1::first-line{
  color: red;
}


แล้วที่บรรทัดแรกผมอยากให้มีพื้นหลังเป็นสีน้ำเงินด้วย ก็ลองใส่เป็น

โค้ด เลือก ขยาย


h1::first-line{
  color: red;
  background:blue;
}


แต่ผลคือสีน้ำเงินมันครอบคลุมแค่ข้อความเท่านั้น


ผมอยากให้พื้นหลังสีน้ำเงินมันยาวไปสุดขอบเลยอะครับ
แบบนี้


เขียนโค๊ดยังไงดีครับ ขอบคุณคร้าบบบ

[Zyrus]

ลองใส่ display:block เข้าไปครับ

[MD.18]

width:100%;text-align:center;  ได้ไหมลองดูครับ

[azprince]

ลองใส่ display:block เข้าไปครับ

ไม่ได้ครับ เหมือนเดิม

width:100%;text-align:center;  ได้ไหมลองดูครับ

ไม่ได้ครับ เหมือนเดิม

[Zyrus]

ลองเช็ค element ดูครับ
.element h1 {width:100%}
น่าจะใช้ได้

[azprince]

ลองเช็ค element ดูครับ
.element h1 {width:100%}
น่าจะใช้ได้

ไม่ได้อยู่ดีครับ เหมือนเดิม

[VadiForte]

ไม่น่าจะได้ครับ ต้องใส่ div ครอบเข้าไปครับ

ไม่ทราบว่า line 1 กับ line 2 นี่แยกกันได้หรือเปล่าครัล

[dekbannok14]

ไม่อยากยุ่งยากก็แยก class ครับ จัดการง่ายดี หรือไท่ก็ลองเพิ่ม span เข้าไปดูครับ

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

test{
width:100%;
tex-align:center;
margin:0;//h1 จะ default magin-botton มาให้
font-size:24px;
line-height:24px;//กำหนดเองได้อยากให้ห่าวกันเท่าไหร่
}
test.line1{
width:100%;
display:block;
color: red;
background:blue;
}
test.line2{
width:100%;
display:block;
}

ลองดูฮะ code อาจจะไม่ถูกต้องทั้งหมดนะฮะ ยังไงก็ขออภัยด้วย 

[methapun]

นี่ครับ ได้แน่นอนครับ

<style>
.test{
width:100%;
tex-align:center;
}
.line1{
width:100%;
display:block;
color: red;
background:blue;
padding:10px 0;
text-align:center;
}
.line2{
width:100%;
display:block;
padding:10px 0;
text-align:center;
}
</style>

(html)

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

[azprince]

นี่ครับ ได้แน่นอนครับ

<style>
.test{
width:100%;
tex-align:center;
}
.line1{
width:100%;
display:block;
color: red;
background:blue;
padding:10px 0;
text-align:center;
}
.line2{
width:100%;
display:block;
padding:10px 0;
text-align:center;
}
</style>

(html)

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

ตอนนี้มันก็ใช้ประมาณนี้อยู่อะครับ แต่มันไม่ถูกหลักโครงสร้างของ w3 เหอๆ ผมเลยอยากปรับให้มันออกมาดีที่สุดประมาณว่า ไม่ให้มี tag อื่นๆอยู่ข้างใน h1 อะครับ

[azprince]

ไม่อยากยุ่งยากก็แยก class ครับ จัดการง่ายดี หรือไท่ก็ลองเพิ่ม span เข้าไปดูครับ

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

test{
width:100%;
tex-align:center;
margin:0;//h1 จะ default magin-botton มาให้
font-size:24px;
line-height:24px;//กำหนดเองได้อยากให้ห่าวกันเท่าไหร่
}
test.line1{
width:100%;
display:block;
color: red;
background:blue;
}
test.line2{
width:100%;
display:block;
}

ลองดูฮะ code อาจจะไม่ถูกต้องทั้งหมดนะฮะ ยังไงก็ขออภัยด้วย 

เขียนแบบใช้ tag ซ้อนกัน h1 มันเขียนง่ายก็จริงอ่าครับ แต่มันไม่ถูกหลักโครงสร้าง tag ที่ w3 เขาบอกไว้อ่าครับ

[Surakrai]

โค้ดสั้นสุดได้แค่นี้ http://jsfiddle.net/a7oyuqy9/ 
ถูกหลักโครงสร้าง w3 หรือเปล่าไม่รู้ แต่เขาก็เขียนกันแบบนี้
เท่าที่เห็น ใน h1 ก็มี tag ข้างในอยู่เยอะ เช่น tag a

[dekbannok14]

ไม่อยากยุ่งยากก็แยก class ครับ จัดการง่ายดี หรือไท่ก็ลองเพิ่ม span เข้าไปดูครับ

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

test{
width:100%;
tex-align:center;
margin:0;//h1 จะ default magin-botton มาให้
font-size:24px;
line-height:24px;//กำหนดเองได้อยากให้ห่าวกันเท่าไหร่
}
test.line1{
width:100%;
display:block;
color: red;
background:blue;
}
test.line2{
width:100%;
display:block;
}

ลองดูฮะ code อาจจะไม่ถูกต้องทั้งหมดนะฮะ ยังไงก็ขออภัยด้วย 

เขียนแบบใช้ tag ซ้อนกัน h1 มันเขียนง่ายก็จริงอ่าครับ แต่มันไม่ถูกหลักโครงสร้าง tag ที่ w3 เขาบอกไว้อ่าครับ

อ่อ คับ งั้นก็คงต้องเอาตามหลัก w3c อ่าคับ ก็คงต้องแยกออกเป็น h1

<h1>line1</h1>

<h1>line2</h1>   

[azprince]

ไม่อยากยุ่งยากก็แยก class ครับ จัดการง่ายดี หรือไท่ก็ลองเพิ่ม span เข้าไปดูครับ

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

test{
width:100%;
tex-align:center;
margin:0;//h1 จะ default magin-botton มาให้
font-size:24px;
line-height:24px;//กำหนดเองได้อยากให้ห่าวกันเท่าไหร่
}
test.line1{
width:100%;
display:block;
color: red;
background:blue;
}
test.line2{
width:100%;
display:block;
}

ลองดูฮะ code อาจจะไม่ถูกต้องทั้งหมดนะฮะ ยังไงก็ขออภัยด้วย 

เขียนแบบใช้ tag ซ้อนกัน h1 มันเขียนง่ายก็จริงอ่าครับ แต่มันไม่ถูกหลักโครงสร้าง tag ที่ w3 เขาบอกไว้อ่าครับ

อ่อ คับ งั้นก็คงต้องเอาตามหลัก w3c อ่าคับ ก็คงต้องแยกออกเป็น h1

<h1>line1</h1>

<h1>line2</h1>   

คราวนี้ก็ผิดหลักทำอันดับบน google ละครับที่เขาว่ามี h1 ได้อันเดียว 5555

[parksong]

CSS

โค้ด เลือก ขยาย

#area{
  font-weight: bold;
 padding: 14px 18px;
 font-size: 14.0520833333333px;
 color: rgb(255, 255, 255);
 white-space: nowrap;
 width: auto;
 height: auto;
 border-width: 0px;
 background: rgb(255, 145, 0);
 text-align:center;
}

BODY

โค้ด เลือก ขยาย

<div id="area">
testtttttt
</div>




ประมาณนี้ได้ไหมครับ นอกนั้นตัวอักษรก็ปรับไซส์เ้อา  

[ieiq]

CSS

โค้ด เลือก ขยาย

#area{
  font-weight: bold;
  padding: 14px 18px;
  font-size: 14.0520833333333px;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  width: auto;
  height: auto;
  border-width: 0px;
  background: rgb(255, 145, 0);
  text-align:center;
}

BODY

โค้ด เลือก ขยาย

<div id="area">
testtttttt
</div>




ประมาณนี้ได้ไหมครับ นอกนั้นตัวอักษรก็ปรับไซส์เ้อา 

ผมก็แน่ะนำแบบนี้ครับ

[BakKheab]

ผมว่าแยกกันเลยดีกว่าครับ ง่ายและชัวร์

<h1>line-1</h1>
<h2>line-2</h2>

[wasantec]

หลายๆท่านแนะนำก็ใช้ได้นะครับ แต่ผมว่าอยู่ที่เราเลือกใช้มากว่า 

[towerlove]

เข้ามาฟังด้วยครับ ขอบคุณครับ

[killer777]

ลองแบบนี้ครับ
<p style="background-color:#009">Text ..........</p>

[auxtopuz]

ลองกำหนด height ดูครับ คิดว่า h1 คงไม่น่าจะเกิน 2 บรรทัดใช่ไหมครับ 

css ก็ ธรรมดาเลย

h1 {
   background: blue;
   height: 43px; //กำหนดพื้นที่ bg
   margin: 0;
   padding: 0;
   margin-bottom: 37px; //ดัน paragraph ไม่ให้ขึ้นมาทับบรรทัดที่ 2
}
h1::first-line{
   color: red;
}

[gapgag55]

มันมี div อื่นกระทำหรือเปล่าครับ

ทำไมแก๊ปใส่แค่นี้ได้เลย

http://codepen.io/gapgag55/pen/GgLwyQ

[BakKheab]

มันมี div อื่นกระทำหรือเปล่าครับ

ทำไมแก๊ปใส่แค่นี้ได้เลย

http://codepen.io/gapgag55/pen/GgLwyQ

จขกท เขาอยากยัดไว้ใน H1 แค่ตัวเดียวครับ แต่แยกเป็น 2 line
ถ้าแบบนี้ <h1><span class="line1">LINE1</span><span class="line2">LINE2</span></h1> ผิดกฎ W3 เพราะห้ามมี TAG ใดๆใน Heading (แต่ผมว่าถ้ามันแสดงผล OK ก็ช่างกฎเถอะ ถ้ามันไม่มีผลเสีอยต่อ SEO)
แต่ถ้าแบบนี้ <h1>LINE1</h1><h1>LINE2</h1> ผิดกฎ Search Engine เพราะมี H1 มากกว่า 1 ตัว (อันนี้ไม่แนะนำ)

สรุปแล้วแยกเป็น H1 กับ H2 จะดูดีมีสไตล์ที่สุดครับ