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

迈不过友情╰ 2023-10-06 22:33 74阅读 0赞

#### 阅读目录 ####

*  CSS 媒体类型
 *   *  媒体类型
     *  @media 规则
     *  其他媒体类型
 *  CSS 属性 选择器
 *   *  属性选择器
     *  属性和值选择器
     *  属性和值的选择器 – 多值
     *  表单样式
 *  CSS 表单
 *   *  输入框(input) 样式
     *  输入框填充
     *  输入框(input) 边框
     *  输入框(input) 颜色
     *  输入框(input) 聚焦
     *  输入框(input) 图标
     *  带动画的搜索框
     *  文本框（textarea）样式
     *  下拉菜单（select）样式
     *  按钮样式
     *  响应式表单
 *  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将使用另一种比其他文本字体大小小点的字体显示。

### 其他媒体类型 ###

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

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

## CSS 属性 选择器 ##

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

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

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

### 属性选择器 ###

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

![在这里插入图片描述][3c4b7798ba1e48f39bae6b3e563cf90c.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>图像</title>
        <style>
            [title] {
          
                        color:blue;
                    }
        </style>
    </head>
    <body>
    
        <h1 title="Hello world">你好世界</h1>
        <a title="wgchen" >CSDN</a>
    
    </body>
    </html>

### 属性和值选择器 ###

下面的实例改变了标题 `title='wg'` 元素的边框样式:  
![在这里插入图片描述][bdd5e3db43ec4f77b142f4377fb93fed.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>图像</title>
        <style>
            [title=wgchen] {
          
                                border:5px solid green;
                            }
        </style>
    </head>
    <body>
    
        <a title="wgchen" >CSDN</a>
    
    </body>
    </html>

### 属性和值的选择器 – 多值 ###

下面是包含指定值的 `title` 属性的元素样式的例子，使用 `（~）` 分隔属性和值:  
![在这里插入图片描述][fd17f24a9cc64dcab413b525f928431c.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>图像</title>
        <style>
           [title~=hello] {
          
                            color:blue;
                        } 
        </style>
    </head>
    <body>
    
        <h2>将适用:</h2>
        <h1 title="hello world">Hello world</h1>
        <p title="student hello">Hello CSS students!</p>
        <hr>
        <h2>将不适用:</h2>
        <p title="student">Hi CSS students!</p>
    
    </body>
    </html>

下面是包含指定值的 `lang` 属性的元素样式的例子，使用 `（|）` 分隔属性和值:

![在这里插入图片描述][7716bc9163844bf69681da28db91a958.png]

### 表单样式 ###

属性选择器样式无需使用 class 或 id 的形式:

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

## CSS 表单 ##

一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素：  
![在这里插入图片描述][1c335ecb90364562a83dc3535244cede.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单案例</title>
        <style>
            input[type=text],
            select {
          
                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;
            }
        </style>
    </head>
    <body>
    
    <h3>使用 CSS 来渲染 HTML 的表单元素</h3>
    
    <div>
        <form action="/">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name..">
    
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    
            <label for="country">Country</label>
            <select id="country" name="country">
                <option value="australia">Australia</option>
                <option value="canada">Canada</option>
                <option value="usa">USA</option>
            </select>
    
            <input type="submit" value="Submit">
        </form>
    </div>
    
    </body>
    </html>

### 输入框(input) 样式 ###

使用 width 属性来设置输入框的宽度：

input {
        
      width: 100%;
    }

以上实例中设置了所有 `<input>` 元素的宽度为 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` 选择器，在文本框获取焦点时，设置文本框当边框颜色为黑色。

注意，我们使用来 CSS `transition` 属性来设置边框当颜色 (在 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;
    }

![在这里插入图片描述][a806565362f34541ac71dceebec1c07c.png]  
图标  
![在这里插入图片描述][a5b42e5b05554f759a242738c28af002.png_pic_center]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单案例</title>
        <style>
            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('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;
            }
        </style>
    </head>
    <body>
    
    <h3>使用 CSS 来渲染 HTML 的表单元素</h3>
    
    <div>
        <form action="/">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="search">
        </form>
    </div>
    
    </body>
    </html>

### 带动画的搜索框 ###

以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。

![在这里插入图片描述][55588c83731e4489bc3ea5b639819616.gif_pic_center]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单案例</title>
        <style>
            input[type=text] {
          
                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%;
            }
        </style>
    </head>
    <body>
    
    <h3>使用 CSS 来渲染 HTML 的表单元素</h3>
    
    <div>
        <form action="/">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="search">
        </form>
    </div>
    
    </body>
    </html>

关键代码：

input[type=text] {
        
      -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% 设置全宽按钮 */

### 响应式表单 ###

响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：  
![在这里插入图片描述][d77f85e6adae494c804be73e68de5d9b.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单案例</title>
        <style>
            * {
          
                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;
                }
            }
        </style>
    </head>
    <body>
    
        <h3>使用 CSS 来渲染 HTML 的表单元素</h3>
    
        <div>
            <form action="/">
                <label for="fname">First Name</label>
                <input type="text" id="fname" name="firstname" placeholder="Your name..">
    
                <label for="lname">Last Name</label>
                <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    
                <label for="country">Country</label>
                <select id="country" name="country">
                    <option value="australia">Australia</option>
                    <option value="canada">Canada</option>
                    <option value="usa">USA</option>
                </select>
    
                <input type="submit" value="Submit">
            </form>
        </div>
    
    </body>
    </html>

## CSS 计数器 ##

CSS 计数器通过一个变量来设置，根据规则递增变量。

### 使用计数器自动编号 ###

CSS 计数器根据规则来递增变量。

CSS 计数器使用到以下几个属性：

counter-reset – 创建或者重置计数器
    counter-increment – 递增变量
              content – 插入生成的内容
    counter() 或 counters() 函数 – 将计数器的值添加到元素

要使用 CSS 计数器，得先用 `counter-reset` 创建：

以下实例在页面创建一个计数器 (在 body 选择器中)，每个 `<h2>` 元素的计数值都会递增，并在每个 `<h2>` 元素前添加 `“Section <计数值>:”`  
![在这里插入图片描述][0548e97937be49969c2d97f8dccb1563.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单案例</title>
        <style>
           body {
          
                counter-reset: section;
            }
    
            h2::before {
          
                counter-increment: section;
                content: "Section " counter(section) ": ";
            }
        </style>
    </head>
    <body>
    
        <h1>使用 CSS 计数器:</h1>
        <h2>HTML 教程</h2>
        <h2>CSS 教程</h2>
        <h2>JavaScript 教程</h2>
        
        <p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>
    
    </body>
    </html>

### 嵌套计数器 ###

以下实例在页面创建一个计数器，在每一个 `<h1>` 元素前添加计数值 `“Section <主标题计数值>.”`, 嵌套的计数值则放在 `<h2>` 元素的前面，内容为 `“<主标题计数值>.<副标题计数值>”:`  
![在这里插入图片描述][998ddbe7387d486daa791b0bab783f2f.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单案例</title>
        <style>
            body {
          
                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) " ";
            }
        </style>
    </head>
    <body>
    
        <h1>使用 CSS 计数器:</h1>
        <h2>HTML 教程</h2>
        <h2>CSS 教程</h2>
        <h2>JavaScript 教程</h2>
        
        <p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>
    
    </body>
    </html>

计数器也可用于列表中，列表的子元素会自动创建。  
这里我们使用了 `counters()` 函数在不同的嵌套层级中插入字符串:

![在这里插入图片描述][61b97da5255e4bef9e9b7dd9e8ad4806.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单案例</title>
        <style>
            ol {
          
                counter-reset: section;
                list-style-type: none;
            }
    
            li::before {
          
                counter-increment: section;
                content: counters(section, ".") " ";
            }
        </style>
    </head>
    <body>
    
        <ol>
            <li>item</li>
            <li>item
                <ol>
                    <li>item</li>
                    <li>item</li>
                    <li>item
                        <ol>
                            <li>item</li>
                            <li>item</li>
                            <li>item</li>
                        </ol>
                    </li>
                    <li>item</li>
                </ol>
            </li>
            <li>item</li>
            <li>item</li>
        </ol>
    
        <ol>
            <li>item</li>
            <li>item</li>
        </ol>
    
        <p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>
    
    </body>
    </html>

### CSS 计数器属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>使用 ::before 和 ::after 伪元素来插入自动生成的内容</td> 
  </tr> 
  <tr> 
   <td>counter-increment</td> 
   <td>递增一个或多个值</td> 
  </tr> 
  <tr> 
   <td>counter-reset</td> 
   <td>创建或重置一个或多个计数器</td> 
  </tr> 
 </tbody> 
</table>

[3c4b7798ba1e48f39bae6b3e563cf90c.png]: https://img-blog.csdnimg.cn/3c4b7798ba1e48f39bae6b3e563cf90c.png
[bdd5e3db43ec4f77b142f4377fb93fed.png]: https://img-blog.csdnimg.cn/bdd5e3db43ec4f77b142f4377fb93fed.png
[fd17f24a9cc64dcab413b525f928431c.png]: https://img-blog.csdnimg.cn/fd17f24a9cc64dcab413b525f928431c.png
[7716bc9163844bf69681da28db91a958.png]: https://img-blog.csdnimg.cn/7716bc9163844bf69681da28db91a958.png
[1c335ecb90364562a83dc3535244cede.png]: https://img-blog.csdnimg.cn/1c335ecb90364562a83dc3535244cede.png
[a806565362f34541ac71dceebec1c07c.png]: https://img-blog.csdnimg.cn/a806565362f34541ac71dceebec1c07c.png
[a5b42e5b05554f759a242738c28af002.png_pic_center]: https://img-blog.csdnimg.cn/a5b42e5b05554f759a242738c28af002.png#pic_center
[55588c83731e4489bc3ea5b639819616.gif_pic_center]: https://img-blog.csdnimg.cn/55588c83731e4489bc3ea5b639819616.gif#pic_center
[d77f85e6adae494c804be73e68de5d9b.png]: https://img-blog.csdnimg.cn/d77f85e6adae494c804be73e68de5d9b.png
[0548e97937be49969c2d97f8dccb1563.png]: https://img-blog.csdnimg.cn/0548e97937be49969c2d97f8dccb1563.png
[998ddbe7387d486daa791b0bab783f2f.png]: https://img-blog.csdnimg.cn/998ddbe7387d486daa791b0bab783f2f.png
[61b97da5255e4bef9e9b7dd9e8ad4806.png]: https://img-blog.csdnimg.cn/61b97da5255e4bef9e9b7dd9e8ad4806.png