css基础 CSS 媒体类型、CSS 属性 选择器、CSS 表单、CSS 计数器

CSS 媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。 该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

媒体类型

某些 CSS 属性仅仅被设计为针对某些媒介。

比方说voice-family属性被设计为针对听觉用户终端。

其他一些属性可用于不同的媒体类型。例如，font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。

@media 规则

@media 规则允许在相同样式表为不同媒体设置不同的样式。

在下面的例子告诉我们浏览器屏幕上显示一个14像素的 Verdana 字体样式。

但是如果页面打印，将是10个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：

@media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } 

你可以自己尝试看看 !

如果您使用的是 Mozilla / Firefox 或 IE5+打印此页，你会看到，Media Types将使用另一种比其他文本字体大小小点的字体显示。

其他媒体类型

注意：媒体类型名称不区分大小写。

媒体类型 描述 all 用于所有的媒体设备。 aural 用于语音和音频合成器。 braille 用于盲人用点字法触觉回馈设备。 embossed 用于分页的盲人用点字法打印机。 handheld 用于小的手持的设备。 print 用于打印机。 projection 用于方案展示，比如幻灯片。 screen 用于电脑显示器。 tty 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 tv 用于电视机类型的设备。 CSS 属性 选择器

顾名思义，CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。

具有特定属性的HTML元素样式，不仅仅是 class 和 id。

注意：IE7 和 IE8 需声明 !DOCTYPE 才支持属性选择器！            IE6 和更低的版本不支持属性选择器。

属性选择器

下面的例子是把包含标题（title）的所有元素变为蓝色：

 color:blue; }  border:5px solid green; }  color:blue; }  width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; } 

CSS 表单

一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素：

 width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }  width: 100%; } 

以上实例中设置了所有元素的宽度为 100%，如果你只想设置指定类型的输入框可以使用以下属性选择器：

input[type=text] – 选取文本输入框
input[type=password] – 选择密码的输入框
  input[type=number] – 选择数字的输入框

输入框填充

使用 padding 属性可以在输入框中添加内边距。

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } 

注意我们设置了 box-sizing 属性为 border-box。 这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。

输入框(input) 边框

使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角：

input[type=text] { border: 2px solid red; border-radius: 4px; } 

如果你只想添加底部边框可以使用 border-bottom 属性:

input[type=text] { border: none; border-bottom: 2px solid red; } 

输入框(input) 颜色

可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色：

input[type=text] { background-color: #3CBC8D; color: white; } 

输入框(input) 聚焦

默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。 我们可以设置 input 样式为outline: none;来忽略该效果。

使用:focus选择器可以设置输入框在获取焦点时的样式：

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 1px solid #555; outline: none; } input[type=text]:focus { background-color: lightblue; } 

接下来这个实例，我们使用:focus选择器，在文本框获取焦点时，设置文本框当边框颜色为黑色。

注意，我们使用来 CSStransition属性来设置边框当颜色 (在 0.5 秒内修改边框当颜色)。

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 3px solid #ccc; -webkit-transition: 0.5s; transition: 0.5s; outline: none; } input[type=text]:focus { border: 3px solid #555; } 

输入框(input) 图标

如果你想在输入框中添加图标，可以使用background-image属性和用于定位的background-position属性。

注意设置图标的左边距，让图标有一定的空间：

input[type=text] { width: 100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('search.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; } 

图标

 width: 100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('https://media.mybj123.com/wp-content/uploads/2021/06/1623303494-7bff7e55c76fb9f.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; }  width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('search.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; }  -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } 

文本框（textarea）样式

注意： 使用 resize 属性来禁用文本框可以重置大小的功能           （一般拖动右下角可以重置大小）。

textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; font-size: 16px; resize: none; } 

下拉菜单（select）样式

select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; } 

按钮样式

input[type=button], input[type=submit], input[type=reset] { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; } /* 提示: 使用 width: 100% 设置全宽按钮 */ 

响应式表单

响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：

 box-sizing: border-box; } input[type=text],
        select,
        textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; margin-top: 20px; } input[type=submit]:hover { background-color: #45a049; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } /* 清除浮动 */ .row:after { content: ""; display: table; clear: both; } /* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */ @media screen and (max-width: 600px) { .col-25,
            .col-75,
            input[type=submit] { width: 100%; margin-top: 10; } }  counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; }  counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "Section " counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }  counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section, ".") " "; }