分类目录归档:CSS

CSS z-index


Z Index( z-index )是一个CSS属性,用于定义重叠HTML元素的顺序。具有较高索引的元素将放置在具有较低索引的元素之上。

注意 :Z索引仅适用于定位元素( position:absoluteposition:relativeposition:fixed )。

可能的值

/* Default value if not specified */
 z-index: auto;

 /* Integer values */
 z-index: 1;
 z-index: 100;
 z-index: 9999;
 z-index: -1;

 /* Global valu...

阅读全文...

CSS垂直对齐


vertical-align是用于垂直对齐图像的CSS属性。

例如,您可以像这样vertical-align以对齐图像:

img {
    vertical-align: top;
 }

这些是vertical-align的有效值:

  • baseline - 这是默认值。它将元素与父元素的基线对齐
  • length - 这将在父元素基线之上或之下的给定长度上对此元素的基线进行分配。你可以使用pixals,em,%等。
  • sub - 这将元素对齐,就好像它是父元素的下标一样
  • super - 这将元素对齐,就像它是父元素的上标一样
  • top - 这会对齐元素,使此元素的顶部与线上最高元素的顶部对齐
  • ...

阅读全文...

CSS文字缩进


此CSS属性在文本块中创建第一行的缩进。

值:

可以使用%pxem或测量单位(如cmin指定text-indent属性。

例如:

  • text-indent: 20%;
  • text-indent: 15px;
  • text-indent: 5em;
  • text-indent: 2in;

text-indent属性也可以使用inherit值从其父元素inherit

例如:

  • text-indent: inherit;

更多CSS教程

学习更多CSS教程

阅读全文...

CSS文字对齐


此CSS属性描述了其父块元素中内联内容的水平对齐方式。 text-align不控制块元素的对齐,它只影响它们的内联内容。

值:

text-align属性指定为从以下值列表中选择的单个关键字:

text-align: left;将文本对齐到左侧

text-align: right;将文本对齐

text-align: center;将文本与中心对齐

text-align: justify;使线条宽度相同

text-align: justify-all;使线条宽度相同,包括最后一条线条

text-align: start;对齐行首的最后一行

text-align: end;对齐行尾的最后一行

...

阅读全文...

CSS链接样式


链接可以使用任何CSS属性设置样式,例如colorfont-familyfont-sizepadding 。 这是一个简单的例子:

a {
    color: hotpink;
 }

此外,链接的样式可以根据它们所处的状态而有所不同。

链接也有4个状态,许多程序员对每个状态的设置方式不同。 这四个州是:

  • a:link :未访问的,未被忽略的链接
  • a:visited :已访问,已点击的链接
  • a:hover :当用户的鼠标悬停在它上面时的链接
  • a:active :单击时的链接

<a href="">属性负责创建URL,并且可以使用许多CSS样式属性进行修改,...

阅读全文...

CSS 伪类选择器


CSS 伪类选择器active

当用户激活元素时,CSS:活动选择器会更改HTML元素的样式。此选择器通常向用户提供已单击元素的确认。 :主动选择器最常用于<a><button>元素,但可用于所有元素。

如果正在使用多个CSS伪选择器,则:active选择器必须位于:hover选择器之后。

在下面的示例中,当用户单击链接时,文本颜色将从黑色变为红色,直到单击操作停止。

a {
  color: black;
 }

 a:active {
  color: red;
 }

CSS 伪类选择器focus

:focus表示已接收焦点状态的元素,由键盘事件触发。触发...

阅读全文...

CSS填充Padding


padding CSS属性在元素的所有四个边上设置填充区域。此属性可用于生成内容周围的空间(边框内)。它是一次设置所有单个填充的简写: padding-toppadding-rightpadding-bottompadding-left 。值以顺时针方向定义。

填充值使用长度或百分比或inherit关键字设置,不能接受负值。所有填充属性的初始值或默认值为0.虽然可以使用inherit关键字但不能与长度值一起使用。

句法

.element {
    padding: [padding-top] || [padding-right] || [padding-bottom] |...

阅读全文...

CSS溢出Overflow


overflow属性指定当内容溢出元素的框时会发生什么(此属性仅适用于具有指定高度的块元素)。

此属性指定当元素的内容太大而无法放入指定区域时是剪辑内容还是添加滚动条。

例如,给定块级元素( <div> )设置为300px宽,包含400px宽的图像。图像将伸出div并默认可见。但是,如果溢出值设置为隐藏,则图像将以300px切断。

  • visible :这是属性的默认值。当内容大于框时,内容不会被剪裁。
  • hiddenhidden溢出的内容。
  • scroll :与hidden类似,但用户将能够滚动隐藏的内容。
  • auto :如果内容在其框外进行,则该内容将被隐藏,同时应该可...

阅读全文...

CSS导航栏


导航栏是任何网站的一个非常重要的元素。它们通过提供到用户的主链接列表来提供主要的导航方法。有许多方法可以创建导航栏。创建导航栏的最简单方法是使用无序列表并使用CSS设置样式。

导航栏主要由水平排列和样式化的<ul>列表组成。

在设置导航栏样式时,通常会删除由<ul><li>标记创建的额外间距以及自动插入的项目符号:

list-style-type: none;
margin: 0px;
padding: 0px;

例:

任何导航都有两个部分:HTML和CSS。这只是一个简单的例子。

<nav class="myNav"&g...

阅读全文...

CSS边距Margins


margin CSS属性设置元素所有四边的边距区域。此属性可用于生成内容周围的空间(边框外)。这是一次设置所有单个边距的简写: margin-topmargin-rightmargin-bottommargin-left 。值以顺时针方向定义。

保证金值使用长度或百分比或autoinherit关键字设置,并且可以接受零或负值。所有边距属性的初始值或默认值为0.虽然可以使用inherit关键字但不能与长度值一起使用。

句法

.element {
    margin: margin-top || margin-right || margin-bottom || margin...

阅读全文...