css学习3:元素基础样式

本文介绍了网页设计中的关键要素,包括尺寸单位的选择(px、em等)、颜色的表示(RGB、十六进制及web安全色)、边框设置、元素分类(块级与行内)以及显示与隐藏技巧。通过实例演示了如何使用不同方式为元素着色和调整布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

三、尺寸和单位

- 定义宽度`width`和高度`height`可以使用长度单位:px,pt,rem,em,%等等

- 一般 pc 端网页使用 px 或 pt

- 移动端使用%,em,rem,vw,vh 等响应式单位

- 最大宽度最小宽度,最大高度和最大宽度(在响应式部分进行讲解)

  - `max-width`最大宽度,`max-height`最大高度

  - `min-width`最小宽度,`min-height`最小高度

  - 不允许出现负值,最小不满足时出现横向或竖向拖动条

四、颜色

1.英文颜色

- 常用 red,green,blue,yellow,orange,pink,purple,gold

- transparent 透明色

2.十六进制颜色

- `#rrggbb`#必须写

  - 1、2 位代表红色范围

  - 3、4 位代表绿色范围

  - 5、6 位代表蓝色范围

- 十六进制颜色范围是 0-9,a-f

- 如果三组都是相同的值,可以简写

- 企业标注图一般都使用十六进制颜色(需要大家认识标注图)

3.rgb 颜色

- `rgb()`函数,三个参数,用逗号分隔

- r 代表红色色值,g 代表绿色色值,b 代表蓝色色值

- 取值范围 0~255 之间的 256 个数

- `rgba()`a 代表透明度,取值 0~1 之间的数字,0 代表完全透明

【练习】

> 使用三种颜色赋值方式分别给元素赋值

> 给 p 标签加一个半透明背景颜色

div {
	width: 200px;
	height: 200px;
	/* 英文颜色 */
	background-color: red;
	/* 透明色 */
	background-color: transparent;
	/* 十六进制颜色 */
	background-color: #f00d19;
	/* rgb颜色 0~255*/
	background-color: rgb(10, 210, 30);
	/* rgba 最后一个a是透明度 */
	/* background-color: rgba(0,0,0,0.5); */
}
p {
	width: 100px;
	height: 100px;
	/* 最后一个值0-1之间 */
	background-color: rgba(21, 95, 83, 0.39);
}

4. web 安全色

web 安全色是用于网页的标准色彩,它比标准的 rgb 色彩要少。如果网页设计的时候用了非 web 安全色,那这个网页在不同的电脑显示出来可能是不同的颜色。

不同的平台(Mac、PC 等)有不同的调色板,不同的浏览器也有自己的调色板。这就意味着对于一幅图,显示在 Mac 上的 Web 浏览器中的图像,与它在 PC 上相同浏览器中显示的效果可能差别很大.

http://www.bootcss.com/p/websafecolors/

五、边框

1.边框的属性

- `border-width`边框宽度

- `border-style`边框样式,solid 实线,dashed 虚线,dotted 点点

- `border-color`边框颜色

2.边框的方向

- `border-bottom`下边框

- `border-top`上边框

- `border-left`左边框

- `border-right`右边框

3.边框都简写方式

`border:30px solid green;` 三个位置分别可以写边框宽度、边框样式边框颜色,没有严格要求书值都写顺序。

p {
	font-size: 100px;
	/* 简写方式 */
	border: 30px solid green;
	/* 单向边框简写 */
	border-bottom: 30px solid red;
}

4.三角形

.sjx {
	/* 宽度必须要写0 */
	width: 0;
	height: 0;
	/* 以下书写顺序不能改变 */
	border: 100px solid transparent;
	border-bottom-color: black;
}

六、元素的分类

1.元素的显示属性

`display`元素以什么方式显示(以下为常用显示方式)

- `display: block;`以块级元素方式显示

- `display: inline;`以内联元素方式显示

- `display: inline-block;`属于行内元素,但以块级显示,俗称行内块

- `display: none;`不显示

- `display: table;`以 table 方式显示(不是重点)

2.内联元素

- 内联元素也可以叫行内元素

- 设置宽度、高度无效(行内块级显示元素除外)

- 和其他内联元素横向从左向右排列

- 设置上下内、外边距无效

- 常见的行内元素`span a`等

3.inline-block

- 它是行内元素的一种

 - 不自占一行横向从左向右排列

- 可以设置宽度、高度以及内外边距

- 常见的行内块级显示元素`img button input`

- 会出现幽灵空白节点

  - 把 img 标签变成块级元素 `display: block;`

  - 父级元素`font-size: 0;`去掉空白节点

div {
	width: 300px;
	background-color: red;
	/* 去掉幽灵 */
	font-size: 0;
}
img {
	/* 就是和父元素一样宽 */
	width: 100%;
	display: block;
}

4.块级元素

- 每个元素都自占一行,后面的元素也只能另起一行

- 元素的宽度、高度以及内外边距都可以设定

- 块级元素宽度不设定,为父级元素宽度

- 高度不设定为内容高度,如果没有内容,高度为 0

- 常见的块级元素`div,p,h1,ul,li,table`

【练习】

> 将块级元素变成内联元素

> 将内联元素变成块级元素

> 让元素消失

> 将 a 标签变为行内块级显示

div {
	width: 100px;
	height: 100px;
	background-color: gold;
	/* 内联元素显示 */
	display: inline;
}
span {
	width: 100px;
	height: 100px;
	/* 块级元素显示 */
	display: block;
	background-color: yellowgreen;
}
p {
	width: 100px;
	height: 100px;
	background-color: blue;
	/* 不显示 */
	display: none;
}
a {
	width: 50px;
	height: 50px;
	padding: 30px;
	background-color: orange;
	/* 行内块级显示 */
	display: inline-block;
}

七、显示和隐藏属性

1. display:none

- `display:none;`使元素消失,脱离文档流的消失

- `display:block;`使元素出现,元素显示为块级元素

2. visibility: hidden

- `visibility: visible;`元素显示

- `visibility: hidden;`元素隐藏,占据自身位置

3. opacity: 0;

- opacity 属性代表元素的透明度,取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明

- 缺点是,元素内的一切都会随着透明度改变

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

D_evin_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值