text-decoration | 易学教程

前端---CSS---网页美化元素

阅读更多关于前端---CSS---网页美化元素

1.为什么要进行网页美化有效的传递页面信息美化网页，页面漂亮，才能吸引用户凸显页面的主题提高用户的体验 span标签：重点要突出的字，使用 span 套起来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #title1 { font-size : 50px ; } </style> </head> <body> 欢迎学习 <span id= "title1" >Java</span> </body> </html> 2.字体样式  <style> body { font-family : "Arial Black" , 楷体 ; color : #a13d30 ; } h1 { font-size : 50px ; } .p1 { font-weight : bolder ; } </style> 3.文本样式 1、颜色 color rgb rgba 2、文本对齐的方式 text-align = center 3、首行缩进 text-indent: 2em 4、行高 line-height：

【练习】HTML+CSS

阅读更多关于【练习】HTML+CSS

【练习】HTML+CSS 作业要求1 京东首页轮播图，效果如下 jd轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JD轮播图</title> <style> .img_border { width: 790px; height: 340px; border: 1px solid blue; margin: 0 auto; position: relative; } ul.img{ list-style: none; padding: 0; } ul li{ position: absolute; left: 0; top:0; } .img_cont { display: none; } .right_button,.left_button{ width: 30px; height: 100px; /*background-color: #f4bf42;*/ font-size: 40px; text-align: center; line-height: 100px; color:white; } .right_button { position: absolute; right: 0; top:120px; text-decoration: none; } .left

CSS： text-decoration

阅读更多关于 CSS： text-decoration

在改一个项目的时候却遇到了一个莫名其妙的属性：text-decoration，这个属性，其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了，通常会用在移除超链接的底线、或一些特殊强调的效果里头，但是这么容易的属性，为什么会莫名其妙呢？就让我们继续看下去~ 项目里遇到的问题在我的项目里头遇到的问题如下，一个div里头包了一个span，我要“除了这个span之外，其他所有的文字都有底线”，通常看到这个问题一定觉得很简单，只要照下面的CSS写法一定可以达成： div{ font-size:20px; text-decoration: underline; } div span{ text-decoration: none; } 理论上应该前一段会有底线，后一段会没有底线，但是实际上却是一条底线通到底…… 不过我不信邪，怕是哪里CSS权重出了问题，直接加上万恶的important试试看，结果发现结果还是一模一样！天呀！是见到鬼了吗！ div{ font-size:20px; text-decoration: underline; } div span{ text-decoration: none!important; } 由于实在是太诡异了，必须要查明原因，于是我换个角度思考，来改一下颜色试试看吧！一改才发现不得了，为什么底线会是红色的呀？！ div{ font-size

CSS选择器、字体/文本、背景

阅读更多关于 CSS选择器、字体/文本、背景

CSS的基本使用直接写在标签内 <p style="color: red; font-size: 40px;">段落</p> 写在 style 标签内 <style> span{ color: aquamarine; } </style> 使用外部 .css 文件 @import （不建议使用此方式） <style> @import "font_css.css"; </style> link <link rel="stylesheet" href="font_css.css"> CSS选择器优先级：id选择器 > class 选择器 > 标签选择器标签选择器：标签名{} class选择器（“.”符号）：.class名{} id选择器（“#”符号，id 选择器唯一）：#id名{} 群组选择器（“，”逗号分开）：群组选择器可以同时选择多个标签 p,div{...} 层次选择器子代（符号“>”）：div>p{...} 后代 (空格)：div p {...} 相邻（符号“+”）：#p_id~span {...} 兄弟（符号“~”）：#p_id~p {...} 伪类选择器（符号“:”） link：未访问过的样式 a:link {...} visited：访问过后的样式 a:visited {...} hover：划过的样式 a:hover {...} active

CSS Text文本格式

阅读更多关于 CSS Text文本格式

text formatting This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "尝试一下" link. Text Color 颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如"＃FF0000" 一个RGB值 - "RGB（255,0,0）" 颜色的名称 - 如"红" 参阅 CSS 颜色值查看完整的颜色值。一个网页的背景颜色是指在主体内的选择： body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} 对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。文本的对齐方式文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐. 当text-align设置为"justify"

html5和css 初步学者应用笔记

阅读更多关于 html5和css 初步学者应用笔记

HTML 超文本标记语言标签：是由一对 <> 构成的，有开始、有结束。 html架构： <!doctype html> 网页的名称、网页的样式css、网页相关的js、网页的编码书写要学习的标签（内容）例子1： <!doctype html> hello world hello world 例子2：设置中文编码 !doctype html> hello world 哈哈哈（1）网页的编码（2）网页文件的编码标签：块标签：单独占一行 1.标题标签从1到6 文字大小依次变小 2.水平线 3.段落标签 4.无序列表 5.div 布局标签 6.换行标签行标签：不单独占一行 7.span 标签对文字起强调的作用 8.a标签（1）链接外网内网（2）锚链接链接到一个确定的位置位置锚点去锚点回到顶部 (3)空链接 9.图片标签 10.音频标签 <audio src="音频的地址" autoplay controls > 11.视频标签 <video src="视频的地址" autoplay controls> CSS层叠样式表： 1.行内样式表在标签的开始元素里面添加 style="" 属性在style="样式名:样式值;样式名:样式值;样式名:样式值;...." 字体样式：字体粗细 font-weight:bold; 字体大小 font

CSS 文本格式

阅读更多关于 CSS 文本格式

CSS 文本格式文本格式 This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "尝试一下" link. 文本颜色颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如: ＃FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 参阅 CSS 颜色值查看完整的颜色值。一个网页的背景颜色是指在主体内的选择：实例 body { color: red ; } h1 { color: #00ff00 ; } h2 { color: rgb ( 255 , 0 , 0 ) ; } 尝试一下 » 对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。文本的对齐方式文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐. 当text

CSS 链接

阅读更多关于 CSS 链接

不同的链接可以有不同的样式。链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻实例 a :link { color: #000000 ; } /* 未访问链接 */ a :visited { color: #00FF00 ; } /* 已访问链接 */ a :hover { color: #FF00FF ; } /* 鼠标移动到链接上 */ a :active { color: #0000FF ; } /* 鼠标点击时 */ 尝试一下 » 当设置为若干链路状态的样式，也有一些顺序规则： a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面常见的链接样式根据上述链接的颜色变化的例子，看它是在什么状态。让我们通过一些其他常见的方式转到链接样式：文本修饰 text-decoration 属性主要用于删除链接中的下划线：实例 a :link { text-decoration: none ; } a :visited { text-decoration:

a标签去除默认样式

阅读更多关于 a标签去除默认样式

/*包含以下四种的链接*/ a { text - decoration : none ; } /*正常的未被访问过的链接*/ a : link { text - decoration : none ; } /*已经访问过的链接*/ a : visited { text - decoration : none ; } /*鼠标划过(停留)的链接*/ a : hover { text - decoration : none ; } /* 正在点击的链接*/ a : active { text - decoration : none ; } 来源：博客园作者：栋H栋链接：https://www.cnblogs.com/PHP0222wangdong/p/11360624.html

CSS鏍峰紡鍜屽睘鎬?/span>

阅读更多关于 CSS鏍峰紡鍜屽睘鎬?/span>

CSS鏍峰紡 css鏍峰紡鍒嗕负涓夌锛氬唴閮ㄦ牱寮忋€佽鍐呭紡锛堝唴鑱旀牱寮忥級銆佸閮ㄦ牱寮忥紙澶栭摼寮忥級鍐呴儴鏍峰紡锛欬/li> css鏍峰紡鏀惧湪head鍐匋/p> 琛屽唴寮忥紙鍐呰仈鏍峰紡锛夛細 css鏍峰紡鏀惧湪鏍囩鍐匋/p> 澶栭儴鏍峰紡锛堝閾惧紡锛夛細鏂板缓涓€涓猚ss鏍峰紡鏂囦欢锛屽鍥近/p> 鍦╤ead閲岃緭鍏ink鍐嶆寜涓婽ab閿摼鎺ュ閮ㄧ殑css鏍峰紡 CSS閫夋嫨鍣?/h2> 鈶犳爣绛鹃€夋嫨鍣紙鍏冪礌閫夋嫨鍣級鈶＄被閫夋嫨鍣?/h3> 娉ㄦ剰锛氱被鍚嶅墠闈㈣鍔犱釜鑻辨枃鐨勭偣鍙饵/strong> 鈶㈠绫诲悕閫夋嫨鍣?/span> 璇硶锛?lt;鏍囩鍚 class=鈥滅被鍚? 绫诲悕2 ...">鏍囩鍚?gt;銆€銆€ 娉ㄦ剰锛氱被鍚?鍜岀被鍚?鏈夌┖鏍奸殧寮€锛屼笖浜岃€呬负涓嶅悓鐨勭被鈻秉span style="color: #000000;"> css鏍峰紡鏄剧ず鏁堟灉璺焗 tml鍏冪礌涓殑绫诲悕鍏堝悗椤哄簭鏃犲叧锛屽彈css鏍峰紡涔﹀啓鐨勪笂涓嬮『搴忔湁鍏颤/span> 鈶d閫夋嫨鍣?/span> 娉ㄦ剰锛歩d鍚嶅墠闈㈢殑#涓嶈兘婕忔帀锛屼笖id閫夋嫨鍣ㄤ笉鍏佽閲嶅鍙兘浣跨敤涓€娆狘/strong> 鈶ら€氶厤绗﹂€夋嫨鍣?/span> 鍖归厤椤甸潰鐨勬墍鏈夊厓绱燑/span> css鏍峰紡灞炴€?

订阅 text-decoration