CSS基础知识及介绍——CSS里的单位和值

最新推荐文章于 2023-09-07 11:17:54 发布
最新推荐文章于 2023-09-07 11:17:54 发布
阅读量170 收藏
点赞数
分类专栏： DIV+CSS 文章标签： CSS 3 CSS单位 RGB URL opacity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37196494/article/details/95981868
版权

  • 1.颜色：命名颜色、RGB颜色、十六进制颜色、网络安全色

  • 命名颜色：英文单词命名与之相应的颜色
  • RGB颜色：以红、绿、蓝三种颜色为基本色
example：
color：rgb(255,0,0);红色
color：rgb(0,255,0)绿色
color：rgb(100%,0,0)红色
取值范围为0-255（可采用数值和百分比进行设置）
  •  十六进制颜色：在Dreamweaver可通过色板来定义颜色
  • 网络安全色：由216种颜色组成，是被认为在任何操作系统和浏览器中都是相对稳定的。重点*（CSS配色首选）

2.CSS 3 中新增的颜色

  • RGBA： 对RGB色彩模式的扩展
rgba(r,g,b,alpha)
alpha参数是一个介于0.0（完全透明）和1.0(完全不透明)之间的数字
  •  HSL和HSLA：代表色调（Hue）、饱和度（Saturation）、亮度（Light-ness）
语法如下：
hsl(length.percentage,percentage)
length:任意数值：0或360代表红色、60表示黄色、120表示绿色
percentage：0%-100% 0%表示灰度，即没有采用该颜色
percentage：0%-100% 0%最暗。显示为黑色 100%最亮，显示为白色

HSLA增加了不透明度参数

hls(length,percentage,percentage,opacity)
参考代码：
<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<style type="text/css">
	.log div{height: 20px;}
	.log div:nth-child(7){background-color: hsla(355,50%,50%,0.1);}
	.log div:nth-child(6){background-color: hsla(355,50%,50%,0.2);}
	.log div:nth-child(5){background-color: hsla(355,50%,50%,0.3);}
	.log div:nth-child(4){background-color: hsla(355,50%,50%,0.4);}
	.log div:nth-child(3){background-color: hsla(355,50%,50%,0.5);}
	.log div:nth-child(2){background-color: hsla(355,50%,50%,0.6);}
	.log div:nth-child(1){background-color: hsla(355,50%,50%,0.7);}
	</style>
</head>
<body>
   <h3>短歌行</h3>
   <hr>
   <div class="log">
   <div>对酒当歌</div>   <div>人生几何</div>
   <div>去日苦多</div>   <div>譬如朝露</div>
   <div>概当以慷</div>   <div>忧思难忘</div>
   <div>何以解忧</div>   <div>唯有杜康</div>
   </div>
</body>
</html>

 

  •  opacity属性
  • opacity：alphavalue
alphavalue参数是由浮点型和单位标识符组成的长度值
取值为1，则元素是完全不透明
取值为0，则元素是完全透明的

    3. 长度单位

在CSS属性的长度单位分为两类：绝对单位和相对单位

 绝对单位分为五种：英寸( in )、厘米（cm）、毫米（mm）、磅（pt）、pica（pc）

相对单位主要分为三种：

                  1）em：1em其实是当前字体的font-size，em的值是不固定的，随着当前字体大小的变化而变化

                  2）ex：ex是以给定字体的小写字母“x”高度作为基准

                  3）px：也叫像素，1像素是屏幕上的一个小方格

4.通过URL引入外部资源

URL可以用两种形式引入外部资源：绝对URL和相对URL

绝对URL的格式：url(http://server/pathname)

相对URL的格式：url(pathname)

相对URL路径的使用一般都是用于指定在同一个目录下的文件位置

混吃混喝的废物
关注
专栏目录
CSS——CSS基础知识
流楚丶格念的博客
06-26 8125
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
CSS 值的解析
fyopen的博客
03-07 482
CSS 值的解析 CSS 中的声明，由 CSS 的特性和值，中间以 ":" 隔开组成1。 我们可以使用 CSS 选择器，为选中的元素设置需要的样式。 在介绍 CSS 的特性和值的时候，特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值，不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正，也就是浏览器容错。 那么，有没有想过，在我们给予一个特
CSS：值和值的单位
前端御书房
01-20 1879
值的定义语法指的是规范定义某个属性具有的值所使用的语法。] &&这种东西我们称之为值的定义语法。下面就介绍这种东西如何理解。首先我们要知道有哪些部分组成，根据上面的示例我们可以看到，有以下部分组成，、=、[]、|、&&、?、其他关键字。下面会解释，这里就不赘述。其余的[]、|、&&、?这些被称为组合器，用于组合多个值或类型。我们也可以在正则表达式中看到他们的意义与正则中的意义类似。
CSS构建基础（一）CSS值和单位
最新发布
chinusyan的专栏
09-07 564
CSS构建块（一）CSS值和单位
CSS属性值之数字
歪脖先生的博客
11-26 1157
CSS属性的值 CSS中，每个属性可以接受哪些值都有不同的规定，有的属性只能接受预定义的值，有的属性接受数字、长度、百分数、URL或颜色，有的属性还可以接受多种类型的值。 数字 CSS中有两类数字：整数和浮点数。只有极少数的CSS属性接受不带单位的数字，最常见的就是 line-height、z-index、opacity，如line-height: 1.5。 跟数学中的数字
CSS单位
huyao的博客
04-16 422
CSS 中的单位有很多，这里主要介绍目前常用的及未来必备的几个单位。pxpx 是 pixels（像素）的缩写，是一种绝对单位，用于屏幕显示器上，传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。任何现代显示屏，不管是手机，平板，笔记本还是电视都是由成千上万的像素组成的，所以我们可以使用这些像素来定义长度。另外 CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1p...
html——css基础知识.md
11-07
基础知识必会
css基础知识——单位
熟悉路线的博客
08-03 226
单位 绝对单位 排版单位：皮咔（pc），点（pt），像素（px）。1英寸=6皮咔，72点，96像素。 以上为绝对单位。如果想要准确的按照物理尺寸，使用绝对单位较好。如果想要在不同屏幕上显示正确，推荐在使用相对单位， 相对单位 文本相对 文本相对单位：相对文字大小（通常是当前字体）单位包括字体大小（em），字体高度（ex），零宽度（ch），和根字体大小（rem）。1em=12...
DIV+CSS教程——第一天XHTML_CSS基础知识
08-13
DIV+CSS教程——第一天XHTML_CSS基础知识
CSS学习之单位和值
爱喝水的qdy的博客
12-23 125
目录数字百分数颜色绝对长度单位相对长度单位URL关键字inherit 数字 数字，作 缩放因子 百分数 颜色 3.1 颜色名 3.2 rgb(0%, 0%, 0%) --> 0% - 100% 3.3 rgb(0, 0, 0) ---> 0 - 255 3.4 rgba(0, 0, 0, 1) ---> 最后一个数字表示透明度0.0 - 1.0之间 3.5 十六...
图解 CSS 属性单位和动画属性
lefex的博客
06-28 243
在做动画的时候，常常会被一些单位搞蒙圈，比如 deg 是啥、turn 是啥，今天我用一张图帮大家总结了 CSS 中常用的单位。无论在写动画还是 CSS 样式的时候，离不开 CSS 中的单...
一日一练-CSS CSS中percentage百分值的使用
dingping2015的博客
04-18 556
子曰：学好百分值，考试考百分 首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性，以及这些属性的值如何进行计算的，参考CSS 参考手册进行统计。 定位（Positioning） top 用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。 right 用百分比来定义距离右边的偏移量。百分比参照包含块的宽度。可以为负值。 bottom 用百分...
CSS——border基础知识.docx
02-27
本文将详细介绍CSS边框的基础知识，包括HTML原始边框与CSS边框的对比，以及如何使用CSS来创建和定制边框样式。 首先，HTML中的原始边框通常通过属性`border`、`border-color`和`border-style`来控制，例如在HTML...
HTML基本常识——分区标签（div，span）
qq_37196494的博客
07-12 5895
在HTML文档中常用的分区标签有两个：div标签（主讲这个）、span标签 1.div标签：区域标签（容器标签），用来作为多种html标签组合的容器，对该区域块进行操作和设置 div标签不能嵌套在p标签对中 2.span标签：用来做为片段文字图片等简短内容的容器标签 span标签不能嵌套在其他的封闭级元素中 区别： span是文本...
CSS基础知识介绍——CSS定义图片样式
qq_37196494的博客
08-01 3463
1. 定义图片边框 语法如下： <img src="图片路径" border="数值"> border-style、border-color、border-width border-style的取值列表 参数名 含义 none 无样式 solid 实线 outset 外凸 groove 槽线 dotted ...
HTML基本常识——图像标签 img
qq_37196494的博客
07-12 891
<img src="......"> 1.alt: 指定当鼠标在图片停留时，图片将会上现实的提示性的文本。 2.align：指定图片和他周围文本的对齐方式 3.border：指定图片的边框宽度 4.width、height：指定图片在浏览器显示的宽/高度 PS：alt属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的...
解决CSS开发中的常见问题——浏览器不兼容
qq_37196494的博客
08-17 653
1.字体大小不兼容：各个浏览器对字体大小small的定义不同，所以效果不一样 比如：IE浏览器small定义为16px，而firefox浏览器定义为13px 解决方法：在页面中设置文字大小时，不要使用small设置大小，直接设置具体数值大小 2. div里的float悬浮问题：在网页中不同浏览器设置多个float（多块），可能浮动不一致 比如：firefox浏览器没有清除上一个float，...
CSS基础知识介绍——表单样式
qq_37196494的博客
08-04 580
表单基础元素 表单元素说明表 元素名 元素作用 input 文本输入框 textarea 可以容纳多行输入的文本输入框 select 下拉菜单 1.输入域标签——input:主要收集用户的信息 <form> <input type="filed_name" name="type_name"> &...
CSS基础知识介绍——CSS排版
qq_37196494的博客
08-16 543
1. 设计上中下版式的样式 <!DOCTYPE html> <html> <head> <title>CSS</title> <style type="text/css"> body{font-family: "宋体";font-size: 12px;} .big{width: 800px;margin: 0 au...
CSS基础知识介绍——css3新增的背景属性
qq_37196494的博客
08-02 501
1. background-size属性：控制背景图像的大小 语法如下： background-size：auto | length | percentage | cover | contain PS：如果用户使用的是Firefox浏览器，需使用“moz-background-suze”或“background-size”的形式。如果用户使用的是Webkit引擎支持的浏览器，需使用“web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值