การแสดงไอที

อีก Tut ฉบับย่อ ที่นี่สิ่งที่ง่ายและใช้พลังงานที่ดีของ CSS คือ ... แต่ก็ยากที่ concieve (และมันก็คือไม่ฉัน) จะเริ่มต้นด้วย เพิ่ม Dropshadow อาจจะมีชิ้นส่วนของเค้กสำหรับส่วนมากของเราโดยใช้เครื่องมือในการแก้ไขภาพเช่น Photoshop ฯลฯ ANF ดอกไม้ไฟบาง
เหตุผลที่ผมเลือกใช้สำหรับเงาโดยใช้ CSS ก็คือมักจะสร้างในขณะที่การออกแบบหน้า / html ของแอพลิเคชันที่ต้องการให้ซ้ำ สิ่งที่ฉันหมายถึงคือในเว็บไซต์ที่มีอยู่กับภาพจำนวนมากเช่นคนแสดง freinds หรือรายการแกลเลอรี่ภาพก็จะเป็นเรื่องยากที่จะประมวลผลความเร็วในการโหลดทั้งหมดของภาพที่ได้รับการยกเลิกการโหลดอยู่แล้วเพื่อเพิ่มหรือลบเงาเพื่อที่ เรื่อง
ดังนั้นถ้าคุณได้ทำคิดไปข้างหน้าเล็กน้อยในขณะที่สร้าง HTM​​LS เพื่อเพิ่มหน่วยงานเสริมเหล่านี้หรือมักสถานการณ์ที่ว่าคุณมีลอจิกวนการสร้างไอคอนเหล่านี้ / รูปใน XSL, PHP JAVA หรือภาษาเขียนโปรแกรม / สคริปต์อื่น ๆ คุณสามารถเพิ่มได้ตลอดเวลาจากนั้นเป็นเพียงเรื่องของการแสดงและการซ่อนเงาเหล่านี้โดยใช้สถานที่ให้บริการการแสดงผล CSS, เป็นต่อลูกค้าที่เคยเปลี่ยนแปลงความต้องการของ ... ฉัน havn't กระทำการเรียงลำดับของหัวก้าวหน้านี้ ก่อนหน้านี้ ... แต่ ahev เริ่มต้นตอนนี้!

ในตัวอย่างด้านล่าง, ภาพต้นฉบับที่เป็นเงาฟรีและ dropshadows ถูกนำมาใช้ต้องเป็น! นอกจากนี้ผมได้ไปน้อยพิเศษโดยใช้เทคนิคของ Tut ก่อนหน้านี้ของฉัน (Well! เหล่านี้อาจจะเป็นความหลากหลายที่สั้นที่สุดของงานจึงเป็นธรรมเท่านั้นเรียกพวกเขา "Tut" 's) เกี่ยวกับ การใช้สถานที่ให้บริการคลิป CSS สำหรับแสดงปิดเท่านั้น

ภาพต้นฉบับ

ผลการค้นหา CSS DropShadow

ดูการสาธิต | ดาวน์โหลด sourcefiles

ใส่ stylesheets ที่ยอดนิยม

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

มันเป็นความจริงเอกสารที่เพื่อเสริมสร้างประสบการณ์การใช้งานโดยรวมเป็นสิ่งสำคัญเพื่อให้ตัวชี้วัดความคืบหน้าและการตอบภาพ เพื่อหลีกเลี่ยงการวาดองค์ประกอบของหน้าในกรณีที่หากมีการเปลี่ยนแปลงรูปแบบของพวกเขาเบราว์เซอร์บางอย่างรวมทั้ง IE, การแสดงผลของหน้าบล็อกจนกว่า CSS เป็นแปล้ ด้วยเหตุนี้ผู้ใช้จะได้รับการเห็น หน้าว่างเปล่าสีขาว

W3 จำเพาะ HTML 'ยังระบุว่า CSS ฉันจะต้องมีในส่วนหัวของหน้า HTML at the bottom of the page, so it's best not to use it. นอกจากนี้ยังทราบว่าใน IE @import พฤติกรรมเดียวกับการใช้ <link> ที่ด้านล่างของหน้าดังนั้นจึงเป็นเรื่องที่ดีที่สุดที่จะไม่ใช้มัน

หลีกเลี่ยงการใช้คุณลักษณะเฉพาะเบราว์เซอร์

กรอง: การใช้ตัวกรอง เพิ่มการบริโภคหน่วยความจำและถูกนำไปใช้ต่อองค์ประกอบที่ไม่ต่อภาพเพื่อให้ปัญหาได้รับการคูณ นอกจากนี้กรองเป็นกรรมสิทธิ์ของ IE จึงจะไม่ทำงานตามที่ตั้งใจไว้ในเบราว์เซอร์อื่น ๆ ถ้าคุณต้องการให้พื้นหลังโปร่งใสหรือการไล่ระดับสีใช้ 1Pixel ด้วยภาพ
นิพจน์: นิพจน์ CSS มีคุณลักษณะที่ดีที่จะมีใน CSS แต่ยังคงเป็นคุณลักษณะเฉพาะของ IE นอกจากนี้ก็เป็นสิ่งสำคัญที่จะทราบว่าการแสดงออกเหล่านี้ ประเมินเมื่อเพจที่มีการแสดงผลและปรับขนาดเลื่อนและแม้เมื่อผู้ใช้เลื่อนเมาส์มากกว่าหน้า จำเป็นที่จะกล่าวนี้อาจส่งผลกระทบต่อประสิทธิภาพการทำงานของหน้าเว็บของคุณ ดังนั้นในคำง่ายหลีกเลี่ยงการใช้สำนวน CSS, จนกว่าคุณจะรู้สึกข้อดีของมันจะมีน้ำหนักมากกว่าข้อเสียของ '

Externalise คุณ CSS

การใช้ CSS ภายนอกจะมีผลในการโหลดได้เร็วขึ้นจาก เพราะหน้าเว็บ JavaScript และ CSS ไฟล์ที่เก็บไว้โดยเบราว์เซอร์ Inline CSS ในเอกสาร HTML ได้รับการดาวน์โหลดเวลาเอกสาร HTML มีการร้องขอทุก นี้ที่จริงอาจจะลดจำนวนการร้องขอ HTTP ทำ แต่มันก็เพิ่มขนาดของเอกสาร HTML CSS ภายนอกจะเก็บไว้โดยเบราว์เซอร์; ขนาดของเอกสาร HTML จะลดลงได้โดยไม่ต้องเพิ่มจำนวนของการร้องขอ HTTP

โปรดทราบว่าหากผู้ใช้บนเว็บไซต์ของคุณมีมุมมองที่หน้าหลายต่อหลายเซสชั่นและหน้าเว็บของคุณกลับมาใช้สคริปเดียวกันและ stylesheets มีผลประโยชน์ที่อาจเกิดขึ้นได้มากขึ้นจากไฟล์ภายนอกแคช

แพ็คไฟล์ CSS ของคุณ

บรรจุหรือกระทืบ CSS ของคุณคือการปฏิบัติของการลบอักขระที่ไม่จำเป็นออกจากรหัสเพื่อลดขนาดของมันจึงช่วยเพิ่มเวลาในการโหลด

ฉันสามารถ CSS crunched โดยการลบความคิดเห็นทั้งหมดและอักขระที่ไม่พึงประสงค์เช่นช่องว่างสีขาว, newlines ฯลฯ

ตั้งค่าใหม่เป็น CSS / คำ CSS เพื่อกำหนดจำนวนของรูปแบบองค์ประกอบในการพื้นฐานเฉพาะที่สร้างความสอดคล้องกันระหว่างเบราว์เซอร์ต่างๆ

เราทุกคนได้รับการผ่านฝันร้ายของการเขียนข้ามเบราว์เซอร์ของ CSS ดังนั้นเมื่อเราเริ่มต้นการเขียน CSS ของเราก็ปฏิบัติเพื่อตั้งค่าใหม่ได้ก่อนที่จะลบ / ตั้งค่าเบราว์เซอร์ใด ๆ ที่ไม่สอดคล้องกันข้ามคือ CSS รีเซ็ตมีไม่กี่บรรทัดที่เรียบง่ายของ CSS ที่คุณจะเริ่มต้นกับ CSS ของคุณเพื่อให้คุณมีฐานที่สะอาดเพื่อเริ่มต้นสร้างของคุณเมื่อ

ตั้งค่า CSS ที่ฉันปกติมักจะใช้ลักษณะเช่นนี้

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

UL, ol {
รูปแบบรายการ: ไม่มี;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-น้ำหนัก: ปกติ;
}

รีเซ็ตขนาดตัวอักษรเบราว์เซอร์
นอกจากนี้ยังทราบว่าการตั้งค่าใหม่ได้นำไปใช้ขนาดตัวอักษรเบราว์เซอร์ในบรรทัดต่อไปนี้ ...

html {font-size: 76%;}

ข้างต้น CSS ตั้งขนาดตัวอักษรเบราว์เซอร์ถึง 10 พิกเซลและสิ่งนี้ทำให้มันเป็นไปได้ที่จะทำงานกับขนาดตัวอักษรญาติ (ซึ่งเป็นทุกที่สำคัญจากการปฏิบัติตาม WAI prespective)
สำหรับเช่นในความหมายดังต่อไปนี้ font-size ในช่วงตั้ง 10 พิกเซลและว่าใน paragarph ถูกตั้งค่าเป็น 14 พิกเซล ...

span {font-size: 1em;}
p {font-size: 1.4em;}

เช่น
การระบุคุณสมบัติ CSS เช่นนี้

margin: 5px 0;

ที่จริงหมายถึง

margin: 0px 5px 5px 0px;

สถานที่ให้บริการมาร์จินที่แรกหมายถึง:

ขอบด้านบนและด้านล่าง = 5px | | ขอบด้านซ้ายและขวา 0px =

ดังนั้น 'ชวเลขได้อีกต่อไป' จะเป็น

margin: 0px 5px 5px 0px; (T, R, B, L)

คุณยังสามารถใช้ 3 ค่า

margin: 5px 0 5px;

ซึ่งหมายความว่า

ชั้น = 5px | | ขวาและซ้าย = 0px | | ด้านล่าง 5px =

Internet Explorer จะเพิ่มช่องว่างภายในที่ปุ่มในรูปแบบ HTML
พื้นที่ว่างตรงนี้ทอดยาวตามความยาวของข้อความของปุ่ม

การแก้ปัญหาคือเพิ่ม overflow รูปแบบของ .... เช่น

ปุ่ม. {
overflow: มองเห็นได้;
padding ซ้าย: 10px สำคัญ;
padding ขวา: 10px สำคัญ;
ใด ๆ ... สไตล์อื่น ๆ สำหรับปุ่มนี้ ...
}

หรือ

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;