คำถามติดแท็ก css

อะไรคือความแตกต่างระหว่างscreenและonly screenในการสืบค้นสื่อ? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> ทำไมเราต้องใช้only screen? ไม่screenตัวเองไม่ได้ให้ข้อมูลเพียงพอที่จะแสดงผลเฉพาะสำหรับหน้าจอ? ฉันเคยเห็นเว็บไซต์ตอบสนองจำนวนมากใช้วิธีใดวิธีหนึ่งในสามวิธีต่อไปนี้: @media screen and (max-width:632px) @media (max-width:632px) @media only screen and (max-width:632px)

487 css  media-queries 

เมื่อกำหนดบางอย่างเช่น URL ภาพพื้นหลังในไฟล์ CSS เมื่อใช้ URL ที่สัมพันธ์กันมันจะสัมพันธ์กับที่ไหน? ตัวอย่างเช่น: สมมติว่าไฟล์/stylesheets/base-styles.cssมี: div#header { background-image: url('images/header-background.jpg'); } หากฉันรวมสไตล์ชีทนี้ไว้ในเอกสารที่แตกต่างกันผ่านทาง<link ... />URL ที่เกี่ยวข้องในไฟล์ CSS จะสัมพันธ์กับเอกสารสไตล์ชีทใน/stylesheets/หรือสัมพันธ์กับเอกสารปัจจุบันที่รวมอยู่ด้วยหรือไม่ เส้นทางที่เป็นไปได้เช่น: /item/details.html /about/index.html /about/extra/other.html /index.html

484 html  css 

วิธีการเพิ่มระยะขอบด้านบนให้กับclass="row"องค์ประกอบโดยใช้กรอบ bootstrap twitter?

483 css  twitter-bootstrap 

ฉันแน่ใจว่าสิ่งนี้จะต้องถูกกล่าวถึง / ถามก่อน แต่ได้ค้นหาอายุที่ไม่มีโชคคำศัพท์ของฉันต้องผิด! ฉันจำทวีตที่ฉันเห็นเมื่อไม่นานมานี้ซึ่งแนะนำว่ามีกฎ CSS ที่จะลบสไตล์ใด ๆ ที่กำหนดไว้ก่อนหน้านี้ในสไตล์ชีทสำหรับองค์ประกอบเฉพาะ ตัวอย่างการใช้งานที่ดีอาจอยู่ในไซต์ RWD แรกของมือถือที่มีการกำหนดสไตล์ส่วนใหญ่สำหรับองค์ประกอบเฉพาะในมุมมองหน้าจอขนาดเล็กซึ่งจำเป็นต้อง 'รีเซ็ต' หรือลบองค์ประกอบเดียวกันในมุมมองเดสก์ทอป กฎ CSS ที่สามารถบรรลุสิ่งที่ต้องการ: .element { all: none; } ตัวอย่างการใช้งาน: /* mobile first */ .element { margin: 0 10; transform: translate3d(0, 0, 0); z-index: 50; display: block; etc.. etc.. } @media only screen and (min-width: 980px) { …

481 css 

ฉันกำลังพยายามสร้างคลาส CSS ที่ใช้งานได้อีกครั้งเพื่อความสอดคล้องและมีความยุ่งเหยิงน้อยลงในเว็บไซต์ของฉัน ฉันมีคอนเทนเนอร์<div>ที่ฉันไม่ต้องการตั้งค่าความสูงสำหรับ (เพราะมันจะแตกต่างกันไปขึ้นอยู่กับว่ามันอยู่ที่ไหนในเว็บไซต์) และภายในมันเป็นส่วนหัว<div>และจากนั้นเป็นรายการที่ไม่เรียงลำดับทั้งหมดที่ใช้ CSS กับ พวกเขา มันดูเหมือนเป็นอย่างมาก: ฉันต้องการรายการที่ไม่ได้เรียงลำดับเพื่อใช้ห้องที่เหลือในภาชนะ<div>โดยรู้ว่าส่วนหัว<div>นั้น18pxสูง ฉันไม่ทราบวิธีระบุความสูงของรายการเป็น "ผลลัพธ์ของ100%ลบ18px" ฉันเคยเห็นคำถามนี้ถามในบริบทอื่น ๆ อีกสองสามรายการใน SO แต่ฉันคิดว่ามันจะคุ้มค่าที่จะถามอีกครั้งสำหรับกรณีเฉพาะของฉัน ใครบ้างมีคำแนะนำในสถานการณ์นี้

479 css  height  pixel 

ฉันดูที่แหล่งที่มาของ userscript greasemonkey และสังเกตเห็นสิ่งต่อไปนี้ใน CSS: .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} ฉันสามารถชื่นชมได้ว่าสคริปต์ greasemonkey ต้องการรวมสิ่งที่สามารถทำได้ภายในแหล่งที่มาแทนที่จะเป็นโฮสต์บนเซิร์ฟเวอร์นั่นชัดเจนเพียงพอ แต่ก่อนหน้านี้ฉันไม่เคยเห็นเทคนิคนี้เลยฉันจึงพิจารณาการใช้งานและดูเหมือนว่าจะมีเหตุผลหลายประการ: มันจะลดปริมาณของคำขอ HTTP ในการโหลดหน้าซึ่งจะช่วยเพิ่มประสิทธิภาพ หากไม่มี CDN ก็จะลดปริมาณการรับส่งข้อมูลที่สร้างขึ้นจากคุกกี้ที่ถูกส่งไปพร้อมกับรูปภาพ ไฟล์ CSS สามารถแคชได้ ไฟล์ CSS สามารถเป็น GZIPPED เมื่อพิจารณาว่า IE6 (เช่น) มีปัญหากับแคชสำหรับภาพพื้นหลังดูเหมือนว่าไม่ใช่ความคิดที่เลวร้ายที่สุด ... นี่เป็นวิธีปฏิบัติที่ดีหรือไม่ดีทำไมคุณไม่ใช้และคุณจะใช้เครื่องมือใดในการเข้ารหัสภาพที่ base64 อัพเดท - ผลการทดสอบ การทดสอบด้วยภาพ: http://fragged.org/dev/map-shot.jpg - 133.6Kb URL ทดสอบ: http://fragged.org/dev/base64.html ไฟล์ CSS เฉพาะ: http://fragged.org/dev/base64.css …

475 css  base64  background-image  data-uri 

ตัวอย่างเช่น: div > p.some_class { /* Some declarations */ } สิ่งที่ว่าไม่>หมายถึงเครื่องหมาย?

475 css  css-selectors 

จะมีต่อไปในการได้รับมุมโค้งมนบนร่างของdiv elementคล้ายกับborder-radius?

473 html  css 

มีวิธีในการเลือกองค์ประกอบที่มี CSS ตามค่าของแอตทริบิวต์ class ที่กำหนดเป็นสองคลาสเฉพาะหรือไม่ ตัวอย่างเช่นสมมติว่าฉันมี 3 divs: <div class="foo">Hello Foo</div> <div class="foo bar">Hello World</div> <div class="bar">Hello Bar</div> CSS ใดที่ฉันสามารถเขียนเพื่อเลือกเฉพาะองค์ประกอบที่สองในรายการโดยขึ้นอยู่กับความจริงที่ว่ามันเป็นสมาชิกของทั้งชั้นเรียน foo และบาร์?

472 css  css-selectors 

ฉันทำการค้นคว้าเกี่ยวกับการสืบค้นสื่อและฉันยังไม่เข้าใจวิธีกำหนดเป้าหมายอุปกรณ์ที่มีขนาดที่แน่นอน ฉันต้องการกำหนดเป้าหมายเดสก์ท็อปแท็บเล็ตและมือถือ ฉันรู้ว่าจะมีความแตกต่างบางอย่าง แต่มันก็ดีที่มีระบบทั่วไปที่สามารถใช้เพื่อกำหนดเป้าหมายอุปกรณ์เหล่านี้ ตัวอย่างบางส่วนที่ฉันได้พบ: # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) หรือ: # Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop …

470 css  mobile  media-queries  tablet 

ฉันมีไฟล์ JPEG ที่ฉันใช้เป็นภาพพื้นหลังสำหรับหน้าค้นหาและฉันใช้ CSS เพื่อตั้งค่าเพราะฉันทำงานภายในบริบทของBackbone.js : background-image: url("whatever.jpg"); ฉันต้องการที่จะใช้ตัวกรองเบลอ CSS 3 เพียงไปที่พื้นหลัง แต่ผมไม่แน่ใจว่าวิธีการรูปแบบองค์ประกอบเพียงว่าหนึ่ง ถ้าฉันลอง: -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); ใต้background-imageCSS ของฉันมันมีลักษณะทั้งหน้าไม่ใช่แค่พื้นหลัง มีวิธีเลือกเฉพาะภาพและใช้ตัวกรองกับสิ่งนั้นหรือไม่? อีกวิธีหนึ่งมีวิธีเพียงปิดเบลอสำหรับองค์ประกอบอื่น ๆ ในหน้าหรือไม่

467 css  background-image  css-filters 

เมื่อกำหนด PNG แบบโปร่งใสที่แสดงรูปทรงที่เรียบง่ายในสีขาวเป็นไปได้หรือไม่ที่จะเปลี่ยนสีของสิ่งนี้ผ่าน CSS การซ้อนทับบางอย่างหรือไม่?

464 css  image  colors  png  overlay 

ฉันกำลังใช้ตารางที่มีสีแถวสำรองด้วยสิ่งนี้ tr.d0 td { background-color: #CC9999; color: black; } tr.d1 td { background-color: #9999CC; color: black; } <table> <tr class="d0"> <td>One</td> <td>one</td> </tr> <tr class="d1"> <td>Two</td> <td>two</td> </tr> </table> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล นี่ฉันใช้ชั้นแต่ผมต้องการที่จะใช้เฉพาะสำหรับtr tableเมื่อฉันใช้ชั้นเรียนสำหรับตารางกว่านี้นำไปใช้เป็นtrทางเลือก ฉันสามารถเขียน HTML แบบนี้โดยใช้ CSS ได้ไหม <table class="alternate_color"> <tr><td>One</td><td>one</td></tr> <tr><td>Two</td><td>two</td></tr> </table> ฉันจะทำให้แถวมี "ลายทางม้าลาย" โดยใช้ CSS ได้อย่างไร

462 html  css  html-table 

สิ่งที่ฉันต้องการจะทำคือเมื่อมีบางอย่างจะวนเวียนอยู่ก็ต้องการส่งผลกระทบต่อคุณสมบัติของผู้อื่นdivdiv ยกตัวอย่างเช่นในนี้สาธิต JSFiddleเมื่อคุณวางเมาส์เหนือ#cubeจะเปลี่ยนbackground-colorแต่สิ่งที่ฉันต้องการก็คือว่าเมื่อฉันวางเมาส์เหนือ#container, #cubeได้รับผลกระทบ div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; } <div id="container"> <div id="cube"> </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

459 html  css  hover 

ฉันพยายามเติมพื้นที่แนวตั้งของไอเท็มเฟล็กซ์ภายใน Flexbox .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล และนี่คือJSFiddle …

459 css  flexbox