text-decoration

4 CSS文本样式属性

末鹿安然 提交于 2019-12-01 13:24:31
CSS文本样式属性 line-height 行间距 ine-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px 一般情况下,行距比字号大7.8像素左右就可以了 text-align 水平对齐方式 left:左对齐(默认值) right:右对齐 center:居中对齐 是让盒子里面的内容水平居中, 而不是让盒子居中对齐 text-indent 首行缩进 text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。 1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度 text-decoration 文本装饰 text-decoration 通常用于给链接修改装饰效果 值 描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 inherit 继承父元素的text-decoration属性的值。 来源: https://www.cnblogs.com/shibojie/p/11688280

上划线、中划线(删除线)、下划线 | 文本格式化标签。

好久不见. 提交于 2019-12-01 12:34:44
CSS:   上划线:text-decoration:overline   中划线:text-decoration:line-through   下划线:text-decoration:underline   例子: < h2 style="text-decoration:overline" >我要加上划线</ h2 > HTML:   上划线:null   中划线:<del>¥59</del>   下划线: < u >这是下划线</ u > // 已经不建议使用,用样式代替   其它文本格式化标签: <b> 定义粗体文本。 <big> 定义大号字。 <em> 定义着重文字。 <i> 定义斜体字。 <small> 定义小号字。 <strong> 定义加重语气。 <sub> 定义下标字。 <sup> 定义上标字。 <ins> 定义插入字。 <del> 定义删除字。 <s> 不赞成使用。使用 <del> 代替。 <strike> 不赞成使用。使用 <del> 代替。 <u> 不赞成使用。使用样式(style)代替。    来源: https://www.cnblogs.com/MrZhujl/p/11685937.html

3、SASS - CSS的功能扩展

倖福魔咒の 提交于 2019-12-01 09:57:37
1、嵌套规则 sass是允许在当前css样式中嵌套另一套css样式,内层样式将外层的选择器作为父选择器;例如: #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } 编译为: #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } 2、父选择器 & 有时候需要直接使用嵌套外层的夫选择器。当给某个元素设置hover样式时,可以用 & 代表嵌套外层的父选择器。例如: a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } } 编译为: a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; } &

Web全栈-文本属性

风流意气都作罢 提交于 2019-12-01 07:23:07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性</title> <style> p{ text-decoration: none; text-align: left; text-indent: 2em; } a{ text-decoration: none; } </style> </head> <body> <!-- 1.文本装饰的属性 格式:text-decoration: underline; 取值: underline 下划线 line-through 删除线 overline 上划线 none 什么都没有, 最常见的用途就是用于去掉超链接的下划线 快捷键: td text-decoration: none; tdu text-decoration: underline; tdl text-decoration: line-through; tdo text-decoration: overline; 2.文本水平对齐的属性 格式: text-align: right; 取值: left 左 right 右 center 中 快捷键 ta text-align: left; tar text-align: right; tac text-align: center; 3

CSS属性相关

蹲街弑〆低调 提交于 2019-12-01 04:56:02
1.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 2.字体属性 文字字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。 实例: body {font-family:"Microsotf Yahei","微软雅黑","Arial",sans-serif} 字体大小 p{font-size:14px;} 如果设置成inherit表示继承父元素的字体大小值. 字重(粗细) font-weight用来设置字体的字重(粗细) 值 描述 normal 标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值,默认值, 文本颜色 颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定: 十六进制值 - 如: # FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。 3.文字属性 文字对齐 text-align

a标签去除默认样式

爱⌒轻易说出口 提交于 2019-11-29 18:20:44
/*包含以下四种的链接*/ a { text-decoration: none; } /*正常的未被访问过的链接*/ a:link { text-decoration: none; } /*已经访问过的链接*/ a:visited { text-decoration: none; } /*鼠标划过(停留)的链接*/ a:hover { text-decoration: none; } /* 正在点击的链接*/ a:active { text-decoration: none; } 来源: https://www.cnblogs.com/PHP0222wangdong/p/11360624.html

web前端入门到实战:CSS text-decoration

狂风中的少年 提交于 2019-11-28 11:06:09
在改一个项目的时候却遇到了一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了,通常会用在移除超链接的底线、或一些特殊强调的效果里头,但是这么容易的属性,为什么会莫名其妙呢?就让我们继续看下去~ 项目里遇到的问题 在我的项目里头遇到的问题如下,一个div里头包了一个span,我要“除了这个span之外,其他所有的文字都有底线”,通常看到这个问题一定觉得很简单,只要照下面的CSS写法一定可以达成: div{ font-size:20px; text-decoration: underline; } div span{ text-decoration: none; } 理论上应该前一段会有底线,后一段会没有底线,但是实际上却是一条底线通到底…… 不过我不信邪,怕是哪里CSS权重出了问题,直接加上万恶的important试试看,结果发现结果还是一模一样!天呀!是见到鬼了吗! web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频) div{ font-size:20px; text-decoration: underline; } div span{ text-decoration: none!important; }

去除 a标签的默认样式,以及 a 标签的灵活应用

不羁的心 提交于 2019-11-27 15:38:51
a 标签自己比较少用,但是平时难免会使用到,随手记录一下 去除 a标签的默认样式 a {text-decoration:none;color: black;} a:hover{text-decoration:none; cursor:pointer}/*a标签鼠标经过mouseover时的样式*/ a:link{text-decoration:none; cursor:pointer;} /*a标签未访问时的样式*/ a:visited{text-decoration: overline ; cursor:pointer}/*a标签访问过之后样式*/ a:active{text-decoration:overline;cursor:pointer}/*a标签鼠标按下mousedown时的样式*/ 在 a 标签中,有个容易被忽视的 “ :visited ” 。 a:visited从使用意义来说,是指用户访问过某一个链接之后,该链接的a标签将呈现对应:visited属性定义的样式。 这里的重点在于链接,经过测试发现 <html> <head> <style> a:link{ color:blue; } a:visited{ color:red; } </style> </head> <body> <a id="a1" href="#test1"></a> <a id="a2" href

前端之CSS重点知识

我的未来我决定 提交于 2019-11-27 02:49:25
字体属性 字体大小:font_size <-! rgba调整透明度-></-!> <div style="background: rgba(125,125,111,0.5)">aaaaa</div> 文字属性 text-align 元素中的文本居中对齐:text-align:center; 元素中的文本右对齐:text-align:right; 元素中的文本左对齐:text-align:left; 元素中的文本两端对齐:text-align:justify; text-decoration 默认标准文本(a标签去除下划线):text-decoration:none 定义文本下的一条线:text-decoration:underline 定义文本上的一条线:text-decoration:overline 定义穿过文本下的一条线 :text-decoration:line_through 首行缩进:text-indent:32px 背景属性 background-color: red; /*背景图片*/ background-image: url('1.jpg'); background-repeat:repeat(默认):背景图片平铺排满整个网页 background-repeat:no-repeat:背景图片不平铺 边框 边框宽度:border-width:1px 边框样式

css基础

心不动则不痛 提交于 2019-11-26 18:26:45
添加样式发噶发: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) < link rel = " stylesheet " type = " text/css " href = " mystyle.css " > 多重样式: 外部样式 h3 { color:red; text-align:left; font-size:8pt; } 内部样式: h3 { text-align:right; font-size:20pt; } 最后的实际样式 color:red; text-align:right; font-size:20pt; 优先级: 内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式 优先级顺序 下列是一份优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式",那么"直接样式"就是一个标签直接拥有的属性 link 属于