css基础1-下划线、文本阴影、选择器、继承性、层叠性（数权重）

最新推荐文章于 2023-07-22 14:43:15 发布

erdouzhang

最新推荐文章于 2023-07-22 14:43:15 发布

阅读量821

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/erdouzhang/article/details/68923082

版权

本文介绍了CSS的基础知识，包括下划线、文本阴影效果，以及各种选择器的使用，如交集选择器、儿子选择器和序选择器。同时，探讨了CSS的继承性和层叠性，详细阐述了如何根据权重来解决样式冲突问题，强调了在不同浏览器中的兼容性问题。

摘要由CSDN通过智能技术生成

html是超文本标记语言从语义的角度描述页面结构
css是层叠样式表从审美角度负责页面样式
js javascript 从交互的角度你描述页面的行为
normal是正常的意思，不加粗，不倾斜

font-weight: normal;
font-style: normal;/*快捷键fsn*/

下划线

text-decoration: underline;/*添加下划线 快捷键tdu*/
text-decoration: none;/*去掉下划线 快捷键tdn*/

文本阴影（CSS3内容，IE6、7、8不兼容）

text-shadow

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

erdouzhang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS选择器与权重计算（详细）

weixin_44164982的博客

07-09

1016

在前端三大基础中，html负责结构，css负责样式，js负责行为。css写在head标签里面，容器style标签。先写选择器，然后写大括号，大括号里面是样式。常见的选择器类型有以下几种： 1、标签选择器（无论嵌套多少层都能找到）就是用标签名来当做选择器。 1）所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 2）不管这个标签藏的多深，都能够被选择上。 3）选择的是所有的，而不是某一个。所以是共性，而不是特性。例如，大多数网站的a标签都设置了去掉了下划线的效..

Html/CSS前端实现文字边框阴影效果

09-27

在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影。下面脚本之家小编给大家带来了Html/CSS前端实现文字边框阴影效果，需要的朋友参考下吧

参与评论您还未登录，请先登录后发表或查看评论

html怎么设置横线阴影,如何用css把某div层的链接下划线做成虚线或阴影

weixin_35578381的博客

06-16

830

如何用css把某div层的链接下划线做成虚线或阴影飞龙更新于 2009-05-26 01:32 加入书签 CTRL+D 有 102 个朋友来过看到有些网站的链接悬停下划线是虚线，咦这是怎么做的？在调节链接的text-decoration时，怎么就没发现虚线这个属性值啊？查阅有关资料，原来不是用text-decoration，而是用border-bottom的属性做的css样式。又有人问，如果不想把...

html下划线无阴影效果,CSS | 实现下划线的N个姿势

weixin_29484035的博客

06-03

532

下划线一般在文档中常被用作增强注意，在过去打字机时代，下划线成为了唯一的一种文字强调方式，具体的操作方法是在已经打出来的文字上面退格，再在同样的地方打出下划线。而在网页中，可以链接的文字(超链接)下面一般都有下划线。在制作页面的时候，当链接需要下划线的时候，UI开发很自然的会想到使用text-decoration属性来显示，例如这样：以上显示的是设计稿和浏览器渲染的实际效果，我们会发现浏览器渲染的...

html阴影字与光晕字,光晕感的文字，带下划线的特效等 css 代码

weixin_36457551的博客

06-27

483

.span1 {box-sizing: border-box;color: rgb(172, 29, 16);max-width: 100%;overflow-wrap: break-word;text-shadow: 2px 2px 10px rgb(0, 112, 192);}.div1 {background: rgb(255, 255, 255) none repeat scroll 0 ...

HTML CSS添加阴影

RedWolf-blog

02-06

1万+

对原答案进行简单排版同时记录一下… html> head> meta charset="utf-8"> title>css怎么给4个边框添加阴影title> style type="text/css"> span{ box-shadow: 2px 4px 6px #000; } s

css----层叠样式表详细知识点大全

Darlingmi的博客

04-16

1838

css—层叠样式表一：结构和表现分离层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。网页中所有的样式都由css来进行设置，即结构和样式分离。二：应用css的方法 1：页面嵌入式常放在head和body之间。 <style type="text/css"> Css的样式规则 </style>

CSS基础一（三种引入规则以及常用选择器和文本基础属性）

最新发布

mandarin_blog的博客

07-22

380

CSS ( Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS 选择器（超级详细，欢迎补充）

冷兮雪的博客

11-25

3748

css样式是由若干条样式规则组成的，这样的样式规则可以应用到不同的元素或文档上。css规则由两部分组成：选择器和声明语句。选择器：selector用来指点需要设置样式的元素或文档（即HTML对象）声明语句：通过属性（property）和属性值（value）描述样式的具体内容，多组声明语句用分号（；）分隔。声明语句不分先后顺序。今天我们重点来介绍css中的选择器。

使用css实现动态下划线效果

CSU_Zipple的博客

03-17

5989

效果展示而且下划线是与超链接同色的….大家可以自行测试… 实现方法这个效果我们可以很方便的使用css伪元素来实现。主要是用到了transform 中的scale来缩放伪元素，达到拉长伪元素（下划线）的结果。同时使用transform-origin来控制缩放方向，下面的源码复制即可使用…. 源码如下 dom: <a href="#" class="supe...

CSS下划线与文字间距，下划线粗细以及下划线颜色的设置

weixin_38091374的博客

02-28

1万+

最开始的时候了解下划线的属性是： text-decoration:underline; 1 但是，很遗憾的是，对于设计做的下划线用浏览器默认属性样式很难调整，使用这个属性并不能调整下划线与文字的间距，而且对于下划线的颜色也不好调整，而使用<u></u>这个标签也是同样的效果。例子： <!DOCTYPE html> <html> <...

美化下划线

taotaomin99的博客

06-01

2880

在CSS中，众所周知使用text-decoration:underline;可以为任何文本添加下划线的效果。不过我们一般都在初始化里把a标签的下划线去掉(text-decoration : none )，有没有想过美化这些下滑下划线呢~理想的场景中，强调使用下划线，它应该做到以下几点： 下划线应该位于文本基线（baseline）下方 下划线应该可以跳过下行字母能改变下线线的颜色、粗细和样式横跨文

使用NSMutableAttributedString添加下划线、删除线、阴影、填充、不同字体颜色等

iCodeWoods

04-26

1万+

在iOS开发中，有时会遇到需要添加下划线，或者设置字符串中某几个字的颜色的情况，最常见的栗子就是注册页面，如图所示：几乎所有注册页面中都会出现这么一句话 “点击下一步表示您已同意《用户服务协议》”，而且可以看到，“《用户服务协议》”几个字是橙色的，并且它们下面还有下划线。这是怎么实现的呢？有的同学可能会说：“不同颜色就设置两个label，让左边的label显示前半句并设置为

前端----css的继承性和层叠性

weixin_30770783的博客

08-09

css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是有一些属性是可以继承下来的: color , font-* , text-* ,line-* . 主要是文本级的标签元素　　　　像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位) 不能继承层叠性层叠性:权重的标签...

Flutter appBar隐藏下划线或者投影，阴影

helang296479893的专栏

07-25

2547

如题：直接使用 elevation:0 这个和Android开发类似的，效果图就不上了，因为过于简单

css实现文字自定义下划线