CSS文本样式/鼠标/溢出/显示与隐藏（二）

最新推荐文章于 2024-09-24 10:00:08 发布
最新推荐文章于 2024-09-24 10:00:08 发布
阅读量260 收藏
点赞数
文章标签： css html 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joie_Z/article/details/107823353
版权
本文详细介绍了CSS中颜色取值的多种方式，包括关键字、十六进制、RGB和RGBA函数等。此外，还讨论了字体样式，如color、font-size、font-family和text-align等，以及列表样式的设置。对于CSS的其他重要概念，如cursor（鼠标样式）、overflow（溢出处理）和显示与隐藏的方法，如opacity、display和visibility也进行了阐述。
摘要由CSDN通过智能技术生成

CSS（二）

颜色取值

1. 关键字

  • 如pink,black,cyan,blue等。注意：并不是所有颜色的英文单词都可以作为关键字。需要在网址：https://developer.mozilla.org/zhCN/docs/Web/CSS/color_value#Color_keywords查看

2. 十六进制

  • 用符号#加上十六进制数表示。

3. RGB函数

  • 例：rgb(255,255,255)。其中三个参数分别对应红绿蓝三个颜色。

4. RGBA函数

  • 例：rgba(255,255,255,0.5)。第四个参数为透明度程度，取值为0-1.

5. HSL

6. HSLA

字体样式

1. color 字体颜色

2. font-size 文字大小

3. font-family 给文字指定字体

  • serif 有衬线字体

  • sans-serif 无衬线字体

  • fantasy 梦幻字体

  • cursive 草书

  • monospace 等宽

最低0.47元/天 解锁文章
Joie_Z
关注
纯 CSS 检测文本是否溢出
m0_68271787的博客
04-29 1178
CSS 就是这么神奇，将两个几乎不相关的特性组合起来，就能实现完全不一样的功能，这可是在其他语言中做不到的，简单回顾一下CSS检测代码css复制代码/*注意溢出方向*/ } @keyframes check{ from,to { --trunc: true;/*滚动驱动动画*/ } } /*查询溢出状态*/ @container style(--trunc: true) { }是不是非常容易，几乎是无侵入式的，下面总结一下本文重点。
CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题
流楚丶格念的博客
07-03 4770
CSS高级技巧 CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白(就是普通是鼠标指针) | pointer 小手 | move 移动 | text 文本 鼠标放我身上查看效果哦： <ul> <li styl
多行文本超出设置行就隐藏并且显示省略号
weixin_30421525的博客
05-15 427
overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性，需要记得。 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ CSS3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹...
Css文本溢出省略号显示和鼠标移动显示全部内容
toString的博客
03-11 2581
1.给div增加css属性: style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" 2.给div增加title属性: title:"需要鼠标移动该div显示的文本内容"
css设置关于溢出隐藏
Y_东东的博客
09-01 6250
1.如果需要实现标签中的文本内容的溢出隐藏显示省略号 在父元素设置一个宽度 在子元素内设置{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} 这三个属性就可以了， 2.如果需要实现标签内中的标签实现溢出隐藏显示省略号 父元素使用块元素，子元素使用行内元素比如em标签， 然后在子元素内设置...
CSS之元素的显示与隐藏、CSS用户界面样式、溢出文字处理
zl的博客
04-21 762
元素显示隐藏的目的： 主要目的是让一个元素在页面中消失，但是不是在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，依然会出现。 display显示 display设置或检索对象是否及如何显示。 display：none 隐藏对象，与它相反的是display：block，除了转换为块级元素之外，同时还有显示元素的意思。 特点：隐藏之后不再保留位置。 visibil...
【CSS】css实现移动端或手机网页上溢出滚动但隐藏滚动条的原理和方法
Mickeymouse
03-23 9932
要实现可以滚动但又不显示滚动条的原理很简单，只要在外面再套一个盒子，想办法把滚动条挤出盒子外隐藏掉就好了下面以导航栏允许横向滚动不显示滚动条的方法为例：&lt;div style="overflow:hidden;height:60px;"&gt; &lt;div style="overflow-x:scroll;width:400px;"&gt; &lt;ul style="width:8...
HTML5+CSS3之隐藏文本内容鼠标悬停显示所有
热门推荐
weixin_48917225的博客
04-17 1万+
在我们进行网页开发时出现有下列需求的时候，我们来看看怎么才可以做到。 1.文本内容在一行或者几行显示 2.限定当文本内容超出限制后隐藏显示 3.用省略号代替隐藏内容 4.当鼠标悬停在隐藏文本内容上时，显示所有内容。 第一步：设定隐藏显示的css样式 /*单行隐藏显示的样式设定*/ .hiddenMemo{ width:100px; /*设置隐藏显示的最大宽度*/ white-space:nowrap; /* 设置文字在一行显示，不能换行 */ overflow: hidden
鼠标悬浮显示隐藏溢出的文本
06-01
4. 在鼠标悬浮时，使用 CSS 伪类:hover 和 JavaScript 实现文本的显示和隐藏。 具体实现方式可以参考以下代码： HTML 代码： ```html 这是一个很长很长的文本，当鼠标悬浮时可以显示全部内容"> 这是一个很长很长...
CSS如何实现文字隐藏 超出文字隐藏 鼠标移入显示
鸡血博客
01-14 2416
CSS----- 实现箭头 表单结构 文本溢出处理
我好像还记得 愿望是什么
12-12 354
实现箭头 原理： 定位两个三角形 （边框） <style> .box { width: 50px; height: 50px; /* background-color: pink; */ position: relative; margin-left: 100px; margin-t
标签设置溢出隐藏后怎样鼠标滑过显示标题全部内容
小韩的博客
12-18 2612
标签设置溢出隐藏后怎样鼠标滑过显示标题全部内容 title属性 利用标签自带title属性，将title属性设置与文件名称相同即能实现鼠标滑过显示标题的全部内容。 这是一个demo &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt;
超出部分隐藏，鼠标移上去显示全部
l741938507的博客
03-03 1552
<span style='width:100%;display:inline-block;text-overflow:ellipsis;overflow:hidden;word-break: keep-all;' title='xxxxxxxxxxxxxxxxxxxxxxxxxxxx'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
css(显示与隐藏、溢出)
Himalaya-hsf
08-26 4269
显示与隐藏、溢出 知识点1.visibility 显示隐藏 设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。这意味着元素仍占据其本来的空间，不过可以完全不可见。 visibility:hidden与display:none的区别 visibility:hidden设置不可见的元素也会占据页面上的空间。 display:none设置元素的不可见...
在html中文本框溢出处理,css中文字超出文本框，溢出部分用点点点表示
weixin_39707851的博客
06-05 421
git使用相关文章的链接http://search.fishc.com/cse/search?s=14988791857133860392&q=git&partner=discuz http://bbs.fi ...Runner站立会议07开会时间:21.10~21.30 地点:基教负一 今天做了什么:看网上下载的日历代码 明天准备做什么:继续看代码 遇到的困难:下载的代码有很多看...
css实现四角边框
最新发布
freedms的博客
09-24 320
【代码】css实现四角边框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值