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

CSS (Cascading Style Sheets) เป็นภาษาสไตล์ชีตที่ใช้สำหรับอธิบายลักษณะและการจัดรูปแบบของ HTML (HyperText Markup Language), XML (Extensible Markup Language) เอกสาร XML และ Extensible Markup Language รวมถึงองค์ประกอบ SVG รวมถึง (แต่ไม่ จำกัด เฉพาะ) สีโครงร่างแบบอักษร และภาพเคลื่อนไหว นอกจากนี้ยังอธิบายถึงวิธีการแสดงองค์ประกอบบนหน้าจอบนกระดาษคำพูดหรือบนสื่ออื่น ๆ

5
ความหมายของตัวเลขใน“ col-md-4”,“ col-xs-1”,“ col-lg-2” ใน Bootstrap
ฉันสับสนกับระบบกริดใน Bootstrap ใหม่โดยเฉพาะคลาสเหล่านี้: col-lg-* col-md-* col-xs-* (โดยที่ * หมายถึงบางหมายเลข) ทุกคนสามารถอธิบายได้ดังต่อไปนี้: อย่างไรตัวเลขที่อยู่ในการจัดตำแหน่งกริด? อย่างไรใช้ตัวเลขเหล่านี้ สิ่งที่พวกเขาเป็นตัวแทนจริง ๆ ?

16
จัดตำแหน่งให้อยู่กึ่งกลาง: องค์ประกอบคงที่
ฉันต้องการทำposition: fixed;กล่องป๊อปอัพที่อยู่กึ่งกลางหน้าจอด้วยความกว้างและความสูงแบบไดนามิก ฉันใช้margin: 5% auto;สำหรับสิ่งนี้ หากไม่มีposition: fixed;มันก็จะปรับแนวนอนให้อยู่กึ่งกลาง หลังจากเพิ่มposition: fixed;มันยังไม่ได้อยู่ตรงกลางในแนวนอน นี่คือชุดที่สมบูรณ์: .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } <div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันจะจัดกึ่งกลางกล่องนี้ในหน้าจอด้วย CSS ได้อย่างไร

19
ทำไม CSS ถึงทำงานกับองค์ประกอบปลอมได้?
ในชั้นเรียนของฉันฉันเล่นรอบและพบว่า CSS ทำงานร่วมกับองค์ประกอบที่ทำขึ้น ตัวอย่าง: imsocool { color:blue; } <imsocool>HELLO</imsocool> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล เมื่ออาจารย์ของฉันเห็นฉันใช้สิ่งนี้เป็นครั้งแรกเขารู้สึกประหลาดใจเล็กน้อยที่องค์ประกอบที่ใช้การแต่งหน้าทำงานและแนะนำให้ฉันเปลี่ยนองค์ประกอบทั้งหมดที่ทำขึ้นเป็นย่อหน้าด้วย ID ทำไมอาจารย์ของฉันไม่ต้องการให้ฉันใช้องค์ประกอบที่ทำขึ้น? พวกเขาทำงานอย่างมีประสิทธิภาพ นอกจากนี้ทำไมเขาถึงไม่ทราบว่ามีองค์ประกอบที่สร้างขึ้นและทำงานกับ CSS พวกเขาผิดปกติหรือไม่
438 html  css 

17
วิธีการเปลี่ยนสีของภาพ SVG โดยใช้ CSS (การเปลี่ยนรูปภาพ jQuery SVG)?
Наэтотвопросестьответына Stack Overflow нарусском นี่เป็นคำถามและคำตอบเกี่ยวกับโค้ดที่ใช้งานได้ง่าย ขณะนี้ยังไม่มีวิธีที่ง่ายในการฝังภาพ SVG แล้วเข้าถึงองค์ประกอบ SVG ผ่าน CSS มีวิธีการต่างๆในการใช้เฟรมเวิร์ก JS SVG แต่มีความซับซ้อนมากเกินไปหากสิ่งที่คุณทำคือการสร้างไอคอนอย่างง่ายพร้อมสถานะโรลโอเวอร์ ดังนั้นนี่คือสิ่งที่ฉันคิดขึ้นมาซึ่งฉันคิดว่าเป็นวิธีที่ง่ายที่สุดในการใช้ไฟล์ SVG บนเว็บไซต์ มันใช้แนวคิดจากวิธีการเปลี่ยนข้อความเป็นรูปภาพในระยะแรก แต่เท่าที่ฉันรู้ว่ายังไม่เคยทำสำหรับ SVG นี่คือคำถาม: ฉันจะฝัง SVG และเปลี่ยนสีใน CSS ได้อย่างไรโดยไม่ต้องใช้เฟรมเวิร์ก JS-SVG
437 jquery  css  svg 

10
Bootstrap NavBar ที่มีรายการตรงกลางซ้ายหรือขวา
ในBootstrapวิธีที่เป็นมิตรกับแพลตฟอร์มที่สุดในการสร้างแถบการนำทางที่มีโลโก้ A อยู่ทางซ้ายรายการเมนูที่อยู่ตรงกลางและโลโก้ B ทางด้านขวา นี่คือสิ่งที่ฉันได้ลองมาแล้วและมันก็อยู่ในแนวเดียวกันเพื่อให้โลโก้ A อยู่ทางซ้ายรายการเมนูถัดจากโลโก้ด้านซ้ายและโลโก้ B ทางด้านขวา <div class="navbar navbar-fixed-top navbar-custom "> <div class="container" > <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Menu Item 1</a></li> …

5
CSS ซ่อนแถบเลื่อนหากไม่จำเป็น
ฉันพยายามหาวิธีซ่อนตัวoverflow-y:scroll;ถ้าไม่ต้องการ สิ่งที่ฉันหมายถึงคือฉันกำลังสร้างเว็บไซต์และฉันมีพื้นที่หลักที่โพสต์จะปรากฏขึ้นและฉันต้องการซ่อนแถบเลื่อนหากเนื้อหาไม่เกินความกว้างปัจจุบัน นอกจากนี้คำถามที่สองของฉัน ฉันต้องการให้เป็นเช่นนั้นเมื่อโพสต์เกินความกว้างปัจจุบันความกว้างจะเพิ่มขึ้นโดยอัตโนมัติและเนื้อหาจะไม่ออกนอกกรอบ ใครบ้างมีเงื่อนงำวิธีการทำเช่นนี้? พื้นที่โพสต์: .content { height: 600px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; font-size: 15px; text-align: justify; line-height: 19px; overflow-y:scroll; } คอนเทนเนอร์ของเว็บไซต์หลัก: .container { margin: 0 auto; width: 757px; margin-top: 30px; text-align: center; }
435 html  css 

20
คลิกปุ่มคัดลอกไปยังคลิปบอร์ดโดยใช้ jQuery
ฉันจะคัดลอกข้อความภายใน div ไปยังคลิปบอร์ดได้อย่างไร ฉันมี div และจำเป็นต้องเพิ่มลิงค์ซึ่งจะเพิ่มข้อความไปยังคลิปบอร์ด มีวิธีแก้ปัญหาสำหรับเรื่องนี้หรือไม่? <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="copy-text">copy Text</a> หลังจากฉันคลิกคัดลอกข้อความจากนั้นฉันกดCtrl+ Vจะต้องถูกวาง
433 jquery  html  css 


12
พื้นหลังไล่ระดับสี CSS3 ที่ตั้งอยู่บนร่างกายไม่ยืดออกไป
ตกลงพูดเนื้อหาภายใน<body>ผลรวมสูง 300px หากฉันตั้งค่าพื้นหลังของการ<body>ใช้งาน-webkit-gradientหรือ-moz-linear-gradient จากนั้นฉันขยายหน้าต่างให้ใหญ่ที่สุด (หรือทำให้สูงกว่า 300px) การไล่ระดับสีจะสูงถึง 300px (ความสูงของเนื้อหา) และทำซ้ำเพื่อเติมส่วนที่เหลือของหน้าต่าง ฉันสมมติว่านี่ไม่ใช่ข้อผิดพลาดเพราะมันเหมือนกันทั้งใน webkit และตุ๊กแก แต่มีวิธีที่จะทำให้การไล่ระดับสีเพื่อเติมหน้าต่างแทนการทำซ้ำ?
429 css  gradient 

15
ฉันจะสร้างความกว้างของ TextArea ได้ 100% โดยไม่ล้นเมื่อมีช่องว่างภายใน CSS
ฉันมีตัวอย่างข้อมูล CSS และ HTML ดังต่อไปนี้ textarea { border:1px solid #999999; width:100%; margin:5px 0; padding:3px; } <div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">Rules:</label> <textarea cols="2" rows="10" id="rules"/> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ปัญหาคือว่าพื้นที่ข้อความลงท้ายด้วยความกว้าง 8px (2px สำหรับเส้นขอบ + 6px สำหรับการขยาย) กว่าพาเรนต์ มีวิธีที่จะใช้เส้นขอบและช่องว่างภายใน แต่ จำกัด ขนาดรวมของtextareaถึงความกว้างของแม่หรือไม่
426 html  css  stylesheet 

8
วิธีการจัดแนวข้อความภายใน flexbox?
ฉันต้องการใช้ flexbox เพื่อจัดแนวเนื้อหาบางส่วนในแนวตั้ง<li>แต่ไม่ประสบความสำเร็จ ฉันตรวจสอบออนไลน์แล้วและบทเรียนจำนวนมากใช้ div wrapper ซึ่งได้รับalign-items:centerจากการตั้งค่าแบบยืดหยุ่นบนแม่ แต่ฉันสงสัยว่าเป็นไปได้ไหมที่จะตัดองค์ประกอบเพิ่มเติมนี้ออกไป ฉันเลือกที่จะใช้ flexbox %ในกรณีนี้เป็นความสูงของรายการจะเป็นแบบไดนามิก * { padding: 0; margin: 0; } html, body { height: 100%; } ul { height: 100%; } li { display: flex; justify-content: center; align-self: center; background: silver; width: 100%; height: 20%; } <ul> <li>This is the text</li> </ul> …
424 html  css  flexbox 

16
จัดรูปภาพบูตตอบสนองศูนย์ bootstrap 3
ฉันทำแคตตาล็อกโดยใช้ Bootstrap 3 เมื่อแสดงบนแท็บเล็ตภาพผลิตภัณฑ์ดูน่าเกลียดเพราะขนาดเล็ก (500x500) และความกว้าง 767 พิกเซลในเบราว์เซอร์ ฉันต้องการที่จะวางภาพในใจกลางของหน้าจอ แต่ด้วยเหตุผลบางอย่างที่ฉันไม่สามารถ ใครจะเป็นผู้ช่วยแก้ปัญหา?

13
ตาราง HTML ที่มีความกว้าง 100% พร้อมการเลื่อนในแนวตั้งภายในร่างกาย
ฉันจะตั้งค่า<table>ความกว้าง 100% และวางไว้ในการ<tbody>เลื่อนแนวตั้งเฉพาะสำหรับความสูงได้อย่างไร table { width: 100%; display:block; } thead { display: inline-block; width: 100%; height: 20px; } tbody { height: 200px; display: inline-block; width: 100%; overflow: auto; } <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> <th>Head 5</th> </tr> </thead> <tbody> <tr> <td>Content 1</td> <td>Content 2</td> …

14
ทำไม @ font-face ถึงข้อผิดพลาด 404 กับไฟล์ woff
ฉันใช้@font-faceเว็บไซต์ของ บริษัท และใช้งานได้ / ดูดี ยกเว้น Firefox และ Chrome จะโยนข้อผิดพลาด 404 ลงใน.woffไฟล์ IE ไม่ทิ้งข้อผิดพลาด ฉันมีแบบอักษรอยู่ที่รูท แต่ฉันได้ลองกับแบบอักษรในโฟลเดอร์ css และให้ URL ทั้งหมดสำหรับแบบอักษร หากลบแบบอักษรเหล่านั้นออกจากไฟล์ css ของฉันฉันจะไม่ได้รับ 404 ดังนั้นฉันรู้ว่าไม่ใช่ข้อผิดพลาดทางไวยากรณ์ นอกจากนี้ฉันใช้เครื่องมือ fontsquirrels เพื่อสร้าง@font-faceแบบอักษรและรหัส: @font-face { font-family: 'LaurenCBrownRegular'; src: url('/laurencb-webfont.eot'); src: local('☺'), url('/laurencb-webfont.woff') format('woff'), url('/laurencb-webfont.ttf') format('truetype'), url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: …

8
ดัชนี z ไม่ทำงานกับตำแหน่งที่แน่นอน
ฉันมีdivตำแหน่งเริ่มต้น (เช่นposition:static) และ a divพร้อมfixedตำแหน่ง ถ้าฉันตั้งค่าดัชนี z ขององค์ประกอบดูเหมือนว่าเป็นไปไม่ได้ที่จะทำให้องค์ประกอบคงที่อยู่ด้านหลังองค์ประกอบคงที่ #over { width: 600px; z-index: 10; } #under { position: fixed; top: 5px; width: 420px; left: 20px; border: 1px solid; height: 10%; background: #fff; z-index: 1; } <!DOCTYPE html> <html> <body> <div id="over"> Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello …
422 css  z-index 

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.