ล่าสุดการพัฒนาเว็บบทเรียน
×

CSS เกี่ยวกับการสอน

CSS บ้าน CSS บทนำ CSS วากยสัมพันธ์ CSS ทำอย่างไร CSS สี CSS ภูมิหลัง CSS พรมแดน CSS อัตรากำไรขั้นต้น CSS การขยายความ CSS สูงกว้าง CSS ข้อความ CSS แบบอักษร CSS การเชื่อมโยง CSS รายการ CSS ตาราง CSS รูปแบบกล่อง ร่าง CSS การแสดงผล CSS CSS ความกว้างสูงสุด CSS ตำแหน่ง CSS ลอย CSS Inline-block CSS เป็นเส้นตรง CSS combinators CSS หลอกชั้น CSS องค์ประกอบหลอก CSS แถบนำทาง CSS เมนูแบบเลื่อนลง CSS คำแนะนำเครื่องมือ CSS แกลเลอรี่ภาพ CSS ภาพทึบ CSS ภาพแบบ Sprite CSS attr Selectors รูปแบบ CSS CSS เคาน์เตอร์

CSS3

CSS3 บทนำ CSS3 มุมโค้งมน CSS3 แสดงสินค้าชายแดน CSS3 ภูมิหลัง CSS3 สี CSS3 การไล่ระดับสี CSS3 เงา CSS3 ข้อความ CSS3 แบบอักษร CSS3 แปลง 2D CSS3 แปลง 3D CSS3 การเปลี่ยน CSS3 ภาพเคลื่อนไหว CSS3 ภาพ CSS3 ปุ่ม CSS3 การให้เลขหน้า CSS3 หลายคอลัมน์ CSS3 หน้าจอผู้ใช้ CSS3 กล่องขนาด CSS3 Flexbox CSS3 สื่อแบบสอบถาม CSS3 ตัวอย่าง MQ

CSS การออกแบบเว็บที่ตอบสนอง

การออกแบบเว็บที่ตอบสนอง แนะนำ การออกแบบเว็บที่ตอบสนอง วิวพอร์ต การออกแบบเว็บที่ตอบสนอง ตารางมุมมอง การออกแบบเว็บที่ตอบสนอง สื่อแบบสอบถาม การออกแบบเว็บที่ตอบสนอง ภาพ การออกแบบเว็บที่ตอบสนอง วิดีโอ การออกแบบเว็บที่ตอบสนอง กรอบ

CSS Examples

CSS ตัวอย่าง CSS ทดสอบ CSS ใบรับรอง

CSS References

CSS การอ้างอิง CSS selectors CSS ฟังก์ชั่น CSS หูอ้างอิง CSS Web Safe แบบอักษร CSS Animatable CSS หน่วย CSS PX-EM แปลง CSS สี CSS ค่าสี CSS ชื่อสี CSS3 สนับสนุนเบราว์เซอร์

 

CSSฟอร์ม


ลักษณะของรูปแบบ HTML และสามารถดีขึ้นมากด้วย CSS:

ลองตัวเอง»

จัดแต่งทรงผมช่องใส่

ใช้ width สถานที่ให้บริการในการกำหนดความกว้างของช่องใส่ไปนี้:

ตัวอย่าง

input {
    width: 100%;
}
ลองตัวเอง»

ตัวอย่างข้างต้นนำไปใช้กับทุก <input> องค์ประกอบ ถ้าคุณเพียงต้องการที่จะสไตล์ประเภทขาเข้าเฉพาะคุณสามารถใช้ตัวเลือกแอตทริบิวต์:

  • input[type=text] - จะเลือกช่องข้อความ
  • input[type=password] - จะเลือกเขตข้อมูลรหัสผ่าน
  • input[type=number] - จะเลือกช่องหมายเลข
  • ฯลฯ ..

เบาะปัจจัยการผลิต

ใช้ padding สถานที่ให้บริการเพื่อเพิ่มพื้นที่ภายในฟิลด์ข้อความ

เคล็ดลับ: เมื่อคุณมีปัจจัยการผลิตจำนวนมากหลังจากที่แต่ละอื่น ๆ ที่คุณอาจยังต้องการที่จะเพิ่มบาง margin เพื่อเพิ่มพื้นที่มากขึ้นด้านนอกของพวกเขา

ตัวอย่าง

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
ลองตัวเอง»
บันทึก โปรดทราบว่าเราได้ตั้ง box-sizing คุณสมบัติการ border-box ซึ่งทำให้แน่ใจว่าชายแดน padding และในที่สุดก็จะรวมอยู่ในความกว้างและความสูงรวมขององค์ประกอบ
อ่านเพิ่มเติมเกี่ยวกับ box-sizing คุณสมบัติในของเรา CSS3 กล่องขนาด บท

ขอบปัจจัยการผลิต

ใช้ border คุณสมบัติการเปลี่ยนขนาดเส้นขอบและสีและใช้ border-radius คุณสมบัติในการเพิ่มมุมโค้งมน:

ตัวอย่าง

input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}
ลองตัวเอง»

หากคุณต้องการเพียงเส้นขอบด้านล่างใช้ border-bottom ทรัพย์สิน:

ตัวอย่าง

input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}
ลองตัวเอง»

ปัจจัยการผลิตสี

ใช้ background-color คุณสมบัติการเพิ่มสีพื้นหลังการป้อนข้อมูลและ color คุณสมบัติการเปลี่ยนสีข้อความ:

ตัวอย่าง

input[type=text] {
    background-color: #3CBC8D;
    color: white;
}
ลองตัวเอง»

ปัจจัยการผลิตที่มุ่งเน้น

โดยค่าเริ่มต้นเบราว์เซอร์บางส่วนจะเพิ่มโครงร่างสีฟ้ารอบการป้อนข้อมูลเมื่อได้รับโฟกัส (คลิก) คุณสามารถลบปัญหานี้โดยการเพิ่ม outline: none; เพื่อการป้อนข้อมูล

ใช้ :focus เลือกจะทำอะไรกับช่องใส่เมื่อได้รับโฟกัส:

ตัวอย่าง

input[type=text]:focus {
    background-color: lightblue;
}
ลองตัวเอง»

ตัวอย่าง

input[type=text]:focus {
    border: 3px solid #555;
}
ลองตัวเอง»

การป้อนข้อมูลที่มีไอคอน / ภาพ

หากคุณต้องการภายในไอคอนการป้อนข้อมูลให้ใช้ background-image ทรัพย์สินและตำแหน่งที่มี background-position สถานที่ให้บริการ นอกจากนี้ยังเห็นว่าเราเพิ่มช่องว่างด้านซ้ายขนาดใหญ่เพื่อจองพื้นที่ของไอคอน:

ตัวอย่าง

input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}
ลองตัวเอง»

ป้อนข้อมูลการค้นหาเคลื่อนไหว

ในตัวอย่างนี้เราใช้ CSS3 นี้ transition สถานที่ให้บริการในการเคลื่อนไหวความกว้างของการป้อนข้อมูลการค้นหาเมื่อได้รับโฟกัส คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ transition สถานที่ให้บริการต่อมาในของเรา CSS3 เปลี่ยน บท

ตัวอย่าง

input[type=text] {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
ลองตัวเอง»

จัดแต่งทรงผม textareas

เคล็ดลับ: ใช้ resize ของสถานที่เพื่อป้องกันไม่ให้ textareas จากการถูกปรับขนาด (ปิดการใช้งาน "Grabber" ที่มุมขวาล่าง):

ตัวอย่าง

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}
ลองตัวเอง»

จัดแต่งทรงผมเลือกเมนู

ตัวอย่าง

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}
ลองตัวเอง»

จัดแต่งทรงผมปุ่มอินพุต

ตัวอย่าง

input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */
ลองตัวเอง»

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการรูปแบบปุ่มด้วย CSS อ่านของเรา สอนปุ่ม CSS