Questions tagged «css»

CSS（层叠样式表）是一种表示样式表语言，用于描述HTML（超文本标记语言），XML（可扩展标记语言）文档和SVG元素的外观和格式，包括（但不限于）颜色，布局，字体，和动画。它还描述了如何在屏幕，纸张，语音或其他媒体上呈现元素。

3
侧面倾斜的形状（响应）
我正在尝试创建如下图所示的形状，仅在一侧（例如，底侧）上有一个倾斜的边缘，而其他边缘保持笔直。 我尝试使用border方法（下面给出了代码），但是形状的尺寸是动态的，因此无法使用此方法。 .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent; } <div class="shape"> Some content </div> 运行代码段隐藏结果展开摘要 我也尝试过使用渐变作为背景（例如下面的代码），但是随着尺寸的变化，它变得混乱了。您可以将鼠标悬停在以下代码段的形状上，以了解我的意思。 显示代码段 .gradient { display: inline-block; …
8
如何垂直对齐2种不同大小的文本？
我知道要将文本垂直对齐到块的中间，您可以将line-height设置为与块相同的高度。 但是，如果我的句子中间有一个单词，那就是2em。如果整个句子的行高与包含块的高度相同，则较大的文本在垂直方向上对齐，但是较小的文本与较大的文本在同一基线上。 如何设置它以便两个文本的大小都垂直对齐，以便较大的文本位于比较小的文本低的基线上？
7
什么是默认列表样式（CSS）？
在我的网站上，我使用reset.css。它将精确地添加到列表样式中： ol, ul { list-style: none outside none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, …
90 html  css  html-lists 
7
在<head>中对元素进行排序的最佳实践是什么？
可以以任何顺序使用任何东西？放置&lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;之前很重要&lt;title&gt; 这是最常用的，是最好的方法吗？ &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt; &lt;title&gt;Title Goes Here&lt;/title&gt; &lt;link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912"&gt; &lt;link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { $("#wmd-input").focus(); $("#title").focus(); $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; …
90 html  css  xhtml  w3c 
7
内联样式在CSS中充当：hover
我知道将CSS样式直接嵌入到它们会影响的HTML标记中会破坏CSS的许多目的，但是有时对于调试目的很有用，例如： &lt;p style="font-size: 24px"&gt;asdf&lt;/p&gt; 嵌入规则的语法是什么： a:hover {text-decoration: underline;} 放入A标签的样式属性中？显然不是这个... &lt;a href="foo" style="text-decoration: underline"&gt;bar&lt;/a&gt; ...因为这将一直适用，而不是仅在悬停期间适用。
90 html  css 
8
CSS的dp（与密度无关的像素）单位是什么？
对于Android，人们建议对UI元素使用dp（与密度无关的像素）测量，并且存在一些约定，例如48dp用于按钮高度等。 我正在开发一个Web应用程序，但由于UI设计不符合Android设计标准而受到很多批评。显然，我的应用程序看起来会有所不同，因为它使用的是CSS和HTML而不是Android Holo主题，但是我仍然希望使其尽可能地符合要求。但是CSS不允许密度无关的测量。 当我在不同的分辨率和像素密度下测试应用程序时，它看起来并不好，有时甚至不成比例，因此甚至无法正常工作。CSS没有像Android本机开发那样具有dp单元，但是我想知道有什么替代方法。 我能以某种方式使用Javascript获得像素密度并适当地手动缩放所有内容吗？制作外观和在所有分辨率/密度下都能正常工作的Web应用的最佳方法是什么？
9
使用bootstrap css将两个div水平并排居中对齐页面
请参考下面的代码我尝试了什么 &lt;div class="row"&gt; &lt;div class="center-block"&gt;First Div&lt;/div&gt; &lt;div class="center-block"&gt;Second DIV &lt;/div&gt; &lt;/div&gt; 输出： First Div SecondDiv 预期产量： First Div Second Div 我想使用引导CSS将两个div水平居中对齐到页面。我怎样才能做到这一点 ？我不想使用简单的CSS和浮动概念来做到这一点。因为我需要使用bootstrap css来处理所有类型的布局（即所有窗口大小和分辨率），而不是使用媒体查询。
9
给HTML表格行加上边框<tr>
是否可以&lt;tr&gt;一次性为表格行加上边框，而不是给单个单元格加上边框，&lt;td&gt;例如， &lt;table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th style="width: 96px;"&gt;Column 1&lt;/th&gt; &lt;th style="width: 96px;"&gt;Column 2&lt;/th&gt; &lt;th style="width: 96px;"&gt;Column 3&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"&gt;&amp;nbsp;&lt;/td&gt; &lt;td style="border-top: thin solid; border-bottom: thin solid;"&gt;&amp;nbsp;&lt;/td&gt; &lt;td style="border-top: thin solid; …
90 html  css  border  html-table 
2
在另一个CSS类中定位一个CSS类
嗨，我在joomla中的某些CSS类遇到问题。我在模块中有两个div，一个是包装类class =“ wrapper”，另一个是内容类class =“ content”。内容在包装器内。我想做的是针对Content类上的CSS样式。通常，我只将.content {我的样式信息}放在样式表中，但是问题是此类在整个页面中多次使用。因此，在后端，您可以为模块分配一个类名，因此我将其称为.testimonials。 为了避免更改页面上的所有其他内容类，我尝试通过以下操作将其定位： .testimonials .content {my style info I am trying to apply} 但它不起作用，我知道您可以使用div来做到这一点，所以 #testimonials .content {my style info I am trying to apply} 但是我的问题是可以使用类吗？如果这样，在尝试使用以下方法时出现了问题： .testimonials .content {font-size:12px; width:300px !important;} 由于某种原因，内容没有包装并且仅在本段末尾消失了，所以我试图确保内容所在的1级课程没有任何重叠，奇怪的是即使我修复了内容位于50px的div类，它仍然不会包装文本，因此我不确定是否将其定位为对吗？ 编辑&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; .. Joomla创建的html基本上是这样的&gt;&gt; &lt;div class="wrapper"&gt; &lt;div class="content"&gt;SOME CONTENT&lt;/div &lt;/div&gt; 然后将其包装成其他具有良好Joomla风格的div。 我给模块提供了推荐类别，因此最终看起来像： &lt;div class="testimonials"&gt; &lt;div class="wrapper"&gt; …
90 html  css  joomla  module 
12
TypeError：$（…）.DataTable不是函数
我正在尝试通过此链接为我的项目使用jQuery的Datatable JS 。 我从同一来源下载了完整的库。软件包中给出的所有示例似乎都可以正常工作，但是当我尝试将其合并到我WebForms的CSS，JS中时，它们根本无法工作。 这是我所做的： &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;div&gt; &lt;table id="myTable" class="display" cellspacing="0" width="100%"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Position&lt;/th&gt; &lt;th&gt;Office&lt;/th&gt; &lt;th&gt;Age&lt;/th&gt; &lt;th&gt;Start date&lt;/th&gt; &lt;th&gt;Salary&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Position&lt;/th&gt; &lt;th&gt;Office&lt;/th&gt; &lt;th&gt;Age&lt;/th&gt; &lt;th&gt;Start date&lt;/th&gt; &lt;th&gt;Salary&lt;/th&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;tbody&gt; &lt;!-- …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.