web前端学习(二十一)——CSS3分组和嵌套选择器、尺寸属性(height、width)的相关设置

简介: web前端学习(二十一)——CSS3分组和嵌套选择器、尺寸属性(height、width)的相关设置

1.CSS分组选择器


样式表中有很多具有相同样式的元素。为了尽量减少代码,你可以使用分组选择器,每个选择器用逗号分隔。

小实例: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      h1,h2,p {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!!!</h1>
    <h2>Hello World!!!</h2>
    <p>Hello World!!!</p>
  </body>
</html>

2.CSS嵌套选择器


它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式:

·       p{ }: 为所有p元素指定一个样式。

·       .marked{ }: 为所有class="marked"的元素指定一个样式。

·       .marked p{ }: 为所有class="marked"元素内的p元素指定一个样式。

·       p.marked{ }: 为所有class="marked"p元素指定一个样式。

小实例: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p {
        color: blue;
        text-align: center;
      }
      .marked {
        background-color: red;
      }
      .marked p {
        color: white;
      }
      p.marked {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>这个段落是蓝色文本、居中对齐。</p>
    <div class="marked">
      <p>这个段落是白色文本、红色背景。</p>
    </div>
    <p class="marked">这个段落是蓝色文本、红色背景,同时带有下划线。</p>
  </body>
</html>

3.CSS尺寸


CSS尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。

所有CSS尺寸属性如下表:👇👇👇

属性

描述

height

设置元素的高度。

line-height

设置行高。

max-height

设置元素的最大高度。

max-width

设置元素的最大宽度。

min-height

设置元素的最小高度。

min-width

设置元素的最小宽度。

width

设置元素的宽度。


3.1 heightwidth属性(高度、宽度)

height属性设置元素的高度。

注意: height属性不包括填充,边框,或页边距! 

描述

auto

默认。浏览器会计算出实际的高度。

length

使用 pxcm 等单位定义高度。

%

基于包含它的块级对象的百分比高度。

inherit

规定应该从父元素继承 height 属性的值。

width属性设置元素的宽度。

注意: width属性不包括填充,边框和页边距!


描述

auto

默认值。浏览器可计算出实际的宽度。

length

使用 pxcm 等单位定义宽度。

%

定义基于包含块(父元素)宽度的百分比宽度。

inherit

规定应该从父元素继承 width 属性的值。

小实例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      img.normal {
        height: auto;
      }
      img.big {
        height: 200px;
      }
      p.ex {
        height: 100px;
        width: 100px;
      }
      p.abc {
        height: auto;
        width: auto;
      }
    </style>
  </head>
  <body>
    <img class="normal" src="img/images/tx.jpg" width="160" height="140" /><br />
    <img class="big" src="img/images/tx.jpg" width="160" height="140" /><br />
    <p class="ex">这个段落的高度和宽度是100px。</p>
    <p class="abc">这个段落的高度和宽度均为默认值。</p>
  </body>
</html>

3.2 max-heightmin-height属性(最大高度、最小高度)

max-height属性设置元素的最大高度。

注意: max-height属性不包括填充,边框,或页边距!


描述

none

默认。定义对元素被允许的最大高度没有限制。

length

定义元素的最大高度值。

%

定义基于包含它的块级对象的百分比最大高度。

inherit

规定应该从父元素继承 max-height 属性的值。


min-height属性设置元素的最低高度。

注意: min-height属性不包括填充,边框,或页边距!


描述

length

定义元素的最小高度。默认值是 0

%

定义基于包含它的块级对象的百分比最小高度。

inherit

规定应该从父元素继承 min-height 属性的值。


小实例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p.max {
        max-height: 50px;
        background-color: aqua;
      }
      p.min {
        min-height: 70px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p class="max">这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。这个段落的最大高度为50px。</p><br />
    <p class="min">这个段落的最小高度为70px</p>
  </body>
</html>

3.3 max-widthmin-width属性(最大宽度、最小宽度)


max-width属性设置元素的最大宽度。

注意: max-width属性不包括填充,边框,或页边距!


描述

none

默认。定义对元素的最大宽度没有限制。

length

定义元素的最大宽度值。

%

定义基于包含它的块级对象的百分比最大宽度。

inherit

规定应该从父元素继承 max-width 属性的值。


min-width属性设置元素的最小宽度。

注意: min-width属性不包括填充,边框,或页边距!


描述

length

定义元素的最小宽度值。默认值:取决于浏览器。

%

定义基于包含它的块级对象的百分比最小宽度。

inherit

规定应该从父元素继承 min-width 属性的值。

小实例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p.max {
        max-width: 80px;
        background-color: purple;
      }
      p.min {
        min-width: 30px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <p class="max">这个段落的最大宽度为80px。</p>
    <p class="min">这个段落的最小宽度为30px。</p>
  </body>
</html>

相关文章
|
2天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
14 4
|
10天前
|
JavaScript 前端开发 NoSQL
前端node如何学习进阶知识
【7月更文挑战第8天】 深化JavaScript基础,精通Node.js核心模块(如fs、http)与事件循环机制,学习Express框架及异步编程(回调、Promise、async/await),掌握数据库交互,参与实战项目,关注Node.js最新技术和最佳实践,以此提升进阶技能。
24 8
|
14天前
|
前端开发 JavaScript 开发工具
给前端小白的学习建议
【7月更文挑战第4天】 **前端新手入门指南:** - 明确目标,从HTML/CSS基础开始。 - 深入学习JavaScript,结合项目实战。 - 跟踪技术趋势,选一二框架钻研。 - 多实践,从小项目到复杂应用。 - 掌握开发工具与调试技巧。 - 培养解决问题的能力,保持好奇与耐心。 - 加入社区,分享交流,持之以恒,成为优秀前端开发者。
15 2
|
15天前
|
前端开发 安全 JavaScript
学习前端加密
【7月更文挑战第3天】前端加密保护数据安全,防止传输中被截获,提升用户体验。HTTPS基础保障,JavaScript库如CryptoJS辅助加密,Web Crypto API提供原生加密功能。但前端加密非万能,需结合后端措施,注意算法选择、密钥管理。
15 2
|
16天前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
17天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
14 1
|
24天前
|
移动开发 前端开发 JavaScript
前端学习加速器:高效软件工具与实用设置攻略
前端学习加速器:高效软件工具与实用设置攻略
前端学习加速器:高效软件工具与实用设置攻略
|
17天前
|
前端开发
前端 CSS 经典:mix-blend-mode 属性
前端 CSS 经典:mix-blend-mode 属性
10 0
|
17天前
|
前端开发
前端 CSS 经典:backface-visibility 属性
前端 CSS 经典:backface-visibility 属性
13 0
|
17天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
15 0