Latest web development tutorials
×

CSS คู่มืออ้างอิง

CSS คู่มืออ้างอิง CSS ผู้เลือก CSS อ้างอิงคำพูด CSS Web แบบอักษรปลอดภัย CSS นิเมชั่น CSS หน่วย CSS สี CSS ค่าสีตามกฎหมาย CSS ชื่อสี CSS ค่าสีฐานสิบหก CSS สนับสนุนเบราว์เซอร์

CSS คุณสมบัติ

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function appearance backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight grid-columns grid-rows hanging-punctuation height icon justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position punctuation-trim quotes resize right rotation tab-size table-layout target target-name target-new target-position text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-outline text-overflow text-shadow text-transform text-wrap top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

แบบสอบถาม @media CSS3

ตัวอย่าง

ถ้าเอกสารมีความกว้างน้อยกว่า 300 พิกเซลคือการปรับเปลี่ยนการนำเสนอพื้นหลัง (สีพื้น):

หน้าจอ @media และ (ความกว้างสูงสุด: 300px) {
ร่างกาย {
สีพื้นหลัง: lightblue;
}
}

ลอง»

ความหมายและการใช้งาน

ใช้คำสั่ง @media คุณสามารถกำหนดรูปแบบที่แตกต่างกันสำหรับประเภทสื่อที่แตกต่างกัน

@media สามารถตั้งค่าสำหรับหน้าจอที่แตกต่างกันขนาดรูปแบบต่าง ๆ โดยเฉพาะอย่างยิ่งถ้าคุณต้องตั้งหน้าตอบสนองการออกแบบสื่อ @ เป็นประโยชน์อย่างมาก

เมื่อคุณตั้งค่าเบราว์เซอร์ขนาดของกระบวนการที่หน้าจะได้รับการแสดงผลหน้าเว็บที่อยู่บนพื้นฐานของความกว้างและความสูงของเบราว์เซอร์


สนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุ @media สนับสนุนกฎหมายเลขรุ่นเบราเซอร์แรก

กฎ
@media 21 9 3.5 4.0 9


CSS ไวยากรณ์

@media mediatype และ | ไม่ | เท่านั้น (คุณลักษณะสื่อ) {
CSS-Code;
}

นอกจากนี้คุณยังสามารถใช้สไตล์ชีตที่แตกต่างกันสำหรับสื่อที่แตกต่างกัน

<link rel = "สไตล์ชีต" สื่อ = "mediatype และ | ไม่ | เท่านั้น (คุณลักษณะสื่อ)" href = "myStyleSheet.css">

ประเภทสื่อ

ความคุ้มค่า ลักษณะ
ทั้งหมด สำหรับอุปกรณ์ทั้งหมด
เกี่ยวกับหู ล้าสมัย สำหรับการพูดและการสังเคราะห์เสียง
อักษรเบรลล์ ล้าสมัย อุปกรณ์อักษรเบรลล์ที่ใช้ในการสัมผัสความคิดเห็น
นูน ล้าสมัย อุปกรณ์การพิมพ์ตาบอดสำหรับการพิมพ์
ที่มีด้ามจับ ล้าสมัย สำหรับอุปกรณ์มือถือหรืออุปกรณ์ที่มีขนาดเล็กเช่น PDA และโทรศัพท์ขนาดเล็ก
พิมพ์ สำหรับเครื่องพิมพ์และตัวอย่างก่อนพิมพ์
ติ่ง ล้าสมัย สำหรับอุปกรณ์การฉาย
จอภาพ สำหรับหน้าจอคอมพิวเตอร์พีซีแท็บเล็ตมาร์ทโฟนและชอบ
การพูด นำไปใช้กับโปรแกรมอ่านหน้าจอและอุปกรณ์เสียงอื่น ๆ
TTY ล้าสมัย สำหรับการแก้ไขตารางตัวอักษรเช่นโทรเลขอุปกรณ์ปลายทางและตัวอักษรที่ จำกัด ของอุปกรณ์พกพา
โทรทัศน์ ล้าสมัย สำหรับทีวีและทีวีบนเว็บ

คุณสมบัติสื่อ

ความคุ้มค่า ลักษณะ
อัตราส่วน กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นความกว้างของหน้าอัตราส่วนความสูง
สี กำหนดอุปกรณ์การส่งออกในแต่ละกลุ่มจำนวนเดิมสี ถ้ามันไม่ได้เป็นอุปกรณ์สีค่าเท่ากับ 0
สีดัชนี จำนวนของรายการในตารางมองขึ้นสีถูกกำหนดไว้ในอุปกรณ์แสดงผล ถ้าคุณไม่ได้ใช้ตารางการค้นหาสีค่าเท่ากับ 0
อุปกรณ์อัตราส่วน อุปกรณ์แสดงผลความละเอียดหน้าจอกว้างที่มองเห็นได้อัตราส่วนความสูง
อุปกรณ์ที่มีความสูง อุปกรณ์แสดงผลหน้าจอความละเอียดสูงสามารถมองเห็นได้
อุปกรณ์ที่มีความกว้าง อุปกรณ์แสดงผลความละเอียดหน้าจอกว้างที่มองเห็นได้
ตะแกรง อุปกรณ์ส่งออกที่ใช้ในการค้นหาว่าตารางหรือตาข่าย
ความสูง กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นได้ของความสูงของหน้า
Max-อัตราส่วน อุปกรณ์แสดงผลความละเอียดหน้าจออัตราส่วนสูงสุดที่มองเห็นของความกว้างความสูง
แม็กซ์สี กำหนดจำนวนสูงสุดของอุปกรณ์ส่งออกชุดของเดิมแต่ละสี
แม็กซ์สีดัชนี จำนวนสูงสุดของรายการในตารางมองขึ้นสีจะถูกกำหนดไว้ในอุปกรณ์แสดงผล
Max-อุปกรณ์อัตราส่วน อุปกรณ์แสดงผลความละเอียดหน้าจออัตราส่วนสูงสุดที่มองเห็นของความกว้างความสูง
แม็กซ์อุปกรณ์ที่มีความสูง หน้าจอกำหนดอุปกรณ์ส่งออกมองเห็นได้ด้วยความสูงสูงสุด
แม็กซ์อุปกรณ์ที่มีความกว้าง อุปกรณ์แสดงผลความละเอียดหน้าจอกว้างที่มองเห็นได้สูงสุด
แม็กซ์ความสูง กำหนดอุปกรณ์การส่งออกในภูมิภาคมองเห็นได้จากความสูงสูงสุดของหน้า
Max-ขาวดำ ถูกกำหนดให้อยู่ในกรอบขาวดำบัฟเฟอร์มีต่อพิกเซลเป็นจำนวนสูงสุดของขาวดำเดิม
แม็กซ์ความละเอียด ความละเอียดสูงสุดที่กำหนดอุปกรณ์
ความกว้างสูงสุด กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นได้กว้างสูงสุดของหน้า
นาทีอัตราส่วน กำหนดอุปกรณ์แสดงผลในพื้นที่ของหน้าอัตราส่วนขั้นต่ำที่มองเห็นของความกว้างความสูง
นาทีสี กำหนดอุปกรณ์แสดงผลแต่ละจำนวนขั้นต่ำที่กำหนดเดิมสี
นาทีสีดัชนี จำนวนขั้นต่ำของรายการในตารางมองขึ้นสีจะถูกกำหนดไว้ในอุปกรณ์แสดงผล
นาทีอุปกรณ์อัตราส่วน หน้าจอกำหนดอัตราส่วนขั้นต่ำอุปกรณ์ส่งออกที่มองเห็นของความกว้างความสูง
นาทีความกว้างของอุปกรณ์ อุปกรณ์ส่งออกหน้าจอกำหนดความกว้างที่มองเห็นได้ขั้นต่ำ
นาทีอุปกรณ์ที่มีความสูง ขั้นต่ำที่กำหนดหน้าจอสูงมองเห็นอุปกรณ์ส่งออกของ
นาทีความสูง กำหนดอุปกรณ์การส่งออกในภูมิภาคมองเห็นได้จากความสูงต่ำสุดของหน้า
นาทีขาวดำ จำนวนขั้นต่ำของต้นฉบับสีจะถูกกำหนดไว้ในเฟรมบัฟเฟอร์ขาวดำมีต่อพิกเซล
นาทีความละเอียด ความละเอียดขั้นต่ำกำหนดอุปกรณ์
นาทีความกว้าง กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นได้ของความกว้างต่ำสุดของหน้า
ขาวดำ ถูกกำหนดไว้ในบัฟเฟอร์แบบขาวดำมีต่อพิกเซลขาวดำจำนวนเดิม ถ้ามันไม่ได้เป็นอุปกรณ์ขาวดำค่าเท่ากับ 0
ปฐมนิเทศ กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นได้ของความสูงของหน้ามีค่ามากกว่าหรือเท่ากับความกว้าง
ความละเอียด กำหนดความละเอียดของอุปกรณ์ เช่น: 96dpi, 300dpi, 118dpcm
การสแกน ขั้นตอนการสแกนประเภทโทรทัศน์ความละเอียดของอุปกรณ์
ความกว้าง กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นความกว้างของหน้า


ตัวอย่าง

ตัวอย่างเพิ่มเติม

ตัวอย่าง

ใช้คำสั่ง @media เพื่อสร้างการออกแบบที่ตอบสนองต่อ:

@media เพียงหน้าจอและ (ความกว้างสูงสุด : 500px) {
.gridmenu {
ความกว้าง: 100%;
}

.gridmain {
ความกว้าง: 100%;
}

.gridright {
ความกว้าง: 100%;
}
}

ลอง»

หน้าเว็บที่เกี่ยวข้อง

กวดวิชา CSS: CSS ประเภทสื่อ