如何禁用特定css_CSS从零开始——基本样式（1）

最新推荐文章于 2024-05-09 14:42:12 发布

weixin_39641103

最新推荐文章于 2024-05-09 14:42:12 发布

阅读量1.7k

点赞数

文章标签：如何禁用特定css

今天开始正式的了解一下CSS的基本样式，包括选择器、文本、背景、字体、列表和表格这些，因为 CSS 3 已经在大部分的浏览器上普及了，所以这些内容会同时包含 CSS 3 的一些新样式，不过也会特别标注出来，这样我们可以有所选择的来使用。

今天是基本样式的第一部分，即选择器和背景。

1 选择器

CSS 使用选择器来选择 HTML 元素并添加样式。
选择器可以基于其id，class，类型，属性，属性值等选择HTML元素。

1.1 元素选择器

使用元素类型作为选择器来选择元素的所有实例，以下代码为所有 a 元素添加边框和填充：

a {
  border: thin black solid;
  padding: 4px;
}

只要直接写入 HTML 的标签名，即可选择所有对应元素。

1.2 id选择器

id选择器通过 id 属性选择元素，由于元素的 id 属性的值在HTML中必须是唯一的，所以这种选择方式不会影响其他相同元素。

以下代码选择id为 myAnchor 的元素：

#myAnchor {
  border: thin black solid;
  padding: 4px;
}

其使用方式就是在 id 属性值之前，加上 # ，则CSS会知道这是一个ID名称，进行检查以及渲染。

1.3 class选择器

class选择器选择具有特定类的元素，当与元素类型一起使用时，将选择属于指定类的指定类型的所有元素。

以下代码选择类为 class2 的所有元素：

.class2 {
  border: thin black solid;
  padding: 4px;
}

使用方式是在 class 属性值之前，加上 . ，则CSS会知道这是一个Class名称，进行遍历检查以及渲染；选择器 *.class 和 .class 是等效的，出于方便，我们一般使用后一种写法。

如果需要缩小范围，则可以指定元素名 + class，如下：

span.class2 {
  border: thin black solid;
  padding: 4px;
}

上面的代码，就是选择了class为 class2 的所有 span 元素。

1.4 属性选择器

属性选择器是通过 HTML 元素的属性值（非class或者id）来进行选择的，下面是个例子：

[title=username] {
  border: thin black solid;
  padding: 4px;
}

上面的代码，就是选择了某些（个） title 属性为 username 的元素。

譬如在SharePoint当中，有很多http://ASP.net自动生成的元素 name 属性，而id长的无法直接通过id选择器选择，就可以考虑使用它的 name 属性最后几位进行选择，如下：

div[name$="diidIOSaveItem"] {
  border: thin black solid;
  padding: 4px;
}

上面的代码就表示选择 name 属性使用 diidIOSaveItem 结尾的 div 元素，其中 $= 就代表选择以对应字符串为结尾的，在 CSS 3 中引入了该选择器写法，包括三种（点击链接可以转到菜鸟教程的参考手册）：

[attribute^=value]：选择属性以 value 开头的元素
[attribute$=value]：选择属性以 value 结尾的元素
[attribute*=value]：选择属性包含 value 的元素

这种写法 value 需要使用引号括起来。

1.5 分组选择器

分组选择器可以为多个选择器添加样式，只需要使用逗号分隔每个选择器即可。

假设我们有以下样式：

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

可以看到，上面的代码中除了选择器有所不同，其实样式声明是完全一样的，这时，我们可以简化为下面的写法：

h1, h2, p {
  text-align: center;
  color: red;
}

1.6 伪类

CSS 引入了一种概念叫做伪类（Pseudo-classes），使用 : 标明，选择的不是元素本身，往往是元素的某些行为，譬如鼠标移动到元素上面、访问过的链接、具有焦点的输入元素等等，这些都是传统选择器无法选择的。

下面这个选择器就是仅在 a 元素已经被访问过后，才会选择到：

a:visited {
  color: white;
  background-color: grey;
}

1.7 选择器列表

正是选择器因为引入了伪类的存在，CSS 选择器数量非常的多，所以下面列出比较常用的选择器（参考菜鸟教程），并连接到了对应的参考手册：

.class：CSS 1 引入的 class 选择器
#id：CSS 1 引入的 id 选择器
*：CSS 2 引入的所有元素选择器
element：CSS 1 引入的元素选择器
element1, element2：CSS 1 引入的分组选择器，两组元素之间使用 , 分隔
element1 element2：CSS 1 引入的级联选择器，选择所有 element1 下面的 element2 元素
element1>element2：CSS 2 引入的父子选择器，选择所有父级是 element1 的 element2 元素
element1+element2：CSS 2 引入的相邻选择器，选择所有相邻 element1 的 element2 元素
[attribute]：CSS 2 引入的属性选择器，选择所有拥有该属性的元素
[attribute=value]：CSS 2 引入的属性选择器，选择所有指定属性值为 value 的元素
[attribute~=value]：CSS 2 引入的属性选择器，选择所有指定属性值完整包含 value 的元素，即属性值为 abc-value-xyz 的时候，该选择器可以生效，但如果是 abcvaluexyz，则无法生效
[attribute|=value]：CSS 2 引入的属性选择器，选择所有指定属性值开头为完整 value 的元素，即属性值为 value-xyz 的时候，该选择器可以生效，但如果是 valuexyz，则无法生效
:link：CSS 1 引入的伪类，选择所有未访问链接
:visited：CSS 1 引入的伪类，选择所有已访问链接
:active：CSS 1 引入的伪类，选择所有活动链接
:hover：CSS 1 引入的伪类，选择鼠标移动到上面的元素
:focus：CSS 2 引入的伪类，选择获得焦点的元素
::first-letter：CSS 1 引入的伪元素，选择元素第一个字母
::first-line：CSS 1 引入的伪元素，选择选择器第一行
:first-child：CSS 2 引入的伪类，选择父元素中的第一个子元素
::before：CSS 2 引入的伪元素，向选定的元素前插入内容
::after：CSS 2 引入的伪元素，向选定的元素后插入内容
:lang(language)：CSS 2 引入的伪类，选择一个lang属性的起始值为language元素
element1~element2：CSS 3 引入的相邻选择器，选择出现在 element1 后面的 element2，两个元素必须同级且在同一个父元素下
[attribute^=value]：CSS 3 引入的属性选择器，选择属性以 value 开头的元素，无论属性值为 value-xyz 或者 valuexyz，都能匹配到
[attribute$=value]：CSS 3 引入的属性选择器，选择属性以 value 结尾的元素，无论属性值为 abc-value 或者 abcvalue，都能匹配到
[attribute*=value]：CSS 3 引入的属性选择器，选择属性包含 value 的元素，无论属性值为 abc-value-xyz 或者 abcvaluexyz，都能匹配到
:first-of-type：CSS 3 引入的伪类，选择元素其父级是特定类型的第一个子元素
:last-of-type：CSS 3 引入的伪类，选择元素其父级是特定类型的最后一个子元素
:only-of-type：CSS 3 引入的伪类，选择元素其父级是特定类型的唯一子元素
:only-child：CSS 3 引入的伪类，选择属于父元素中唯一子元素的元素
:nth-child(n)：CSS 3 引入的伪类，选择父元素中的第 n 个子元素，元素类型没有限制；n可以是一个数字，一个关键字，或者一个公式
:nth-last-child(n)：CSS 3 引入的伪类，选择父元素中的倒数第 n 个子元素，元素类型没有限制；n可以是一个数字，一个关键字，或者一个公式
:nth-of-type(n)：CSS 3 引入的伪类，选择同类型中的第 n 个同级兄弟元素，元素类型没有限制；n可以是一个数字，一个关键字，或者一个公式
:nth-last-of-type(n)：CSS 3 引入的伪类，选择同类型中的倒数第 n 个同级兄弟元素，元素类型没有限制；n可以是一个数字，一个关键字，或者一个公式
:last-child：CSS 3 引入的伪类，选择父元素的最后一个子元素
:root：CSS 3 引入的伪类，选择文档的根元素
:empty：CSS 3 引入的伪类，选择每个没有任何子级的元素（包括文本节点）
:target：CSS 3 引入的伪类，选择当前活动的 # 元素（包含该锚名称的点击的URL）
:enabled：CSS 3 引入的伪类，选择每一个已启用的元素
:disabled：CSS 3 引入的伪类，选择每一个已禁用的元素
:checked ：CSS 3 引入的伪类，选择每个选中的输入元素（仅适用于单选按钮或复选框）
:not(selector)：CSS 3 引入的伪类，选择每个并非指定元素的元素
::selection：CSS 3 引入的伪元素，匹配元素中被用户选中或处于高亮状态的部分，只可以应用于少数的CSS属性：color, background, cursor,和outline
:out-of-range：CSS 3 引入的伪类，匹配值在指定区间之外的元素，只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性
:in-range：CSS 3 引入的伪类，匹配值在指定区间之内的元素，只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性
:read-write：CSS 3 引入的伪类，用于匹配可读及可写的元素，适用于 input 和 textarea 元素
:read-only：CSS 3 引入的伪类，用于匹配只读的元素，适用于 input 和 textarea 元素，但是它也适用于设置了 "readonly" 属性的元素
:optional：CSS 3 引入的伪类，用于匹配可选的元素，只适用于表单元素: input, select 和 textarea
:required：CSS 3 引入的伪类，用于匹配必选的元素，只适用于表单元素: input, select 和 textarea
:valid：CSS 3 引入的伪类，用于匹配输入值为合法的元素，只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等
:invalid：CSS 3 引入的伪类，用于匹配输入值为非法的元素，只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等

2 背景

在下面的列表中描述了为背景设置样式的属性：

background-color：设置元素的背景颜色，颜色在任何图像后面绘制
background-image：设置元素的背景图像，如果指定了多个图像，则每个后续图像都绘制在其前面的图像之后
background-repeat：设置图像的重复样式
background-size：设置背景图像的大小
background-position：定位背景图像
background-attachment：设置具有视口的元素中的图像的附件样式
background-clip：指定图像的剪裁样式
background-origin：定位背景图像
background：简写元素

2.1 背景颜色

我们可以使用 background-color 设置背景颜色：

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      p {
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <p>This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
    </p>
  </body>
</html>

2.2 背景图像

可以使用 background-image 设置背景图像：

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      p {
        background-image: url('pc.jpg');
      }
    </style>
  </head>
  <body>
    <p>This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
    </p>
  </body>
</html>

从 CSS 3 开始可以指定超出一张的图片作为背景，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张，例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>hello</title> 
    <style>
      #example1 {
        background-image: url(mobile.jpg), url(pc.jpg);
        background-position: right bottom, left top;
        background-repeat: no-repeat, repeat;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div id="example1">
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
  </body>
</html>

因为原图大小的原因，显示出来的效果有点奇怪，见谅

2.3 背景重复

我们可以使用 background-repeat 属性控制图像将如何覆盖整个背景区域。

background-repeat 的允许使用如下的值：

repeat-x：水平重复图像; 图像可能会碎片化。
repeat-y：垂直重复图像; 图像可能会碎片化。
repeat：在两个方向重复图像; 图像可能会碎片化。
space：图像被重复以填充空间而不产生碎片，并且剩余区域被均匀地分配在图像周围。
round：图像被缩放，以便它可以重复而不创建碎片。
no-repeat：图像不重复。

可以为水平和垂直重复设置值，但如果只提供一个值，浏览器将在两个方向使用该重复样式，但对于repeat-x和repeat-y，浏览器将使用无重复样式作为第二个值。

以下代码显示了如何使用 background-repeat 以使背景图像水平重复：

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      p {
        background-image: url('pc.jpg');
        background-size: 20px 20px;
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <p>This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
      This is a test.<br/>
    </p>
  </body>
</html>

虽然有点丑，不过repeat-x就是这么个效果了

上面的代码中，用到了 background-size 来指定背景图像大小为长宽 20px 20px，所以图像显示出来的很小。

2.4 背景区域

background-Origin 属性指定了背景图像的位置区域。

如下示意图，content-box, padding-box 和 border-box 区域内可以放置背景图像：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>hello</title>
    <style> 
      div {
      	border:1px solid black;
      	padding:35px;
      	background-image: url('smiley.gif');
      	background-repeat: no-repeat;
      	background-position: left;
      }
      #div1 {
      	background-origin: border-box;
      }
      #div2 {
      	background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <p>background-origin: border-box</p>
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    <p>background-origin: content-box</p>
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>
  </body>
</html>

上面的代码中，将背景图片分别放置在了 border-box 和 content-box 当中，可以明显地看出区别。

2.5 背景剪裁

background-clip 背景剪裁属性是从指定位置开始渲染：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>hello</title> 
    <style>
      #example1 {
        border: 10px dotted black;
        padding:35px;
        background: yellow;
      }

      #example2 {
        border: 10px dotted black;
        padding:35px;
        background: yellow;
        background-clip: padding-box;
      }

      #example3 {
        border: 10px dotted black;
        padding:35px;
        background: yellow;
        background-clip: content-box;
      }
    </style>
  </head>
  <body>

    <p>No background-clip (border-box is default):</p>
    <div id="example1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: padding-box</p>
    <div id="example2">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: content-box</p>
    <div id="example3">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

  </body>
</html>

上面的代码，用三种不同的方式渲染了背景：

没有使用剪裁
剪裁到 padding-box 中
剪裁到 content-box 中

其他的几种样式属性都不算复杂，也很容易入门，故此不在这里介绍了，可以使用参考手册来帮助理解。

weixin_39641103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何禁用特定css_CSS从零开始——基本样式（1）

今天开始正式的了解一下CSS的基本样式，包括选择器、文本、背景、字体、列表和表格这些，因为 CSS 3 已经在大部分的浏览器上普及了，所以这些内容会同时包含 CSS 3 的一些新样式，不过也会特别标注出来，这样我们可以有所选择的来使用。今天是基本样式的第一部分，即选择器和背景。1 选择器CSS 使用选择器来选择 HTML 元素并添加样式。选择器可以基于其id，class，类型，属性，属性值等选择H...
复制链接

扫一扫