CSS基础学习笔记（三）

最新推荐文章于 2023-04-07 08:21:45 发布
最新推荐文章于 2023-04-07 08:21:45 发布
阅读量133 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43894527/article/details/113528340
版权

CSS基础3

  • 仅为学习记录笔记~学习内容为菜鸟联盟CSS部分

CSS 伪类(Pseudo-classes)

  • CSS伪类是用来添加一些选择器的特殊效果。

语法

  • 伪类的语法

    • selector:pseudo-class {property:value;}

  • CSS类的伪类

  • selector.class:pseudo-class {property:value;}

anchor伪类

  • 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

  •   a:link {color:#FF0000;} /* 未访问的链接 */
  a:visited {color:#00FF00;} /* 已访问的链接 */
  a:hover {color:#FF00FF;} /* 鼠标划过链接 */
  a:active {color:#0000FF;} /* 已选中的链接 */

  • 注意：

    • a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
    • a:active 必须被置于 a:hover 之后，才是有效的。
    • 伪类的名称不区分大小写。

伪类和CSS类

  • 伪类可以与 CSS 类配合使用：

  •   a.red:visited {color:#FF0000;}
   
  <a class="red" href="css-syntax.html">CSS 语法</a>

  • 如果在上面的例子的链接已被访问，它会显示为红色。

CSS :first-child 伪类

  • 使用 :first-child 伪类来选择父元素的第一个子元素。

匹配第一个

元素

  • 在下面的例子中，选择器匹配作为任何元素的第一个子元素的

    元素：、

  •   p:first-child
  {
      color:blue;
  }

匹配所有

元素中的第一个 元素

  •   p > i:first-child
  {
      color:blue;
  }

匹配所有作为第一个子元素的

元素中的所有 元素

  •   p:first-child i
  {
      color:blue;
  }

CSS - :lang 伪类

  • :lang 伪类使你有能力为不同的语言定义特殊的规则
  • 在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：
  • q:lang(no) {quotes: "~" "~";}

所有CSS伪类/元素

  • 选择器示例示例说明
    :checkedinput:checked选择所有选中的表单元素
    :disabledinput:disabled选择所有禁用的表单元素
    :emptyp:empty选择所有没有子元素的p元素
    :enabledinput:enabled选择所有启用的表单元素
    :first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素
    :in-rangeinput:in-range选择元素指定范围内的值
    :invalidinput:invalid选择所有无效的元素
    :last-childp:last-child选择所有p元素的最后一个子元素
    :last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素
    :not(selector):not§选择所有p以外的元素
    :nth-child(n)p:nth-child(2)选择所有 p 元素的父元素的第二个子元素
    :nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
    :nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素
    :nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
    :only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
    :only-childp:only-child选择所有仅有一个子元素的p元素
    :optionalinput:optional选择没有"required"的元素属性
    :out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
    :read-onlyinput:read-only选择只读属性的元素属性
    :read-writeinput:read-write选择没有只读属性的元素属性
    :requiredinput:required选择有"required"属性指定的元素属性
    :rootroot选择文档的根元素
    :target#news:target选择当前活动#news元素(点击URL包含锚的名字)
    :validinput:valid选择所有有效值的属性
    :linka:link选择所有未访问链接
    :visiteda:visited选择所有访问过的链接
    :activea:active选择正在活动链接
    :hovera:hover把鼠标放在链接上的状态
    :focusinput:focus选择元素输入后具有焦点
    :first-letterp:first-letter选择每个

    元素的第一个字母

    :first-linep:first-line选择每个

    元素的第一行

    :first-childp:first-child选择器匹配属于任意元素的第一个子元素的

    元素

    :beforep:before在每个

    元素之前插入内容

    :afterp:after在每个

    元素之后插入内容

    :lang(language)p:lang(it)为

    元素的lang属性选择一个开始值

CSS 伪元素

  • CSS伪元素是用来添加一些选择器的特殊效果。

语法

  • 伪元素的语法：
    • selector:pseudo-element {property:value;}
  • CSS类也可以使用伪元素：
    • selector.class:pseudo-element {property:value;}

:first-line 伪元素

  • “first-line” 伪元素用于向文本的首行设置特殊样式。

  • 在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化：

    •   p:first-line 
  {
      color:#ff0000;
      font-variant:small-caps;
  }

  • “first-line” 伪元素只能用于块级元素。

  • 下面的属性可应用于 “first-line” 伪元素：

    • font properties
    • color properties
    • background properties
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear

:first-letter 伪元素

  • “first-letter” 伪元素用于向文本的首字母设置特殊样式：
  • “first-letter” 伪元素只能用于块级元素。
  • 下面的属性可应用于 “first-letter” 伪元素：
    • font properties
    • color properties
    • background properties
    • margin properties
    • padding properties
    • border properties
    • text-decoration
    • vertical-align (only if “float” is “none”)
    • text-transform
    • line-height
    • float
    • clear

伪元素和CSS类

  • 伪元素可以结合CSS类：

    p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>
/*上面的例子会使所有 class 为 article 的段落的首字母变为红色。*/

多个伪元素

  • 可以结合多个伪元素来使用。

  • p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line 
{
    color:#0000ff;
    font-variant:small-caps;
}
/*
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。
第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：

*/

CSS - :before伪元素

  • “:before” 伪元素可以在元素的内容前面插入新内容。

  •   h1:before 
  {
      content:url(smiley.gif);
  }
  /*在每个 <h1>元素前面插入一幅图片：*/

CSS - :after 伪元素

  • “:after” 伪元素可以在元素的内容之后插入新内容。

  •   h1:after
  {
      content:url(smiley.gif);
  }
  /*在每个 <h1>元素后面插入一幅图片：*/

所有CSS伪类/元素

  • 选择器示例示例说明
    :linka:link选择所有未访问链接
    :visiteda:visited选择所有访问过的链接
    :activea:active选择正在活动链接
    :hovera:hover把鼠标放在链接上的状态
    :focusinput:focus选择元素输入后具有焦点
    :first-letterp:first-letter选择每个

    元素的第一个字母

    :first-linep:first-line选择每个

    元素的第一行

    :first-childp:first-child选择器匹配属于任意元素的第一个子元素的

    元素

    :beforep:before在每个

    元素之前插入内容

    :afterp:after在每个

    元素之后插入内容

    :lang(language)p:lang(it)为

    元素的lang属性选择一个开始值

伪类概念

  • 伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
  • 与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

CSS导航栏

  • 导航栏=链接列表
  • 其实就是掌握
    • 标签的使用

垂直导航栏

  •   ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
  }
   
  li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
  }
   
  /* 鼠标移动到选项上修改背景颜色 */
  li a:hover {
      background-color: #555;
      color: white;
  }

激活/当前导航条实例

  • 在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

    •   .active {
      background-color: #4CAF50;
      color: white;
  }

创建链接并添加边框

  • 可以在

  • or 上添加text-align:center 样式来让链接居中。

  • 可以在 border

    • 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个
    • 元素上添加border-bottom :

  •   ul {
      border: 1px solid #555;
  }
   
  li {
      text-align: center;
      border-bottom: 1px solid #555;
  }
   
  li:last-child {
      border-bottom: none;
  }

全屏高度的固定导航条

  •   ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 25%;
      background-color: #f1f1f1;
      height: 100%; /* 全屏高度 */
      position: fixed; 
      overflow: auto; 
      /* 如果导航栏选项多，允许滚动 */
      /* 左边是全屏高度的固定导航条，右边是可滚动的内容。*/
  }

  • 注意: 该实例可以在移动设备上使用。

水平导航栏

  • 有两种方法创建横向导航栏。使用**内联(inline)或浮动(float)**的列表项。

  • 如果需要链接到具有相同的大小，必须使用浮动的方法。

  • 内联列表项

    • li{display:inline;}
    • display:inline; -默认情况下，
    • 元素是块元素。删除换行符之前和之后每个列表项，以显示一行。

  • 浮动列表项

    • 在上面的例子中链接有不同的宽度。

    • 对于所有的链接宽度相等，浮动

    • 元素，并指定为 元素的宽度：

      •   li
  {
      float:left;
  }
  a
  {
      display:block;
      width:60px;
  }
  /*
  float:left - 使用浮动块元素的幻灯片彼此相邻
  display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
  width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
  */

水平导航栏实例

  • 创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

  •   ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
  }
   
  li {
      float: left;
  }
   
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
   
  /*鼠标移动到选项上修改背景颜色 */
  li a:hover {
      background-color: #111;
  }

激活/当前导航条实例

  • 在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：
  • .active {background-color: #4CAF50;}

链接右对齐

  • 将导航条最右边的选项设置右对齐 (float:right;)：

  •   <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li style="float:right"><a class="active" href="#about">关于</a></li>
  </ul>

添加分割线

  • 通过 **border-right** 样式来添加分割线: 
  •   /* 除了最后一个选项(last-child) 其他的都添加分割线 */
  li {
      border-right: 1px solid #bbb;
  }
   
  li:last-child {
      border-right: none;
  }

固定导航条

  • 可以设置页面的导航条固定在头部或者底部：

    •   ul {
      position: fixed;
      top: 0;
      width: 100%;
  }
  /*固定在头部*/
  
  ul {
      position: fixed;
      bottom: 0;
      width: 100%;
  }
  /*固定在头部*/

CSS 下拉菜单

基本下拉菜单

  • 当鼠标移动到指定元素上时，会出现下拉菜单。

  •   <style>
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  </style>
  [mycode3]
  [mycode3 type="html"]
  <div class="dropdown">
    <span>鼠标移动到我这！</span>
    <div class="dropdown-content">
      <p>菜鸟教程</p>
      <p>www.runoob.com</p>
    </div>
  </div>

  • HTML 部分：

    • 可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。
    • 使用容器元素 (如：
      ) 来创建下拉菜单的内容，并放在任何你想放的位置上。
    • 使用
      元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

  • CSS 部分：

    • .dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

    • .dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。

    • 注意: 如果想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

    • 使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

    • :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

下拉菜单

  • 创建下拉菜单，并允许用户选取列表中的某一项

  • 在下拉列表中添加了链接，并设置了样式

  •   <style>
  /* 下拉按钮样式 */
  .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  
  /* 容器 <div> - 需要定位下拉内容 */
  .dropdown {
      position: relative;
      display: inline-block;
  }
  
  /* 下拉内容 (默认隐藏) */
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  /* 下拉菜单的链接 */
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  
  /* 鼠标移上去后修改下拉菜单链接颜色 */
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  /* 在鼠标移上去后显示下拉菜单 */
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
  /* 当下拉内容显示后修改下拉按钮的背景颜色 */
  .dropdown:hover .dropbtn {
      background-color: #3e8e41;
  }
  </style>
  
  <div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content">
      <a href="#">菜鸟教程 1</a>
      <a href="#">菜鸟教程 2</a>
      <a href="#">菜鸟教程 3</a>
    </div>
  </div>

下拉内容对齐方式

  • float:left;
  • float:right;
  • 设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0;

CSS 提示工具(Tooltip)

基础提示框(Tooltip)

  • 提示框在鼠标移动到指定元素上显示

    •   <style>
  /* Tooltip 容器 */
  .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
  }
   
  /* Tooltip 文本 */
  .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;
   
      /* 定位 */
      position: absolute;
      z-index: 1;
  }
   
  /* 鼠标移动上去后显示提示框 */
  .tooltip:hover .tooltiptext {
      visibility: visible;
  }
  </style>
   
  <div class="tooltip">鼠标移动到这
    <span class="tooltiptext">提示文本</span>
  </div>

    • HTML)

      • 使用容器元素 (like
        ) 并添加 “tooltip” 类。在鼠标移动到
        上时显示提示信息。
      • 提示文本放在内联元素上(如 ) 并使用class=“tooltiptext”。

    • CSS)

      • tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。
      • tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。

    • CSS3

      • border-radius 属性用于为提示框添加圆角。
      • :hover 选择器用于在鼠标移动到到指定元素
        上时显示的提示。

定位提示工具

  • 提示工具显示在指定元素的右侧(left:105%) 。

  • 注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。

  • 如果修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。

  •   .tooltip .tooltiptext {
      top: -5px;
      left: 105%; 
  }
  
  .tooltip .tooltiptext {
      top: -5px;
      right: 105%; 
  }

  • 如果想要提示工具显示在头部和底部。需要使用 margin-left 属性，并设置为 -60px。 这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60)。

    .tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
/* 显示在顶部 */

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
/* 显示在底部 */

添加箭头

  • 可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。

  •   .tooltip .tooltiptext::after {
      content: " ";
      position: absolute;
      top: 100%; /* 提示工具底部 */
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
  }

淡入效果

  • 可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果

  •   .tooltip .tooltiptext {
      opacity: 0;
      transition: opacity 1s;
  }
   
  .tooltip:hover .tooltiptext {
      opacity: 1;
  }

CSS 图片廊

  • CSS创建图片廊

  •   <div class="responsive">
    <div class="img">
      <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
        <img loading="lazy" src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
      </a>
      <div class="desc">这里添加图片文本描述</div>
    </div>
  </div>

  • CSS3 的媒体查询来创建响应式图片廊

    •   <div class="responsive">
    <div class="img">
      <a target="_blank" href="img_fjords.jpg">
        <img loading="lazy" src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
      </a>
      <div class="desc">这里添加图片文本描述</div>
    </div>
  </div>

CSS 图像透明/不透明

  • CSS Opacity属性是W3C的CSS3建议的一部分。

创建一个透明图像

  •   img
  {
    opacity:0.4;
    filter:alpha(opacity=40);
  }

图像的透明度 - 悬停效果

  • 将鼠标移到图像上时，图像会从透明->清晰

    •   img
  {
    opacity:0.4;
    filter:alpha(opacity=40); 
  }
  img:hover
  {
    opacity:1.0;
    filter:alpha(opacity=100); 
  }

透明的盒子中的文字

  •   <style>
  div.background
  {
    width:500px;
    height:250px;
    background:url(https://www.runoob.com/images/klematis.jpg) repeat;
    border:2px solid black;
  }
  div.transbox
  {
    width:400px;
    height:180px;
    margin:30px 50px;
    background-color:#ffffff;
    border:1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); 
  }
  div.transbox p
  {
    margin:30px 40px;
    font-weight:bold;
    color:#000000;
  }
  </style>

  • 创建一个固定的高度和宽度的div元素，带有一个背景图片和边框。在第一个div内部创建一个较小的div元素。 这个div也有一个固定的宽度，背景颜色，边框 - 而且它是透明的。透明的div里面，在P元素内部添加一些文本。

CSS 图像拼合技术

图像拼合

  • 图像拼合就是单个图像的集合。
  • 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
  • 使用图像拼合会降低服务器的请求数量，并节省带宽。

图像拼合 - 创建一个导航列表

  • 想使用拼合图像 (“img_navsprites.gif”)，以创建一个导航列表。

  • 使用一个HTML列表，因为它可以链接，同时还支持背景图像：

  •   #navlist{position:relative;}
  #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
  #navlist li, #navlist a{height:44px;display:block;}
  
  #home{left:0px;width:46px;}
  #home{background:url('img_navsprites.gif') 0 0;}
  
  #prev{left:63px;width:43px;}
  #prev{background:url('img_navsprites.gif') -47px 0;}
  
  #next{left:129px;width:43px;}
  #next{background:url('img_navsprites.gif') -91px 0;}
  
  /*
  #navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
  #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位
  #navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px
  现在开始每个具体部分的定位和样式：
  
  #home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px
  #home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
  #prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
  #prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）
  #next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
  #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）
  
  */

图像拼合s - 悬停效果

  •   #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
  #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
  #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

  • 实例解析：

    • 由于该列表项包含一个链接，我们可以使用：hover伪类
    • #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px

CSS 媒体类型

媒体类型

  • 一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。

@media规则

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

    •   @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;}
  }

其他媒体类型

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

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

CSS 属性选择器

具有特定属性的HTML元素样式

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

属性选择器

  •   [title]
  {
      color:blue;
  }
  /* 包含标题（title）的所有元素变为蓝色 */

属性和值选择器

  •   [title=runoob]
  {
      border:5px solid green;
  }
  /* 改变了标题title='runoob'元素的边框样式 */

属性和值的选择器 - 多值

  • [title~=hello] { color:blue; }
    • 包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值
  • [lang|=en] { color:blue; }
    • 包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值

表单样式

  •   input[type="text"]
  {
      width:150px;
      display:block;
      margin-bottom:10px;
      background-color:yellow;
  }
  input[type="button"]
  {
      width:120px;
      margin-left:35px;
      display:block;
  }
  /* 属性选择器样式无需使用class或id的形式: */

CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

  • "value 是完整单词" 类型的比较符号: ~=, |=

  • "拼接字符串*" 类型的比较符号: *=, ^=, **$=

  • 1.attribute 属性中包含 value:

    • [attribute~=value] 属性中包含独立的单词为 value，例如：

      •   [title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

    • [attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：

    •   [title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

  • 2.attribute 属性以 value 开头:

    • [attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开

    •   [lang|=en]     -->  <p lang="en">  <p lang="en-us">

    • attribute^=value] 属性的前几个字母是 value 就可以，例如：

    • [lang^=en] --> <p lang="ennn">

  • 3.attribute 属性以 value 结尾:

    • [attribute$=value]
    • 属性的后几个字母是 value 就可以，例如：a[src$=".pdf"]

CSS表单

  •   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;

输入框(input)样式

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

    • input { width: 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;
  }

输入框(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]:focus {
    background-color: lightblue;
  }

输入框(input)图标

  • 在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间：

  •   input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding-left: 40px;
  }

带动画的搜索框

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

  •   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;
    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;
  }

响应式表单

  •   * {
    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;
  }
   
  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: 0;
    }
  }

CSS 计数器

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

使用计时器自动编号

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

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

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

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

  • 以下实例在页面创建一个计数器 (在 body 选择器中)，每个

    元素的计数值都会递增，并在每个

    元素前添加 “Section <计数值>:”

    •   body {
    counter-reset: section;
  }
   
  h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
  }

嵌套计数器

  • 以下实例在页面创建一个计数器，在每一个

    元素前添加计数值 “Section <主标题计数值>.”, 嵌套的计数值则放在

    元素的前面，内容为 “<主标题计数值>.<副标题计数值>”:

  •   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) " ";
  }

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

    •   ol {
    counter-reset: section;
    list-style-type: none;
  }
   
  li::before {
    counter-increment: section;
    content: counters(section,".") " ";
  }

CSS 计数器属性

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

CSS 网页布局

网页布局

  • 网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
    • image-20210201145543362

头部区域

  • 头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

    •   .header {
    background-color: #F1F1F1;
    text-align: center;
    padding: 20px;
  }

菜单导航区域

  • 菜单导航条包含了一些链接，可以引导用户浏览其他页面：

    •   /* 导航条 */
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
   
  /* 导航链接 */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
   
  /* 链接 - 修改颜色 */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

内容区域

  • 内容区域一般有三种形式:

    • 1 列：一般用于移动端
    • 2 列：一般用于平板设备
    • 3 列：一般用于 PC 桌面设备
    • img
  •   /* 创建三个相等的列 */
  .column {
    float: left;
    width: 33.33%;
  }
   
  /* 列后清除浮动 */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
   
  /* 响应式布局 - 小于 600 px 时改为上下布局 */
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
  }

  • 不相等的列

    • 不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

    •   .column {
    float: left;
  }
   
  /* 左右侧栏的宽度 */
  .column.side {
    width: 25%;
  }
   
  /* 中间列宽度 */
  .column.middle {
    width: 50%;
  }
   
  /* 响应式布局 - 宽度小于600px时设置上下布局 */
  @media screen and (max-width: 600px) {
    .column.side, .column.middle {
      width: 100%;
    }
  }

底部区域

  • 底部区域在网页的最下方，一般包含版权信息和联系方式等。

  •   .footer {
    background-color: #F1F1F1;
    text-align: center;
    padding: 10px;
  }

响应式网页布局

  • 创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：

  •   * {
    box-sizing: border-box;
  }
   
  body {
    font-family: Arial;
    padding: 10px;
    background: #f1f1f1;
  }
   
  /* 头部标题 */
  .header {
    padding: 30px;
    text-align: center;
    background: white;
  }
   
  .header h1 {
    font-size: 50px;
  }
   
  /* 导航条 */
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
   
  /* 导航条链接 */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
   
  /* 链接颜色修改 */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
   
  /* 创建两列 */
  /* Left column */
  .leftcolumn {   
    float: left;
    width: 75%;
  }
   
  /* 右侧栏 */
  .rightcolumn {
    float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
  }
   
  /* 图像部分 */
  .fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
  }
   
  /* 文章卡片效果 */
  .card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
  }
   
  /* 列后面清除浮动 */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
   
  /* 底部 */
  .footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
  }
   
  /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
  @media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
      width: 100%;
      padding: 0;
    }
  }
   
  /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
  @media screen and (max-width: 400px) {
    .topnav a {
      float: none;
      width: 100%;
    }
  }
 }
   
  /* 导航条 */
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
   
  /* 导航条链接 */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
   
  /* 链接颜色修改 */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
   
  /* 创建两列 */
  /* Left column */
  .leftcolumn {   
    float: left;
    width: 75%;
  }
   
  /* 右侧栏 */
  .rightcolumn {
    float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
  }
   
  /* 图像部分 */
  .fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
  }
   
  /* 文章卡片效果 */
  .card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
  }
   
  /* 列后面清除浮动 */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
   
  /* 底部 */
  .footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
  }
   
  /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
  @media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
      width: 100%;
      padding: 0;
    }
  }
   
  /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
  @media screen and (max-width: 400px) {
    .topnav a {
      float: none;
      width: 100%;
    }
  }
Shavwv
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input框前面加上图标
努力奔跑的小不点
08-05 3262
实现效果如图： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *, html, body{ width:100%; height:100%; margin:0 auto; box-sizing: border-box; }
在input框之前添加图标
MPFLY的博客
10-16 1万+
在input框之前添加图片，想到了三种方法。 第一种，添加input背景图片，实现起来很简单，但是要求必须将图片放到输入框的右侧，否则会出现文字和图片重合的问题，现在自己暂时还不能解决此问题。下面是代码：#password{ width: 200px; height: 35px; outline: none; border: 1px s
在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现)
最新发布
m0_50207524的博客
04-07 4402
官方文档在el-input中可以通过 prefix-icon（首部）和 suffix-icon（尾部） 属性在 input 组件增加显示图标，也可以通过 slot 来放置图标。
input标签中添加一个图标
githubcurry
11-27 9285
在input标签中添加一个icon图标基本可以分为两种 1.将icon图标存储为本地图片，然后设置为input的背景图，然后通过background-position来调整图标在输入框的位置 2.使用一个div包裹两个子div，其中第一个div里面包裹icon图标，另一个div包裹input标签，并设置input的border为none，然后让input标签撑满div，设置div的border，然后使用flex布局使两个子div成行排列，并让两个div撑满父div（height，width） 第一种实现方
input前面的小图标。 可以加在后面。前面后面都可以。位置可调。
xinhuazhongxue的博客
08-30 4631
登录框input 前面增加一个小图标 效果如图： 核心样式： background:url("…/images/slider-pic/yh.png") no-repeat scroll .35rem center transparent ; .35rem： 这个个地方可以调整位置。 可选的值： left right 固定的值 数字都可以。 no-repeat: 重复关闭。只显示一个图标 ...
css基础学习笔记之字体图标
01-08
二、字体图标–iconfont：展示的是图片，本质是属于字体，字体图标有三个优点如下： 1.轻量级：一个图标要比一系列的图像小，一旦字体加载了，图标马上就会渲染出来，减少了服务器的请求 2.灵活性：本质其实是文字，...
学习CSS基础过程笔记
03-26
学习 CSS 基础过程笔记是前端开发者的必备技能之一，本笔记总结了 CSS 的基础知识点，涵盖选择器、常见样式、布局案例等多方面的内容。 选择器 选择器是 CSS 中最基本也是最重要的概念之一。选择器用于选择 HTML ...
css经典学习笔记.zip
11-01
一、CSS基础 CSS的基本结构包括选择器和声明块。选择器用于指定要应用样式的元素，如`p`代表所有的段落，`.class`代表具有特定类名的元素，`#id`则对应ID为特定值的元素。声明块由花括号包围，内含一组属性：值对，...
css基础入门学习笔记详细教程
04-15
css入门学习笔记详细教程
CSS 学习笔记
09-25
在CSS学习过程中，了解并熟练掌握ID和Class的使用是非常基础且重要的。ID与Class都是CSS选择器，但它们有着不同的特性和应用场景。 ID选择器（#）的主要优点在于其高优先级，这意味着当需要为特定元素赋予特殊样式...
JS Input里添加小图标的两种方法
10-19
大家在做网站的时候，经常需要在input里面添加小图标功能，看似功能很简单，但是实现起来还是有点技巧的，下面小编给大家介绍下JS Input里添加小图标的两种方法，需要的朋友参考下吧
input内加小图标
IT00123的博客
07-15 5347
登入页面
我与 CSDN 这几年，当技术遇到 CSDN，开启人生新篇章
Shids_的博客
01-13 9497
我与 CSDN 这几年，当技术遇到 CSDN，开启人生新篇章
1-CSS第一步
tiantianzs的博客
03-30 1346
title: 1-CSS第一步 tags: CSS（设计Web） category: MDN 什么是 CSS 参考文档 当开发者没有指定样式时，浏览器通过这些最简单的样式使页面具有基本可读性 如果所有网站都使用默认样式，互联网就会非常枯燥。但是使用 CSS 就可以完全控制浏览器如何显示 HTML 元素，从而充分展示你喜欢的设计样式。 CSS 用来干什么 CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等 一份文档是由标记语言组织起来的文本文件 —— HTML 是最常见的标记语言, .
关于input后添加图标和文字
欲寄彩笺兼尺素，山高水阔知何处
09-27 8056
欢迎各种吐槽。
1、htmlCSS笔记
weixin_45699925的博客
11-11 308
1、html的基础标签 1、表单标签 <form action="" method="get"> <input type="text" autocomplete="off" name="userName" placeholder="请输入用户名" id="" value=""/> <input type="password" auto...
input里添加小图标
热门推荐
HH
11-11 6万+
在input里面加入小图标
【前端系列教程之CSS3】02_CSS基础选择器和基础常用样式
波哩个波的博客
11-24 779
一、CSS基础选择器 选择器表示结构。该结构可以用作条件（例如，在CSS规则中），其确定选择器在文档树中匹配哪些元素，或者作为对应于该结构的HTML或XML片段的平面描述。 CSS的选择器分为两大类：基本选择器和扩展选择器。 基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议单独使用） 标签选择器 ...
HTML5与CSS基础学习笔记
"这是一份关于HTML5和CSS的学习笔记，包含了HTML的基本认知、标签、标签间的关系、DOCTYPE声明、字符集、常用排版标签、文本格式化标签、标签属性的使用、图像标签以及链接标签等内容，适合初学者参考学习。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值