กำหนดลักษณะที่ปรากฏของเว็บกราฟิกเซ็นเซอร์ใน IoT ด้วย CSS
ในบทความก่อนหน้านี้ในชุดเรื่อง วิธีสร้างกราฟสถานะของเซ็นเซอร์ที่เชื่อมต่อกับ Internet of Things IoT อธิบายวิธี ใช้หน้าเว็บที่พัฒนาในรูปแบบ HTML เป็นโครงสร้างสำหรับกราฟิก. องค์ประกอบของหน้าเว็บซึ่งถูกลดขนาดลงเหลือน้อยที่สุดโดยใช้ออบเจ็กต์ <div>ไม่ได้กำหนดลักษณะที่ปรากฏโดยตรง แต่อ้างถึง ข้อมูลลักษณะที่ปรากฏไปยังสไตล์ชีต CSSซึ่งเป็นสิ่งที่จะอธิบายไว้ในส่วนนี้ของซีรีส์นี้
ในโซลูชันที่ฉันเสนอให้สร้างกราฟของเซ็นเซอร์ที่เชื่อมต่อกับ IoT จะใช้เอกสาร CSS ที่โหลดมาจากเอกสาร HTML. ถ้าเป็นรหัส HTML จะถูกสร้างจากแอปพลิเคชันบนเซิร์ฟเวอร์ เช่น ใน PHPมันจะง่ายมากที่จะรวมมันไว้เป็นส่วนหนึ่งของโค้ดที่กำหนดหน้าเว็บ แทนที่จะโหลดจากหน้าเว็บนั้น ซึ่งสามารถปรับให้เหมาะสมได้เล็กน้อยด้วยการบันทึกการโทร ไม่ว่าจะเลือกตัวเลือกใด วิธีที่สะดวกที่สุด ได้แก่ แก้ไขรหัส CSS ในเอกสารแยกต่างหากเพื่อให้จัดการได้สะดวกยิ่งขึ้นและสามารถนำกลับมาใช้ใหม่ได้. ในตัวอย่างที่พัฒนาขึ้นในบทช่วยสอนของบทความชุดนี้ มีการตั้งชื่อว่า estilo.css.
ในทำนองเดียวกัน, เมื่อจัดการกับโปรเจ็กต์ที่ซับซ้อน ขอแนะนำให้ใช้สไตล์ชีตแยกกันหลายชุดในเอกสารที่แตกต่างกันเพื่อให้สามารถนำฟังก์ชันเฉพาะมาใช้ซ้ำได้โดยไม่ต้องโหลดทั้งหมดในแต่ละครั้ง และแก้ไขโค้ดได้ง่ายขึ้นโดยการกระจายลงในเอกสารต่างๆ ตามโครงสร้างเชิงตรรกะที่เกี่ยวข้อง
สไตล์ CSS พวกเขาพยายามอธิบายพฤติกรรมและรูปลักษณ์สุดขั้วของหน้าเว็บจากวิธีการหลายประเภท ซึ่งทั้งหมดใช้ได้พร้อมกัน ในขณะที่พยายามเคารพความเข้ากันได้กับข้อกำหนดเฉพาะของเวอร์ชันก่อนหน้าให้มากที่สุด ซึ่งหมายความว่ามีวิธีแก้ไขปัญหาที่เป็นไปได้มากมายที่ตอบสนองความต้องการเดียวกัน รวมถึงทรัพยากรที่มีอยู่จำนวนมาก (คุณสมบัติ CSS). เนื่องจากแนวทางการสอนของบทความและเพื่อไม่ให้ผู้ใช้ใหม่สับสน CSSเฉพาะคุณสมบัติและ โครงสร้างที่จำเป็นสำหรับวัตถุประสงค์สุดท้ายซึ่งก็คือการแสดงข้อมูลแบบกราฟิกจากเซ็นเซอร์ที่เชื่อมต่อกับ Internet of Things ขณะเดียวกันก็ยังมีก การแนะนำเล็ก ๆ เกี่ยวกับ CSS, สไตล์ชีทแบบเรียงซ้อน
การจัดรูปแบบคุณสมบัติ CSS
El รูปแบบพื้นฐาน ประกอบด้วยชื่อคุณสมบัติ เครื่องหมายโคลอน ค่าคุณสมบัติ และเครื่องหมายอัฒภาค nombre:valor;
CSS ช่วยให้คุณสามารถใช้หน่วยวัดที่แตกต่างกันในเอกสารเดียวกันได้ รวมถึงสิ่งที่เกี่ยวข้องกับโครงสร้าง (การวัดสิ่งที่องค์ประกอบมีอยู่) เป็นเปอร์เซ็นต์ สัมพันธ์กับอุปกรณ์ที่ใช้แสดงองค์ประกอบเหล่านั้น เช่น พิกเซล หรือค่าสัมบูรณ์ เช่น เซนติเมตร หน่วยจะแสดงหลังค่าตามรหัสตัวย่อต่อไปนี้
| รหัส | เอกภาพ |
| % | เปอร์เซ็นต์คอนเทนเนอร์ |
| ch | สัมพันธ์กับความกว้างของเลขศูนย์ |
| cm | เซนติเมตร |
| em | สัมพันธ์กับประเภทฐานของคอนเทนเนอร์ |
| ex | สัมพันธ์กับความสูงของตัวอักษร x |
| in | นิ้ว |
| mm | มิลลิเมตร |
| pc | พิกัส (การวัดแบบพิมพ์) |
| pt | จุด (พิมพ์) |
| px | พิกเซล |
| REM | สัมพันธ์กับประเภทพื้นฐานของเอกสาร |
| vh | สัมพันธ์กับ 1% ของความสูงของดวงตา (หน้าจอมือถือ) |
| VMax | สัมพันธ์กับ 1% ของมิติที่ใหญ่ที่สุดของมุมมอง (หน้าจอมือถือ) |
| วีมิน | สัมพันธ์กับ 1% ของขนาดมุมมองที่เล็กที่สุด (หน้าจอมือถือ) |
| vw | สัมพันธ์กับ 1% ของความกว้างในการรับชม (หน้าจอมือถือ) |
สำหรับแอปพลิเคชันที่เราจะทำ สิ่งสำคัญคือต้องพิจารณาหน่วยสไตล์อย่างน้อยสามหน่วย % สำหรับการวัดสัมพันธ์กับขนาดของคอนเทนเนอร์ของรายการ พิกเซลสำหรับการวัดตามความละเอียดของหน้าจอ และหน่วยมิลลิเมตร (จริงๆ แล้วเป็นการวัดสัมบูรณ์) สำหรับการทำรายงานที่พิมพ์ออกมา
มีอยู่บ้าง คุณสมบัติที่ซับซ้อนหรือคอมโพสิต ซึ่งขึ้นอยู่กับค่าหลายค่า (เช่น สี ขนาด สไตล์...) เพื่อระบุค่า มีความเป็นไปได้สองประการใน CSS: เขียนตามลำดับที่เหมาะสม ทั้งหมด ค่าที่คั่นด้วยช่องว่างหรือใช้ผลรวมของคุณสมบัติอย่างง่ายที่เทียบเท่ากับค่าเชิงซ้อน. ตัวอย่างเช่น สามารถระบุระยะขอบทั้งสี่ของวัตถุได้ในคุณสมบัติเดียว margin หรือจะกำหนดคุณสมบัติก็ได้ margin-top, margin-right, margin-bottom y margin-left. อย่างไรก็ตาม ลำดับนั้น (ตามเข็มนาฬิกา) คือลำดับที่ตามด้วยคำอธิบายของค่าที่ "ล้อมรอบ" องค์ประกอบ เช่น ขอบด้านใน (ช่องว่างภายใน) หรือขอบด้านนอก ขอบ...
จากสิ่งที่ได้อธิบายไปแล้ว ตอนนี้เราสามารถเห็นตัวอย่างคุณสมบัติบางส่วนได้แล้ว
|
1
2
3
4
|
margin:10px 20px 0 10px;
width:500px;
height:100%;
color:#FF0099;
|
ในตัวอย่างข้างต้น สีถูกกำหนดโดยใช้รหัสเลขฐานสิบหก 6 หลักที่แสดงค่าของส่วนประกอบสีแดง เขียว และน้ำเงินเป็นคู่. เมื่อเกิดขึ้นดังตัวอย่างที่เลขสองหลักเท่ากันก็ให้เรียกย่อว่า #F09 (ซึ่งสอดคล้องกับสิ่งที่เรียกว่า "สีที่ปลอดภัยสำหรับเว็บ") ในข้อเสนอสุดท้าย ฉันจะหลีกเลี่ยงการใช้ตัวย่อเหล่านี้เพื่อรวมเกณฑ์และทำให้อ่านง่ายขึ้น คุณยังสามารถย่อค่าของคุณสมบัติที่ซับซ้อนได้ เช่น margin ในตัวอย่างนี้เมื่อค่าทั้งหมดหรือคู่ตรงข้ามถูกทำซ้ำ ในบรรทัดเดียวกันของข้อความบันทึก คุณสามารถละเว้นหน่วยได้เมื่อระบุคุณสมบัติเมื่อค่าเป็นศูนย์ เนื่องจากไม่เกี่ยวข้องในกรณีนั้น
ค่าบางค่า นอกจากจะสามารถแสดงเป็นตัวเลขได้แล้ว ยังมีชื่อด้วย ซึ่งทำให้โค้ดอ่านง่ายขึ้นและช่วยให้คุณจดจำได้ดีขึ้น ตัวอย่างเช่น แทนที่จะใช้รหัสตัวเลขฐานสิบหกของเป้าหมาย #FFFFFF (o #FFF) สามารถเขียนได้ white ด้วยผลลัพธ์เดียวกัน ด้วยวิธีนี้สีดำ #000000 (o #000) สามารถแทนที่ได้ด้วย black.
ด้วย มีค่าแสดงด้วยรหัสพิเศษชื่อ. ตัวอย่างเช่น เพื่อระบุว่าระยะขอบด้านข้างถูกตั้งค่าโดยอัตโนมัติโดยเบราว์เซอร์ (โดยปกติจะสอดคล้องกับฟังก์ชันศูนย์กลาง) จะใช้ค่าพิเศษ autoซึ่งไม่มีการโต้ตอบเชิงตัวเลขกับค่าใดๆ
ไปยัง แสดงวิธีพิเศษในการใช้ชุดค่าคอมโพสิต (เชิงซ้อน) ของคุณสมบัติ CSS คุณสามารถเลือกรูปแบบที่มีไวยากรณ์คล้ายกับของฟังก์ชันได้ ตัวอย่างเช่น การแสดงสีเป็นค่าสามค่าขององค์ประกอบสีแดง เขียว และน้ำเงิน (the รุ่น RGB) จะถูกเขียน color: rgb(128, 255, 64);. ภายในรูปแบบการแสดงออกนี้ยังสามารถใช้หน่วยได้ ในตัวอย่างข้างต้น ส่วนประกอบของสีเป็นค่าทศนิยมตั้งแต่ 0 ถึง 255 แต่อาจง่ายกว่าถ้าจะแสดงเป็นเปอร์เซ็นต์ของผลรวมของส่วนประกอบสีแต่ละสี ในกรณีนี้ก็สามารถเขียนเป็น color: rgb(50%, 100%, 25%);.
การคำนวณค่าใน CSS
ในเวอร์ชันล่าสุดของ CSS มันเป็นไปได้ที่จะทำ การดำเนินการทางคณิตศาสตร์อย่างง่ายในการคำนวณค่า. เมื่อต้องการทำเช่นนี้ ให้ใช้ calc และการดำเนินการที่จะดำเนินการจะแสดงอยู่ในวงเล็บ คุณสามารถระบุหน่วย วงเล็บ และตัวดำเนินการอย่างง่าย เช่น ผลรวม (+) การลบ (-) การคูณ (*) และการหาร (/). การแสดงออกจะเป็นประเภท width:calc((90%-20px)/2));.
ตัวแปรสามารถนำมาใช้ในการดำเนินการทางคณิตศาสตร์ได้ CSS อ้างอิงในการคำนวณทรัพย์สินหนึ่งถึงมูลค่าของอีกทรัพย์สินหนึ่งด้วย var. เพื่อให้สามารถใช้ตัวแปรได้โดยไม่จำเป็นต้องอ้างอิงถึงคุณสมบัติที่แท้จริงของสไตล์ จึงอนุญาตให้อ้างอิงคุณสมบัติที่ไม่มีอยู่ได้เช่นกัน CSS ขอแนะนำรูปแบบ --nombre-variable (เครื่องหมายยัติภังค์สองตัวอยู่หน้าชื่อของทรัพย์สินที่ประดิษฐ์ขึ้น) ด้วยวิธีนี้ เพื่อกำหนดความสูงขององค์ประกอบเป็นครึ่งหนึ่งของความกว้างของนิพจน์ CSS ในขณะที่ height:calc(var(width)/2); และเพื่อกำหนดตัวแปรใหม่ "ความหนา" (ซึ่งคุณสมบัติอื่นสามารถใช้ได้) คุณจะต้องเขียน เช่น --grosor:4px; เพื่อให้สามารถเรียกมันในภายหลังว่า margin-top:calc(var(--grosor)*4);
คุณสมบัติ CSS ขึ้นอยู่กับเบราว์เซอร์
CSS เป็นข้อกำหนดมาตรฐานโดยสมาคม W3C (Consortium เวิลด์ไวด์เว็บ) แต่มากมาย คุณสมบัติหรือลักษณะพฤติกรรมเข้าถึงเบราว์เซอร์ก่อนที่จะเป็นส่วนหนึ่งของข้อกำหนด ของเวอร์ชัน
เพื่อให้รหัส CSS ใช้งานได้กับฟีเจอร์ปัจจุบันของเบราว์เซอร์แต่ อย่าสูญเสียความเข้ากันได้กับฟีเจอร์ใหม่ ๆ มีการใช้คำนำหน้า. คำนำหน้านี้ขึ้นอยู่กับ เครื่องยนต์เรนเดอร์ ที่ใช้เว็บเบราว์เซอร์ที่คุณต้องการอ้างอิง (ซึ่งมีการกำหนดสไตล์ไว้)
คำนำหน้า -webkit มันใช้งานได้กับเบราว์เซอร์ที่ใช้ WebKit ในขณะที่ Safari o Chrome. คำนำหน้า -moz มันถูกใช้สำหรับเบราว์เซอร์ตาม เครื่องยนต์เรนเดอร์ de Mozilla, ในปัจจุบัน Geco,enในขณะที่ Firefox และอนุพันธ์ของมัน อ้างอิงถึง EdgeHTML, เครื่องยนต์เรนเดอร์ เบราว์เซอร์ ขอบ จากไมโครซอฟต์ (เดิมชื่อ ตรีศูล) จะใช้คำนำหน้า -ms. กรณีของเบราว์เซอร์ Opera จะพิเศษหน่อยตั้งแต่เขาเริ่มใช้ของเขาเอง เครื่องยนต์เรนเดอร์อ้างถึงด้วย -oแต่ปัจจุบันทำงานร่วมกับ WebKitซึ่งแสดงเป็น -webkit.
หากต้องการใช้คุณสมบัติที่อ้างอิงถึงเบราว์เซอร์ ให้เขียนชื่อ นำหน้าและคั่นด้วยยัติภังค์เหมือนใน -o-border-radius:10px;ซึ่งจะทำหน้าที่กำหนดเส้นขอบโค้งมน (มุมโค้งมน) ในเบราว์เซอร์เวอร์ชันเก่า Opera.
ความเห็น
เพื่อชี้แจงรหัส CSS คุณสามารถใช้ความคิดเห็นซึ่งจะทำให้อ่านง่ายขึ้นแม้ว่าจะมีข้อเสียในการเพิ่มขนาดก็ตาม ไวยากรณ์ของความคิดเห็นใน CSS มันเหมือนกับความคิดเห็นหลายบรรทัด C + + ซึ่งฉันแน่ใจว่าคุณรู้แล้ว: เริ่มต้นใน /* และลงท้ายด้วย */เช่นเดียวกับใน C + +สามารถครอบครองได้หลายบรรทัด
ตัวเลือก
ความหมายของ คุณสมบัติถูกกำหนดให้กับวัตถุในเอกสาร HTML จัดกลุ่มไว้ในตัวเลือก และใส่เหล็กดัดไว้ ตัวเลือกสามารถอ้างอิงองค์ประกอบภาษาได้ HTML (ฉลาก) เช่น div, คลาส (มอบหมายด้วย class en HTML) ตัวระบุ (กำหนดด้วย id en HTML) หรือทั้งหมด (“ตัวเลือกสากล”) ที่แสดงด้วยเครื่องหมายดอกจัน (*). ตัวอย่างต่อไปนี้แสดงตัวเลือกของแต่ละประเภท:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
* /* El asterisco es el selector universal */
{
margin:2px 6px 4px 20px;
}
div /* div es una etiqueta HTML */
{
width:500px;
height:200px;
}
.grafico /* «grafico» es el nombre de una clase que se usará en HTML con class=”grafico” */
{
color:#A0B0C0;
}
#superior /* «superior» es un identificador que se usará en HTML con id=”superior” */
{
width:100%;
color:#CCCCCC;
}
|
ฉลากของ HTML แสดงในคำจำกัดความสไตล์ด้วยชื่อ คลาสจะถูกทำเครื่องหมายโดยการใส่จุดนำหน้าชื่อ (.) และเครื่องหมายปอนด์ (#) สำหรับตัวระบุ
ส่วนหนึ่งของพลังอันยิ่งใหญ่ของ CSS อาศัยอยู่ใน ความเป็นไปได้ในการจัดกลุ่มตัวเลือกเมื่อกำหนดคุณสมบัติ. มีหลายวิธีในการจัดกลุ่มตัวเลือก โดยการจัดกลุ่มพวกเขา โดยคั่นด้วยเครื่องหมายจุลภาค แสดงว่าตัวเลือกที่อ้างถึงแต่ละตัวมีคุณสมบัติเหล่านั้น.
|
1
2
3
4
5
6
7
8
9
10
11
|
.consumo, .humedad, .temperatura
{
color:#FF00AA;
width:100%;
height:100%;
}
.temperatura
{
height:50%;
}
|
ตัวอย่างก่อนหน้านี้ระบุว่าคลาสการบริโภค ความชื้น และอุณหภูมิใช้สี ความกว้าง และความสูงร่วมกัน มีการนำแนวคิดใหม่มาใช้ในโค้ดนี้ด้วย: คุณสมบัติสามารถกำหนดใหม่ได้ และในกรณีนั้นคุณสมบัติที่อธิบายล่าสุดจะมีผลเหนือกว่า. ด้วยวิธีนี้ องค์ประกอบของระดับอุณหภูมิจะมีความสูง 50% ของวัตถุที่บรรจุองค์ประกอบเหล่านั้นในที่สุด
หากตัวเลือกที่จัดกลุ่มไม่ได้คั่นด้วยเครื่องหมายจุลภาค เงื่อนไขที่กำหนดให้กับคุณสมบัติจะเป็นแบบสะสมนั่นคือ องค์ประกอบจะต้องเป็นไปตามตัวเลือกทั้งหมดเพื่อให้ได้รูปลักษณ์หรือลักษณะการทำงานที่พวกเขากำหนด หากตัวเลือกอ้างถึงแท็ก HTML ลำดับที่ปรากฏจะต้องเรียงลำดับจากมากไปน้อยในระดับการรวม: อันดับแรกคือระดับลำดับชั้นสูงสุดและสุดท้ายคือระดับต่ำสุด
|
1
2
3
4
5
6
7
8
9
10
11
|
div.temperatura
{
color:#FF00AA;
width:100%;
height:100%;
}
.temperatura .consumo
{
height:50%;
}
|
ในตัวอย่างก่อนหน้านี้ มีการกำหนดองค์ประกอบ div ที่เป็นระดับอุณหภูมิและองค์ประกอบที่มีทั้งระดับอุณหภูมิและระดับการบริโภค (พร้อมกัน) เช่นเดียวกับใน class="temperatura consumo". องค์ประกอบ <div> ของรหัส HTML กับ class="temperatura" พวกเขาจะมีสูง 100%
คุณสมบัติ CSS เพื่อกำหนดข้อความ
สามารถแยกแยะความแตกต่างระหว่างคุณสมบัติสามประเภทที่ส่งผลต่อลักษณะที่ปรากฏของข้อความ: (1) คุณสมบัติที่กำหนดแบบอักษรที่ใช้นำเสนอ (2) คุณสมบัติที่กำหนดลักษณะที่ปรากฏของตัวอักษร (เนื้อหาของข้อความ) และ (3) เนื้อหาทั่วไป นั่นคือ เนื้อหาที่ส่งผลต่อทั้งรูปลักษณ์ของข้อความและส่วนประกอบอื่นๆ โดยทั่วไป สิ่งที่กล่าวเพื่ออธิบายกลุ่มสุดท้ายจะนำไปใช้กับคุณสมบัติเดียวกันกับองค์ประกอบอื่นๆ ด้วย
การพิมพ์ (แบบอักษร)
-
font-familyระบุชื่อของแบบอักษรที่ใช้สำหรับองค์ประกอบ คุณสามารถเขียนชื่อเดียวหรือรายการ ตามลำดับการตั้งค่าและแยกชื่อด้วยเครื่องหมายจุลภาคของแบบอักษรที่จะใช้เป็นทางเลือกหากไม่มีชื่อที่ต้องการ ในบรรทัดเดียวกัน คุณสามารถใช้แบบอักษรทั่วไปกับชื่อได้monospace,serif,sans-serif,cursive,fantasy. ในบรรดาฟอนต์ทั่วไปเหล่านี้ สิ่งที่สำคัญที่สุด (สำหรับการนำเสนอข้อมูลที่มีอยู่) คือฟอนต์แรกที่จะใช้ฟอนต์ระยะห่างคงที่ที่มีอยู่ในระบบและตั้งค่าล่วงหน้าโดยเบราว์เซอร์ ตามชื่อของมัน ที่สอง,serifโดยจะใช้ค่าเริ่มต้นที่มีอยู่ serif (การตกแต่งหรือความสง่างาม). หากไม่มีการประมูล ถ้าระบุอันที่สามไว้sans-serif. เลียนแบบการเขียนด้วยมือด้วยcursive(วิธีการเรียกที่สามารถปรับปรุงได้อย่างชัดเจน) และรูปแบบการตกแต่งของระบบด้วยfantasyคนสุดท้ายจากห้าคนสำหรับรหัสนั้น CSS ช่องว่างมีความหมายพิเศษเป็นตัวคั่น เมื่อชื่อของตระกูลแบบอักษรประกอบด้วยคำหลายคำที่คั่นด้วยช่องว่าง จะมีการเขียนระหว่างเครื่องหมายคำพูดเพื่อหลีกเลี่ยงความสับสน
1font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;เว็บเบราว์เซอร์สามารถใช้แบบอักษรในเครื่อง (ที่ติดตั้งบนระบบที่ใช้งานอยู่) รวมถึงแบบอักษรอื่นๆ ที่โหลดมาโดยเฉพาะ แม้จะทับซ้อนกับแบบอักษรที่ติดตั้งในเครื่องก็ตาม หากต้องการโหลดแบบอักษร ให้ใช้
@font-faceระบุชื่อ ตำแหน่งดาวน์โหลดคำจำกัดความ และคำอธิบายรูปแบบ (ถ้ามี)12345678910111213141516@font-face{font-family:“SircuitoExpandedLight”;src: url(‘/EOT/Sircuito-Expanded-Light.eot’);}@font-face{font-family:“SircuitoRegularMedium”;src: url(‘tipos/Sircuito-Regular-Medium.eot’);src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’),url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’),url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);-webkit-font-smoothing:antialiased;}ในคำจำกัดความแรกของทั้งสองในตัวอย่างก่อนหน้านี้ มีการโหลดตัวอักษรของเอกสาร Sircuito-Expanded-Light.eot ซึ่งอยู่ในโฟลเดอร์ EOT ภายในโฟลเดอร์หลัก (รูท) และถูกกำหนดให้เป็นนามสกุล วงจรขยายแสง. คุณชอบแบบอักษรนี้ไหม? ได้ฟรีคุณทำได้ ดาวน์โหลดฟอนต์ Sircuito ที่ฉันออกแบบมาสำหรับอิมเมจ GranaBot ได้ฟรี.
ดังที่เห็นได้ในตัวอย่าง คุณสมบัติ url ซึ่งสอดคล้องกับ ตัวระบุตำแหน่งทรัพยากรที่สม่ำเสมอช่วยให้คุณระบุตำแหน่งของเอกสารด้วยแบบอักษรที่ดาวน์โหลด เครื่องหมายสแลชใช้เพื่อแยกชื่อของโฟลเดอร์ต่างๆ ออกจากเส้นทางไปยังแบบอักษร โดยเริ่มจากโฟลเดอร์ที่มีเอกสารที่ใช้ทำการโทรหรือจากรูทหาก URL เริ่มต้นด้วยบาร์
ตัวอย่างที่สองใช้เอกสารทางเลือกหลายฉบับเพื่อให้คำจำกัดความเดียวกันใช้ได้กับเบราว์เซอร์หลายตัว (แต่ละเบราว์เซอร์จะโหลดประเภทที่สามารถตีความได้)
บรรทัดสุดท้ายของคำจำกัดความรวมถึงคุณสมบัติด้วย
font-smoothingเพื่อทำให้ตัวอักษรนุ่มลง (ใช้ a การลดรอยหยัก). เนื่องจากไม่ใช่คุณสมบัติมาตรฐาน จึงใช้คำนำหน้า-webkit. -
font-sizeทำหน้าที่ระบุขนาดของตัวอักษรเหมือนในfont-size:12px; -
font-weightตั้งค่าความหนาของแบบอักษร สามารถแสดงเป็นค่าตัวเลขได้ โดยปกติจะเป็นผลคูณของ 100 ระหว่าง 100 ถึง 900 ตามน้ำหนักการพิมพ์ตามปกติ หรือบ่อยกว่านั้นโดยใช้ชื่อ:normalสำหรับความหนาของฐานboldสำหรับตัวหนา,bolderสำหรับรุ่นที่มักเรียกว่าสีดำlightสำหรับปรับ (โดยทั่วไปเรียกว่าแสง) และlighterสำหรับผู้ที่บางที่สุด (บางครั้งเรียกว่าบาง)ค่าตัวเลขของแบบอักษรเวอร์ชันปกติคือ 400 (ไม่มีหน่วย) และ 700 สำหรับเวอร์ชันตัวหนา
ตามค่าเริ่มต้น ถ้าไม่ได้ระบุค่าอื่น ลักษณะที่ปรากฏของแบบอักษรจะเป็นค่าที่สอดคล้องกัน
normalหรือ 400 ดังนั้นหากไม่ได้มีการเปลี่ยนแปลงในองค์ประกอบทั่วไปหรือในคอนเทนเนอร์ที่สืบทอดมาก็ไม่จำเป็นต้องระบุfont-weightด้วยค่าnormal. -
font-stretchใช้เพื่อระบุความกว้างของตัวอักษร ตราบใดที่ยังมีอยู่ในตระกูลที่เกี่ยวข้อง ค่าที่เป็นไปได้ที่คุณสมบัติสามารถรับได้ เรียงลำดับจากแคบที่สุดไปหากว้างที่สุด คือ:ultra-condensed,extra-condensed,condensed,semi-condensed,normal,semi-expanded,expanded,extra-expandedyultra-expanded. ด้วยเกณฑ์เดียวกันกับที่ใช้ในคุณสมบัติก่อนหน้า ความกว้างเริ่มต้นคือnormalและไม่จำเป็นต้องระบุอย่างชัดแจ้งเว้นแต่จะมีการเปลี่ยนแปลงในลำดับชั้นที่สูงกว่าที่กำหนดไว้ -
กับ
font-styleคุณสามารถระบุได้ว่าข้อความถูกวาดด้วยตัวอักษรเอียงหรือเฉียงซึ่งส่งผลต่อรูปลักษณ์หรือด้วยอักษรตัวสะกดซึ่งแสดงความหมายพิเศษ (เช่น คำต่างประเทศ) หรือตัวอักษรกลมซึ่งไม่ใช่ตัวอักษรก่อนหน้า หรือปกติ มูลค่าobliqueบรรลุหน้าที่ประการแรกคือรูปลักษณ์และคุณค่าitalicที่สอง. ความจริงที่ว่ารูปลักษณ์ของทั้งสองมักจะคล้ายกันหรือเหมือนกันหมายความว่าบางครั้งการใช้ (ความหมาย) จะสับสน ดังนั้นจึงควรให้ความสนใจ เช่นเดียวกับคุณสมบัติอื่นๆnormalทำหน้าที่ปิดการใช้งานค่าก่อนหน้า -
text-decorationทำหน้าที่ขีดเส้นใต้ (ด้วยค่าunderline) โอเวอร์ไลน์ (ด้วยค่าoverline) ขีดฆ่า (ด้วยค่าline-through) หรือแฟลช (พร้อมค่าblink) ข้อความที่คุณสมบัตินี้มีผล -
เพื่อให้ซีรีส์ด้านการพิมพ์สมบูรณ์ แม้ว่าการใช้งานของเราจะไม่เกี่ยวข้องกันมากนัก
font-variantให้คุณสมัครได้ หมวกใบเล็ก (ตัวพิมพ์ใหญ่เล็ก) ให้กับข้อความ
ข้อความ
-
text-alignบอกเบราว์เซอร์ว่าควรจัดแนวบล็อกข้อความอย่างไร การจัดตำแหน่งที่เป็นไปได้คือทางซ้าย (ซึ่งถือเป็นค่าเริ่มต้น) พร้อมโค้ดleft, ศูนย์กลางด้วยค่าcenterถูกต้องใช้rightและเป็นธรรมที่ปลายทั้งสองด้วยjustify. -
line-heightตั้งค่าการแยกระหว่างบรรทัดของข้อความ ในกรณีนี้ ถ้าใช้เปอร์เซ็นต์ ค่า 100% จะสอดคล้องกับความสูงของข้อความแทนการวัดคอนเทนเนอร์ การวัดที่ใช้มากที่สุดเมื่อเทียบกับข้อความคือ 120% เส้น 100% หมายความว่าส่วนล่างของบรรทัดหนึ่งแตะด้านบนของบรรทัดถัดไป แม้ว่าการออกแบบตัวอักษรมักจะมีช่องว่าง แต่ก็เป็นเรื่องปกติที่จะเว้นระยะห่างระหว่างบรรทัดไว้เล็กน้อยในการแสดงการแยกระหว่างบรรทัด คุณสามารถระบุค่าสัมประสิทธิ์ (ค่าที่ไม่มีหน่วย) เพื่อใช้คำนวณความสูงของเส้นตามความสูงของกล่องข้อความได้
-
letter-spacingคือค่าช่องว่างระหว่างตัวอักษรของคำ ซึ่งในทางวิชาการพิมพ์เรียกว่า Kning o การติดตาม. -
word-spacingแสดงถึงการวัดช่องว่างระหว่างคำ -
white-spaceกำหนดลักษณะการทำงานของช่องว่างสีขาวในข้อความ เมื่อมีการใช้ค่าnormalซึ่งใช้โดยค่าเริ่มต้น จะรวมช่องว่างหลายๆ ช่องในโค้ด HTML ในงานนำเสนอรายการใดรายการหนึ่งบนหน้าเว็บ (แสดงโดยเบราว์เซอร์) และใช้ช่องว่างสีขาวเป็นข้อมูลอ้างอิงเพื่อแบ่งบรรทัดหากไม่มีช่องว่างในบล็อกความคุ้มค่า
nowrapนอกจากนี้ยังรวมช่องว่างที่ซ้ำกันเป็นหนึ่งเดียวแต่ไม่แยกบรรทัดข้อความในช่องว่างแม้ว่าบรรทัดจะไม่พอดีกับคอนเทนเนอร์ก็ตาม ทำให้ล้นช่องว่างหากจำเป็น และเขียนไว้ด้านนอกหากจำเป็น หากต้องการแบ่งเส้นอย่างชัดเจนคุณสามารถใช้ป้ายกำกับได้<br>de HTML.การใช้
preช่องว่างต่างๆ จะไม่มีการรวมเป็นหนึ่งเดียวโดยการรวมเข้าเป็นหนึ่งเดียว และจะไม่มีการแบ่งบรรทัดโดยใช้ช่องว่างเป็นข้อมูลอ้างอิงpre-lineเข้าร่วมช่องว่างที่ทำซ้ำและแบ่งบรรทัดหากจำเป็นโดยใช้ช่องว่างเป็นข้อมูลอ้างอิงpre-wrapรักษาช่องว่างซ้ำและแบ่งบรรทัดหากจำเป็นโดยใช้ช่องว่างเป็นข้อมูลอ้างอิง
สี
En CSS สามารถแสดงสีได้ตาม รุ่นสี RGB หรือตาม โมเดลสี HSL และในทั้งสองกรณีสามารถรวมข้อมูลความโปร่งใสได้ ซึ่งเป็นค่าของช่องที่สี่ที่ปกติเรียกว่า ช่องอัลฟ่า o องค์ประกอบอัลฟ่าซึ่งก่อให้เกิดรุ่น RGBA และ HSLA
เพื่อแสดงสีในรูปแบบ RGB การใช้สัญลักษณ์เลขฐานสิบหกจะใช้ไวยากรณ์ #RRGGBBโดยที่ RR เป็นค่าขององค์ประกอบสีแดง (โดยหลักการแล้ว ใช้เลขฐานสิบหกสองหลัก) GG คือค่าขององค์ประกอบสีเขียว และ BB เป็นค่าขององค์ประกอบสีน้ำเงิน ดังที่ได้กล่าวไปแล้ว หากตัวเลขสองหลักของแต่ละองค์ประกอบมีค่าเท่ากันก็สามารถแสดงเป็นได้ #RGB การจำกัดจำนวนสีที่มีให้กับสิ่งที่เรียกว่าสีที่ปลอดภัยบนเว็บ
นอกจากวิธีการแสดงสีแบบนี้ที่คลาสสิกและน่าใช้ที่สุดแล้วยังสามารถแสดงเป็น rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) เพื่อระบุในรูปแบบ RGB, HSL และแบบฟอร์มที่เกี่ยวข้องโดยมีความโปร่งใส (ช่องอัลฟ่า)
เว้นแต่จะมีการร้องขอเป็นอย่างอื่นโดยการเพิ่มส่วนต่อท้ายหน่วย รุ่น RGB ใช้ค่าทศนิยมตั้งแต่ 0 ถึง 255 สำหรับส่วนประกอบทั้งสามค่าคือค่าของ ส่วนประกอบอัลฟ่า คือค่าสัมประสิทธิ์ (ทศนิยมจากศูนย์ถึงหนึ่ง) และค่าแรกของ โมเดลสี HSLฮิว คือค่าทศนิยมตั้งแต่ 0 ถึง 360 (ไม่มีหน่วย) แทนมุม ค่าความอิ่มตัวและความสว่างของ รุ่น HSL โดยปกติจะแสดงเป็นเปอร์เซ็นต์
ดังที่ได้กล่าวไปแล้วแม้ว่าการใช้งานจะไม่บ่อยนัก แต่สามารถระบุสีด้วยชื่อในรูปแบบได้ color:black; แทนที่ color:#000000;. รูปแบบแรกอ่านง่ายกว่าแต่จำกัดอยู่แค่ตารางค่าสั้นๆ ที่แก้ไขตัวเลขจากแอปพลิเคชันที่เขียนได้ยากกว่าเช่นกัน JavaScript.
สำหรับข้อเสนอของเราสำหรับการแสดงข้อมูลแบบกราฟิกจากเซ็นเซอร์ที่เชื่อมต่อกับ IoT เราจะต้องมีคุณสมบัติที่เกี่ยวข้องกับสีเพียงสามประการเท่านั้น พวกเขาจะทำหน้าที่ทั้งสองเพื่อระบุชื่อของข้อความซึ่งขณะนี้ได้อธิบายไว้แล้ว และเพื่อระบุชื่อของส่วนประกอบใดๆ ที่สนับสนุน
-
colorระบุสีขององค์ประกอบ HTML และของที่มีอยู่ (ซึ่งสืบทอดมา) เว้นแต่ว่ามีการเปลี่ยนแปลงโดยชัดแจ้งโดยการกำหนดสีอื่นทีละสี -
background-colorใช้เพื่อกำหนดสีพื้นหลังขององค์ประกอบ HTML. นอกจากการระบุสีเป็นค่าแล้ว RGB o HSL คุณสามารถใช้ค่าพิเศษได้transparentเพื่อให้วัตถุไม่มีสีพื้นหลังและสามารถมองเห็นสิ่งที่อยู่ด้านหลังได้ กล่าวคือ มันไม่ครอบคลุมองค์ประกอบที่มันถูกวาด -
opacityช่วยให้คุณสามารถตั้งค่าความทึบ (ทางอ้อม ความโปร่งใส) ขององค์ประกอบและเนื้อหาทั้งหมด (เพื่อไม่ให้สับสนกับความโปร่งใสของพื้นหลัง) หากกำหนดความโปร่งใสให้กับองค์ประกอบที่มีอยู่ในองค์ประกอบอื่นที่มีความโปร่งใส สิ่งนี้จะเพิ่มขึ้น และจะไม่ทำงานแยกกัน คุณไม่สามารถทำให้วัตถุที่อยู่ในวัตถุโปร่งใสมีความทึบมากขึ้นได้ คุณค่าของopacityมันจะแสดงเป็นสัมประสิทธิ์เช่นopacity:0.5;เพื่อระบุความทึบ 50%เบราว์เซอร์ของ Microsoft เวอร์ชันเก่าไม่ได้ใช้คุณสมบัตินี้ แต่มีคุณสมบัติ
filter(ตัวกรอง) ที่สามารถรองรับอัลฟ่าได้ (สำหรับ ช่องอัลฟ่า) ซึ่งสามารถกำหนดเปอร์เซ็นต์ความทึบได้opacityตามรูปแบบ:1filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */
มาตรการ
En CSS, การวัดองค์ประกอบ <div>ซึ่งเราได้เลือกที่จะเขียนคอนเทนเนอร์กราฟิกถูกตั้งค่าด้วย width (ความกว้าง) และ height (อัลโต).
ระหว่างเนื้อหาของ <div> และปริมณฑลมีพื้นที่บรรจุซึ่งกำหนดด้วยค่าของ padding. รอบๆ เส้นรอบวงของวัตถุคือขอบซึ่งมีการระบุการวัดด้วยคุณสมบัติ border. การแยกส่วนภายนอกของวัตถุ <div> ของวัตถุรอบๆ อื่นๆ จะมีช่องว่างซึ่งกำหนดการวัดโดย margin.
ภายใต้สภาวะปกติ การวัดพื้นที่ที่วัตถุใช้ <div> สามารถคำนวณเป็นผลรวมของความกว้างหรือความสูงบวกกับช่องว่างภายใน (padding) บวกเส้นขอบ (border) บวกส่วนต่าง (margin). เมื่อการวัดที่เกี่ยวข้องที่สร้างขึ้นคือพื้นที่ภายในที่เป็นประโยชน์ของวัตถุ <div>องค์ประกอบนี้มีประโยชน์มาก แต่ถ้าสิ่งที่ทราบคือการวัดทั้งหมดที่มีอยู่ พฤติกรรมนี้สามารถเปลี่ยนแปลงได้ตั้งค่าตามค่าเริ่มต้น เพื่อให้การวัดความกว้างและความสูงรวมเป็นค่าที่ระบุ width (ความกว้าง) และ height (ความสูง) โดยลบการวัดของช่องว่างภายใน เส้นขอบ และระยะขอบออก แทนที่จะบวกเข้าไป หากต้องการใช้โหมดนี้ ให้กำหนด คุณสมบัติ box-sizing ค่า border-box (ค่าเริ่มต้นคือ content-box)
แผนภาพต่อไปนี้แสดงค่าผลลัพธ์แบบกราฟิก width (ความกว้าง) และ height (สูง)หากใช้ box-sizing:border-box; (ยอดรวม) หรือbox-sizing:content-box; (ข้างใน)
ค่าการวัดจะแสดงด้วยหน่วยที่ได้อธิบายไปแล้ว เมื่อพูดถึงคุณสมบัติที่กำหนดโดยค่าหลายค่า คุณสามารถผสมตัวเลขที่แสดงด้วยค่าเฉลี่ยประเภทต่างๆ ได้ นอกจากนี้ยังมีค่าพิเศษบางอย่างที่เกี่ยวข้องกับการใช้งานที่เราจะทำในการใช้งานกราฟเซ็นเซอร์ใน IoT โดยเฉพาะเราสามารถใช้ค่าได้ auto ในทรัพย์สิน margin เป็นทรัพยากรในการตั้งศูนย์กลางวัตถุในบางกรณี
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.caja_chica
{
box-sizing:border-box;
width:400px;
height:100px;
padding:5px 10px 15px 20px;
border:2px solid #000000;
margin:10px 10px 10px 10px;
}
.caja_grande
{
width:400px;
height:100px;
padding:5px 10px 15px 20px;
border:2px dashed #FF0000;
margin:10px 10px 10px 10px;
}
|
ในตัวอย่างข้างต้น สำหรับคลาส “small_box” จะมีการกำหนดเส้นขอบหนา 2 พิกเซล โดยวาดด้วยเส้นขีดสีดำ (#000000) ต่อเนื่อง (solid). ในคลาส “big_box” เส้นที่ใช้สำหรับเส้นขอบจะเป็นเส้นประ (dashed) และสีแดง (#FF0000). เพื่อแสดงค่าเหล่านี้แยกกันเราสามารถใช้ border-width เพื่อความหนา border-style สำหรับจังหวะและ border-color สำหรับสี คุณสมบัติของขอบเหล่านี้จะประกอบกันและประกอบขึ้นจากคุณสมบัติด้านบน ขวา ล่าง และซ้าย ตามทิศทางตามเข็มนาฬิกาตามที่อธิบายไว้ข้างต้น
คลาสทั้งสองที่ได้รับการกำหนดไว้มีการวัดที่เหมือนกัน แต่คลาสแรกมีขนาดเล็กกว่า เมื่อใช้ค่า border-box เพื่อทรัพย์สิน box-sizingช่องว่างภายใน เส้นขอบ และระยะขอบจะถูกวาดภายในวัตถุแทนที่จะวาดรอบๆ เนื้อหา เช่นเดียวกับค่าเริ่มต้น ในคลาส "big_box" ไม่ได้ระบุ ดังนั้นค่าดังกล่าวจึงถือเป็นค่าเริ่มต้น content-box ซึ่งทำให้ช่องว่างภายใน ขอบ และระยะขอบเพิ่มขึ้นตามขนาดที่ระบุ width y height.
ค่าระยะขอบของคลาสในตัวอย่างด้านบนคือ 10 พิกเซลที่ด้านบน ขวา ล่าง และซ้าย จึงสามารถแสดงเป็นค่าเดียวได้ margin:10px;. เป็นเรื่องน่าสนใจมากที่จะทราบทางเลือกนี้เพื่อทำความเข้าใจโค้ดที่พัฒนาโดยบุคคลที่สาม แม้ว่าในข้อเสนอการใช้งานนี้ แนะนำให้ระบุและทำซ้ำค่าต่างๆ เพื่อให้สามารถอ่านได้ง่ายขึ้น
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
.laconica /* Clase lacónica */
{
background-color:#00F; /* Equivale a background-color:#0000FF; */
padding:10px 5px; /* Equivale a padding:10px 5px 10px 5px; */
margin:1%; /* Equivale a margin:1% 1%; que equivale a margin:1% 1% 1% 1%; */
border:1px solid #000;
/* Lo anterior puede expresarse de forma menos compacta como:
border-width:1px;
border-style:solid;
border-color:#000;
*/
}
.explicita
{
background-color:#0000FF;
padding:10px 5px 10px 5px;
margin:1% 1% 1% 1%;
border-width:1px 1px 1px 1px;
border-style:solid solid solid solid;
border-color:#000000 #000000 #000000 #000000;
}
.locuaz
{
/* Color de fondo */
background-color:rgb(0,0,255);
/* Relleno, dimensiones */
padding-top:10px;
padding-right:5px;
padding-bottom:10px;
padding-left:5px;
/* Margen, dimensiones */
margin-top:1%;
margin-right:1%;
margin-bottom:1%;
margin-left:1%;
/* Borde, grosor */
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
/* Borde, estilo */
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
/* Borde, color */
border-top-color:#000000;
border-right-color:#000000;
border-bottom-color:#000000;
border-left-color:#000000;
}
|
คลาสทั้งสามในตัวอย่างที่แล้วให้ผลลัพธ์เดียวกัน คำจำกัดความของสิ่งที่เรียกว่า "พูดน้อย" จะมีขนาดกะทัดรัดกว่าและน้อยกว่าของสิ่งที่เรียกว่า "พูดน้อย" ซึ่งมากกว่าการเพิ่มความชัดเจนในการอ่าน เป็นรูปแบบปกติ ใช้เพื่อแก้ไขบางส่วนที่เป็นรูปธรรมของคุณสมบัติการนำค่าอื่น ๆ มาใช้ซ้ำโดยการสืบทอด (จัดทำโดยคอนเทนเนอร์หรือจัดทำโดยคลาสใดคลาสหนึ่งที่กำหนดให้กับองค์ประกอบ) ถ้าโหลดที่กำหนดบนเซิร์ฟเวอร์โดยข้อความพิเศษของวิธีการกำหนดคุณสมบัตินี้และสถานการณ์อื่น ๆ ที่ทำให้โค้ดอ่านง่ายขึ้น เช่น ความคิดเห็น เพิ่มขนาดและปริมาณการรับส่งข้อมูล มีความเกี่ยวข้อง มันจะเป็นไปได้ที่จะ ประมวลผล (ตัวอย่าง) จาก PHP ซึ่งเป็นส่วนหนึ่งของกลยุทธ์การสร้างโค้ดจากภาษานี้
ขนาดของแบบจำลองกล่องส่งผลต่อองค์ประกอบเป็นหลัก <div> แต่เป็นไปได้ที่จะบังคับพฤติกรรมนี้กับองค์ประกอบอื่นด้วยคุณสมบัติ display และมูลค่า block. หากต้องการให้องค์ประกอบไหลเหมือนข้อความในบรรทัด ให้ใช้ display:inline; และสามารถผสมผสานทั้งพฤติกรรม การวัด และการไหลเข้าด้วยกันได้ display:inline-block;
ความคุ้มค่า none ในทรัพย์สิน display, ใช้เป็น display:none;ยังช่วยให้คุณสามารถซ่อนวัตถุซึ่งจะทำหน้าที่ "เปิด" และ "ปิด" วัตถุเหล่านั้น JavaScript.
หากไม่ได้ระบุขนาดขององค์ประกอบ จะใช้มิติข้อมูลใดก็ตามที่จำเป็นเพื่อให้เนื้อหาพอดี (จริงๆ แล้วคือทำให้เนื้อหาพอดีโดยไม่จำเป็นต้องสร้างมิติ) แต่หากมีการระบุขนาดอาจเกิดขึ้นได้ว่าวัตถุที่มีอยู่ไม่พอดี ในกรณีเช่นนี้ ขนาดจะไม่ถูกคำนึงถึง แต่จะเพิ่มขึ้นเพื่อให้เนื้อหาทั้งหมดมองเห็นได้
เพื่อให้องค์ประกอบที่มีอยู่ในการวัดคงที่อื่นถูกครอบตัดเมื่อเกินขนาด จึงมีการใช้คุณสมบัติ overflow ด้วยค่า hidden. ด้วยคุณค่า scrollวัตถุที่ล้นภาชนะก็ถูกตัดออกตามที่เกิดขึ้นด้วย hidden แต่มีแถบเลื่อนปรากฏขึ้นให้เห็นได้เมื่อเคลื่อนย้าย มูลค่า auto ทำให้แถบเลื่อนปรากฏเฉพาะเมื่อจำเป็นเท่านั้น โดยขึ้นอยู่กับขนาดของเนื้อหา
คุณยังสามารถกำหนดขนาดขั้นต่ำเพื่อให้คอนเทนเนอร์ใช้พื้นที่นั้นแม้ว่าเนื้อหาจะไม่ต้องการก็ตาม และไม่จำกัดขนาดเพื่อเพิ่มเมื่อเนื้อหาต้องการ คุณสมบัติที่รับผิดชอบงานนี้ได้แก่ min-width สำหรับอาการปวดเมื่อยและ min-height สำหรับคนตัวสูง ในความหมายตรงกันข้าม max-width กำหนดความกว้างสูงสุดและ max-height ความสูงสูงสุดที่ตัดกัน width แล้ว height.
การไหลขององค์ประกอบบนหน้าเว็บ
สี่เหลี่ยม (บล็อก) ที่เรากำหนดไว้ด้วยองค์ประกอบ <div>โดยค่าเริ่มต้นจะวางไว้ข้างหนึ่งไว้ข้างใต้ หากต้องการเปลี่ยนลักษณะการทำงานนี้ คุณสามารถใช้คุณสมบัติได้ float, ระบุ left o right เป็นค่าเพื่อให้ไหลจากซ้ายไปขวาหรือจากขวาไปซ้ายตามลำดับ ในทางตรงกันข้าม เพื่อป้องกันไม่ให้วัตถุหนึ่ง "ลอย" ไปทางขวาหรือซ้ายของอีกวัตถุหนึ่ง คุณสามารถใช้คุณสมบัตินั้นได้ clear ด้วยค่า left, right o bothซึ่งแทนที่โฟลว์จากซ้ายไปขวา ขวาไปซ้าย หรือทั้งสองอย่าง
ตรงกันข้ามกับสิ่งที่เกิดขึ้นในสถานการณ์อื่น กระแสที่เกิดขึ้น float จะไม่ปรับเปลี่ยนขนาดของคอนเทนเนอร์โดยอัตโนมัติ ดังนั้นจึงมีประโยชน์ที่จะรวมไว้ในคุณสมบัติของคอนเทนเนอร์ overflow:auto; เพื่อบังคับให้ขนาด (ความสูง) ของคอนเทนเนอร์เปลี่ยนเมื่อวัตถุล้นเนื่องจากตำแหน่งของมันด้วย float.
อีกวิธีหนึ่งในการกำหนดค่าการไหลของเนื้อหาขององค์ประกอบคือการแบ่งองค์ประกอบออกเป็นคอลัมน์พร้อมกับคุณสมบัติ column-count (ซึ่งควรจะประกอบไปในขณะนั้นด้วย. -webkit-column-count y de -moz-column-count) สามารถระบุขนาดของคอลัมน์ได้ (แนะนำจริง) ด้วย column-width (-webkit-column-width -moz-column-width) และการแยกระหว่างคอลัมน์ด้วย column-gap (-webkit-column-gap -moz-column-gap)
เพื่อไม่ให้แบ่งบล็อกและเนื้อหาถูกกระจายไปยังหลายคอลัมน์คุณสามารถใช้ display:inline-block; แม้ว่านั่นจะหมายความถึงอย่างแน่นอน ปล่อยให้ส่วนหนึ่งของคอลัมน์ไม่ได้ใช้
การวางตำแหน่ง
ในการสร้างตำแหน่งขององค์ประกอบบนหน้าเว็บ CSS จะใช้โหมดการวางตำแหน่งหลายโหมดซึ่งอาจแตกต่างกันไปในแต่ละองค์ประกอบ กล่าวคือ คุณสามารถผสมเกณฑ์การวางตำแหน่งที่แตกต่างกันบนเว็บไซต์เดียวกันได้
-
position:static;(ไม่จำเป็นต้องระบุหากไม่เคยแก้ไขมาก่อน) การวางตำแหน่งประเภทนี้เป็นไปตามโฟลว์ "ธรรมชาติ" ของหน้า: องค์ประกอบหนึ่งแล้วอีกองค์ประกอบหนึ่งเริ่มจากด้านซ้าย เติบโต ตราบใดที่ มีพื้นที่ทั้งทางขวาและจากบนลงล่าง ไม่ใช้พิกัดแนวนอนหรือแนวตั้งเพื่อกำหนดตำแหน่งของมัน แต่จะเป็นไปตามตำแหน่งที่สอดคล้องกับลำดับของวัตถุ -
position:fixed;ใช้เพื่อวางวัตถุในตำแหน่งคงที่ในหน้าต่างเบราว์เซอร์ (เช่น เมนู เป็นต้น) ตำแหน่งขององค์ประกอบจะถูกระบุในแนวนอนด้วยleftorightเพื่อกำหนดระยะห่างทางซ้ายหรือขวาตามลำดับและด้วยtopobottomเพื่อแยกด้านบนหรือด้านล่างขอบหน้าต่างเบราว์เซอร์ (วิวพอร์ต)การใช้การวางตำแหน่งนี้และประเภทอื่นๆ วัตถุสามารถทับซ้อนกันได้ วัตถุที่วาดก่อน (กำหนดไว้ก่อนหน้าในโค้ด HTML) สามารถครอบคลุมได้โดยสิ่งที่วาดในภายหลัง (ซึ่งรวมอยู่ในโค้ดในภายหลัง HTML). หากต้องการเปลี่ยนแปลงลำดับปกติคุณสามารถใช้คุณสมบัติได้
z-indexวัตถุที่มีค่าสูงสุดในz-indexครอบคลุมผู้ที่มีมูลค่าน้อยกว่า -
position:relative;ย้ายองค์ประกอบจากตำแหน่ง "ปกติ" ตามที่ระบุโดยคุณสมบัติleftorightแนวนอนและtopobottomในแนวตั้ง -
position:absolute;วางองค์ประกอบในตำแหน่งคงที่โดยคำนึงถึงวัตถุที่มีอยู่ ตำแหน่งของมันถูกแสดงเช่นเดียวกับในกรณีก่อนหน้าด้วยleft,right,topybottomชื่อของการวางตำแหน่งประเภทนี้ทำให้เกิดความสับสนในตอนแรก เนื่องจากตำแหน่งนั้นถูกสร้างขึ้นโดยคำนึงถึงวัตถุในลำดับชั้นที่เหนือกว่าวัตถุที่ใช้คุณสมบัติ ซึ่งเป็นที่ถกเถียงกันว่าเป็นตำแหน่งที่แน่นอนหรือไม่
สิ่งสำคัญคือต้องจำไว้ว่าองค์ประกอบที่มีวัตถุอยู่
<div>ที่เราใช้ในระดับลำดับชั้นแรกคือ<body>ดังนั้นหาก<div>คุณใช้อะไรposition:absolute;ไม่มีอยู่ในที่อื่น การวางตำแหน่งจะเป็น "สัมบูรณ์" เมื่อเทียบกับหน้าเว็บ
คุณสมบัติสำหรับสื่อและคุณลักษณะเฉพาะ (คิวรีสื่อ)
CSS ช่วยให้คุณสามารถกำหนดลักษณะที่ปรากฏที่แตกต่างกันสำหรับสื่อหรือการสนับสนุนต่างๆ ในสไตล์ชีตเดียวกัน โดยขึ้นอยู่กับประเภทของอุปกรณ์ที่ใช้ (เช่น หน้าจอ หรือเครื่องพิมพ์) ขนาด การวางแนว (แนวตั้งหรือแนวนอน) หรือความละเอียด สิ่งนี้ทำหน้าที่เพื่อให้สามารถแสดงหน้าเว็บเดียวกันในวิธีที่เหมาะสมที่สุดสำหรับบริบท
หากต้องการอ้างถึงสื่อให้ใช้ @media ในลักษณะเดียวกับสิ่งที่ได้อธิบายไว้แล้วสำหรับแบบอักษรด้วย @font-faceล้อมรอบด้วยเครื่องหมายปีกกา ({ y }) คำจำกัดความขององค์ประกอบต่างๆ: ป้ายกำกับ HTML, คลาส, ตัวระบุ...
ประเภทของสื่อที่มีอยู่ใน CSS3 เสียง: allเพื่ออ้างถึงสื่อใด ๆ (ทั้งหมด) screen สำหรับหน้าจอทุกประเภท (เวอร์ชันเก่าของ CSS แยกระหว่างจอทีวีกับจอคอมพิวเตอร์) print สำหรับเอาต์พุตเครื่องพิมพ์และ speech สำหรับโปรแกรมอ่านเว็บเสียงที่ตีความข้อมูลด้วยเครื่องสังเคราะห์เสียง
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@media screen
{
.texto
{
color:#FFFFFF;
background-color:#000000;
}
}
@media print
{
.texto
{
color:#000000;
background-color:#FFFFFF;
}
}
|
ในตัวอย่างด้านบน องค์ประกอบของคลาสข้อความมีพื้นหลังสีดำและข้อความสีขาวบนหน้าจอ แต่จะพิมพ์ด้วยพื้นหลังสีขาวและข้อความสีดำ
สามารถกำหนดเงื่อนไขบนสื่อเพื่อกำหนดชุดคุณสมบัติต่างๆ ได้ เช่น ความละเอียดหรืออัตราส่วนวิวพอร์ตที่มีอยู่ เงื่อนไขและวิธีการเหล่านี้สามารถประกอบขึ้นได้ด้วยการดำเนินการเชิงตรรกะ and, not y only เพื่อเรียกร้องให้คุณปฏิบัติตามหลายข้อ คุณไม่ปฏิบัติตามหรือเฉพาะเมื่อคุณปฏิบัติตามเท่านั้น ตามลำดับ
ท่ามกลางเงื่อนไขที่มีอยู่ เราพบว่ามันน่าสนใจเป็นพิเศษ max-width (ความกว้างหน้าต่างสูงสุด) max-height (ความสูงหน้าต่างสูงสุด) min-width (ความกว้างหน้าต่างขั้นต่ำ) min-height (ความสูงหน้าต่างขั้นต่ำ) orientation (การวางแนวซึ่งสามารถเป็นได้ landscape, ทิวทัศน์ หรือ portrait, แนวตั้ง), max-resolution (ความละเอียดสูงสุดใน dpi, จุดต่อนิ้ว หรือนิ้ว dpcm, จุดต่อเซนติเมตร) และ min-resolution (ความละเอียดขั้นต่ำก็เช่นกัน dpi o dpcm).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
@media all
{
.bloque_principal
{
background-color:#CCCCCC;
}
}
@media screen and (min-width:320px)
{
.bloque_principal
{
width:300px;
margin-left:auto;
margin-rigth:auto;
}
}
@media screen and (min-width:640px)
{
.bloque_principal
{
width:620px;
}
}
@media print
{
.bloque_principal
{
background-color:#FFFFFF;
}
}
|
ในตัวอย่างก่อนหน้านี้ เราเริ่มต้นด้วยการกำหนดสีพื้นหลังเพื่อให้องค์ประกอบของคลาส main_block มีสีพื้นหลังเป็น #CCCCCC ในสื่อทั้งหมด เมื่อแสดงบนหน้าจอและหน้าต่างมีความกว้างอย่างน้อย 320 พิกเซล ระยะขอบซ้ายและขวาจะเป็นอัตโนมัติ (จัดกึ่งกลางบล็อก) และความกว้างขององค์ประกอบจะเป็น 300 พิกเซล หากความละเอียดหน้าจอเป็น 640 พิกเซล ความกว้างของบล็อกจะเป็น 620 พิกเซล เนื่องจากคำจำกัดความของสื่อที่สองไม่รวมข้อมูลระยะขอบ และอุปกรณ์ที่ตรงตามเงื่อนไขที่สองจะตรงตามเงื่อนไขแรกด้วย ขอบแนวนอนจะยังคงเป็นไปโดยอัตโนมัติ
สุดท้ายนี้ ในตัวอย่าง สีพื้นหลังจะเปลี่ยนไปเพื่อให้งานพิมพ์กลายเป็นสีขาว
วิธีปกติในการกำหนดสไตล์สำหรับสื่อต่างๆ มักจะเริ่มต้นด้วยรูปแบบทั่วไป ซึ่งได้แก่ สีและแบบอักษร ตามด้วยรูปทรงที่มีข้อจำกัดมากที่สุด (การวัดอุปกรณ์ที่มีจำนวนพิกเซลน้อยที่สุด) โดยปกติสำหรับสมาร์ทโฟนและแท็บเล็ต ซึ่งนอกเหนือจากนั้น สิ่งสำคัญคือต้องทราบว่ามีการใช้งานในแนวตั้งหรือแนวนอนด้วย orientation และแน่นอนว่ายังมีปณิธานด้วย min-resolution. จากนั้นจะมีการระบุขนาดต่างๆ สำหรับหน้าจอที่ใหญ่ขึ้น และมักจะลงท้ายด้วยการพิมพ์และสื่อเสียง ซึ่งในตัวอย่างของกราฟิก IoT จะถูกละไว้
ใช้ @media การกำหนดเงื่อนไข เช่น ขนาด ความละเอียด และการวางแนวทำให้นักออกแบบสามารถสร้างหน้าเว็บเดียวที่ดูเหมาะสมที่สุดสำหรับแต่ละอุปกรณ์ด้วยสไตล์ที่แตกต่างกัน ลักษณะการทำงานนี้มักเรียกว่าการออกแบบที่ตอบสนอง การออกแบบที่ปรับเปลี่ยนได้ พร้อมการแปลที่ฟรีมาก
CSS สำหรับคอนเทนเนอร์กราฟิก SVG
จากสิ่งที่ได้อธิบายไปแล้ว ตอนนี้สามารถกำหนดสไตล์ได้แล้ว คอนเทนเนอร์ HTML กราฟิก SVG โดยเพื่อแสดงสถานะของเซ็นเซอร์ที่เชื่อมต่อกับ IoT ในโค้ดต่อไปนี้เป็นข้อเสนอซึ่งรวมถึงการแสดงความคิดเห็น การกระจายในคอลัมน์ที่สอดคล้องกับจำนวนกราฟที่มากกว่ากราฟที่ข้อเสนอของชุดบทความใช้ เพื่อให้สามารถนำกลับมาใช้ใหม่ในกรณีอื่นได้
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
|
@font-face /* Descripción del tipo de letra ancho */
{
font-family:“SircuitoExpandedLight”;/* Nombre de la tipografía */
/* Documentos con la tipografía en los formatos disponibles */
src: url(‘tipos/Sircuito-Expanded-Light.eot’);
src: url(‘tipos/Sircuito-Expanded-Light.eot?iefix’) format(‘eot’),
url(‘tipos/Sircuito-Expanded-Light.woff’) format(‘woff’),
url(‘tipos/Sircuito-Expanded-Light.ttf’) format(‘truetype’),
url(‘tipos/Sircuito-Expanded-Light.svg#webfont’) format(‘svg’);
/* Forzar alisado de la tipografía (Normalmente por defecto) */
-webkit-font-smoothing:antialiased;
}
@font-face /* Descripción del tipo de letra normal */
{
font-family:“SircuitoRegularLight”; /* Nombre de la tipografía */
/* Documentos con la tipografía en los formatos disponibles */
src: url(‘tipos/Sircuito-Regular-Light.eot’);
src: url(‘tipos/Sircuito-Regular-Light.eot?iefix’) format(‘eot’),
url(‘tipos/Sircuito-Regular-Light.woff’) format(‘woff’),
url(‘tipos/Sircuito-Regular-Light.ttf’) format(‘truetype’),
url(‘tipos/Sircuito-Regular-Light.svg#webfont’) format(‘svg’);
/* Forzar alisado de la tipografía (Normalmente por defecto) */
-webkit-font-smoothing:antialiased;
}
@font-face /* Descripción del tipo de letra comprimido */
{
font-family:“SircuitoCondensedLight”; /* Nombre de la tipografía */
/* Documentos con la tipografía en los formatos disponibles */
src: url(‘tipos/Sircuito-Condensed-Light.eot’);
src: url(‘tipos/Sircuito-Condensed-Light.eot?iefix’) format(‘eot’),
url(‘tipos/Sircuito-Condensed-Light.woff’) format(‘woff’),
url(‘tipos/Sircuito-Condensed-Light.ttf’) format(‘truetype’),
url(‘tipos/Sircuito-Condensed-Light.svg#webfont’) format(‘svg’);
/* Forzar alisado de la tipografía (Normalmente por defecto) */
-webkit-font-smoothing:antialiased;
}
@font-face /* Descripción del tipo de letra normal de grosor normal */
{
font-family:“SircuitoRegularMedium”; /* Nombre de la tipografía */
/* Documentos con la tipografía en los formatos disponibles */
src: url(‘tipos/Sircuito-Regular-Medium.eot’);
src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),
url(‘tipos/Sircuito-Regular-Medium.woff’) format(‘woff’),
url(‘tipos/Sircuito-Regular-Medium.ttf’) format(‘truetype’),
url(‘tipos/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);
/* Forzar alisado de la tipografía (Normalmente por defecto) */
-webkit-font-smoothing:antialiased;
}
@media all
{
body
{
font-family:“SircuitoCondensedLight”;
margin:0px;
column-count:1;
-webkit-column-count:1; /* Viejos Chrome, Opera y Safari */
-moz-column-count:1; /* Viejos Firefox */
column-gap:8px;
-webkit-column-gap:8px;
-moz-column-gap:8px;
background-color:#FFFFFF;
}
.bloque_sensor, .bloque_titulo, .bloque_descripcion, .bloque_fecha, .bloque_grafico
{
display:inline-block;
box-sizing:border-box;
width:100%;
color:#205587;
}
.bloque_sensor
{
min-width:320px;
height:100%;
background-color:#EDEDED;
}
.bloque_titulo
{
padding:16px 16px 0px 20px;
font-size:25px;
}
.bloque_descripcion
{
padding:2px 16px 0px 20px;
font-size:15px;
}
.bloque_fecha
{
padding:2px 16px 8px 20px;
font-size:17px;
}
.bloque_grafico
{
height:200px;
padding:4px 20px 20px 20px;
}
.grafico
{
background-color:#A8C3EA;
}
}
@media (min-width:360px)
{
body
{
margin:8px 8px 0px 8px;
}
.bloque_sensor
{
margin:0px 0px 8px 0px;
background-color:#E9E9E9;
}
}
@media (min-width:460px)
{
body
{
font-family:“SircuitoRegularLight”;
}
}
@media (min-width:530px)
{
body
{
font-family:“SircuitoExpandedLight”;
}
}
@media (min-width:690px)
{
body
{
font-family:“SircuitoCondensedLight”;
column-count:2;
-webkit-column-count:2; /* Viejos Chrome, Opera y Safari */
-moz-column-count:2; /* Viejos Firefox */
}
}
@media (min-width:870px)
{
body
{
font-family:“SircuitoRegularLight”;
}
}
@media (min-width:1010px)
{
body
{
font-family:“SircuitoExpandedLight”;
}
}
/*
@media (min-width:1020px)
{
body
{
font-family:”SircuitoCondensedLight”;
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
}
}
@media (min-width:1280px)
{
body
{
font-family:”SircuitoRegularLight”;
}
}
@media (min-width:1570px)
{
body
{
font-family:”SircuitoExpandedLight”;
}
}
*/
@media (min-width:1610px)
{
body
{
font-family:“SircuitoCondensedLight”;
column-count:4;
-webkit-column-count:4; /* Viejos Chrome, Opera y Safari */
-moz-column-count:4; /* Viejos Firefox */
}
}
@media (min-width:1710px)
{
body
{
font-family:“SircuitoRegularLight”;
}
}
@media (min-width:2010px)
{
body
{
font-family:“SircuitoExpandedLight”;
}
}
/*
@media (min-width:2200px)
{
body
{
font-family:”SircuitoRegularLight”;
column-count:5;
-webkit-column-count:5;
-moz-column-count:5;
}
}
@media (min-width:2520px)
{
body
{
font-family:”SircuitoExpandedLight”;
}
}
*/
|
ด้านล่างนี้คุณจะเห็นว่าสไตล์เหล่านี้จะเป็นอย่างไร โค้ด HTML จากคอนเทนเนอร์ที่นำเสนอสำหรับกราฟิก SVG จากบทความที่แล้ว
บทความถัดไปในชุดนี้จะอธิบาย วิธีการวาดด้วย SVG กราฟข้อมูลสถานะของเซ็นเซอร์ที่เชื่อมต่อกับ Internet of Things (IoT).
แสดงความคิดเห็น