分类标签归档：CSS

CSS 有效颜色值


CSS 有效颜色值

CSS中的颜色可以用以下格式指定：

十六进制颜色

浏览器支持

所有主流浏览器都支持十六进制颜色值。

格式

十六进制值指定为#RRGGBB ，其中RR（红色），GG（绿色）和BB（蓝色）十六进制整数指定颜色的分量。所有值必须介于00和FF之间。顾名思义，编码基于16。

例

这是不同的六角形颜色。

#divRed{
  color: #ff0000; /* red */
 }

 #divGreen{
  color: #00ff00; /* green */
 }

 #divBlue{
  color...

阅读全文...

CSS ID选择器


CSS ID选择器将样式应用于特定的html元素。 CSS ID选择器必须与HTML元素的ID属性匹配。 与可以应用于整个站点中的多个元素的类不同，特定ID可以仅应用于站点上的单个元素。 CSS ID将覆盖CSS类属性。 要选择具有特定id的元素，请写入散列（＃）字符，后跟元素的id。

句法

#specified_id { /* styles */ }

您可以将ID选择器与其他类型的选择器组合以设置非常特定的元素。

section#about:hover { color: blue; }
div.classname#specified_id { color: green; }

关于I...

阅读全文...

CSS Hover选择器


CSS :hover选择器是用于设置元素样式的许多伪类之一。

：鼠标悬停选择器用于在鼠标悬停时选择元素。

：hover选择器可用于所有元素，而不仅仅用于链接。

使用：link选择器设置指向未访问页面的链接的样式，使用：visited选择器设置指向已访问页面的链接的样式，使用：active选择器设置活动链接的样式。

注意：hover必须在CSS定义中跟随：link和：visited（如果它们存在），以便有效！

CSS语法 ：悬停{ css声明; }

悬停选择器仅在元素进入悬停状态时应用规则中提供的样式。 那是用户用鼠标悬停在元素上的时候。

button {
  color: white;
...

阅读全文...

CSS 高度和宽度尺寸


定义

程序员可以使用height和width属性来更改特定元素的高度和宽度。为了更改其尺寸，必须将这些元素的display属性值设置为block或inline-block 。

句法

高度：

  • height: auto|length|initial|inherit;
  • min-height: length|initial|inherit;
  • max-height: none|length|initial|inherit;

宽度：

  • width: auto|value|initial|inherit;
  • min-width: length|initial|inherit;
  • max-width: ...

阅读全文...

CSS 字体Fonts


CSS字体属性定义文本的字体系列，重量，大小，变体，行高和样式。

字体系列

只需使用font-family属性设置文本的font-family 。

它适用于_后备_系统，如果您的浏览器不支持第一个字体，它会尝试使用下一个字体，依此类推。如果字体的名称不止一个单词，则必须用引号括起来。

p {
  font-family: "Times New Roman", Times, serif;
}

在上面的例子中，“Times New Roman”是字体，而“serif”是 。通用名称用作后备 如果姓氏不可用，则保留样式的机制。通用名称应始终是字体系列名称列表中的最后一项。...

阅读全文...

CSS 下拉菜单Dropdowns


下拉列表在CSS中用于隐藏按钮内的预定义列表。

例子：

<div class="dropdown">
  <button class="dropbtn">Name</button>
  <div class="dropdownContent">
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#"...

阅读全文...

CSS网格布局Grid Layout


CSS Grid Layout是CSS中最强大的布局系统。 它是一个二维系统，意味着它可以处理列和行，不像flexbox主要是一维系统。 虽然并非所有浏览器都完全支持网格布局，但它是制作页面布局的最先进和最方便的方法。

如果使用CSS网格

在你的container內加入 display: grid

<div class="container">
  <!--  你的內容  -->
</div>
.container {
  display: grid;
}

如果使用CSS网格

<div class="container">
  <di...

阅读全文...

CSS3媒体规则Media Rule


CSS3 Media规则是允许使用媒体查询的规则。媒体查询可以允许您根据不同的媒体类型或设备对网页（部分或全部）进行不同的样式设置。

使用@media标记创建媒体查询，然后提供规则以检查以下内容：

  • 当前视口的宽度和高度
  • 设备的方向（这适用于平板电脑或手机）
  • 目前的决议
  • 和更多

目前有四种可能的媒体类型：

  • all（默认 - 这将针对所有设备）
  • 打印（用于打印机;例如提供单独的打印样式）
  • 屏幕（用于电脑，手机，平板电脑等）
  • speech（用于屏幕阅读器等网页内容的辅助设备）

媒体查询用于各种各样的purporses，因为它们允许许多不同的媒体功能。媒体查询最常见的用途之一是使网页响应...

阅读全文...

CSS3 2d变换


CSS3变换允许您平移，旋转，缩放和倾斜元素。

变换是一种让元素改变形状，大小和形状的效果 位置。

CSS3支持2D和3D转换。

CSS3 2D变换

方法：

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

translate（）方法

translate()方法将元素从其当前位置移开（相应地 给出了X轴和Y轴的参数。

以下示例将<div>元素向右移动50个像素，然后移动100个像素 从当前位置向下的像素：

例：

div {
  -ms-transform: translate(50px, 100px); /* IE...

阅读全文...

CSS语法和选择器


当我们谈论CSS的语法时，我们谈论的是如何布局。关于什么去哪里都有规则，因此你可以一致地编写CSS，程序（如浏览器）可以解释它并正确地将它应用到页面。

编写CSS有两种主要方法。

内联CSS

内联CSS将样式应用于单个元素及其子元素，直到遇到覆盖第一个元素的另一个样式。

要应用内联CSS，请将“style”属性添加到您要修改的HTML元素中。在引号内，包括一个以分号分隔的键/值对列表（每个由冒号分隔），表示要设置的样式。

这是一个内联CSS的例子。单词“One”和“Two”将具有黄色的背景颜色和红色的文本颜色。单词“Three”具有覆盖第一个的新样式，并且将具有青色的背景颜色和青色的文本...

阅读全文...