CSS--样式汇总 深藏阁楼爱情的钟 2021-09-27 05:30 345阅读 0赞 * 前言 * 内容 * 文字样式 * 图片样式 * 页面样式 * 表格和表单样式 * 超链接样式 * 总结 * end # 前言 # CSS内容说多不多,说少也不少,所以我只能将我自己了解到的总结到博客中,希望能给各位看官带来收获。 # 内容 # ## 文字样式 ## p{ font-family:Arial, Helvetica, sans-serif; } 表示如果用户端有Arial字体就使用,没有就使用Helvetica字体,没有Helvetica字体使用sans-serif字体 <table> <thead> <tr> <th>描述</th> <th>表达式</th> <th>参数</th> </tr> </thead> <tbody> <tr> <td>字</td> <td>font</td> <td>14px 幼圆</td> </tr> <tr> <td>字体</td> <td>font-family</td> <td>幼圆/雅黑/console</td> </tr> <tr> <td>大小</td> <td>font-size</td> <td>5px</td> </tr> <tr> <td>颜色</td> <td>color</td> <td>yellow/#red/#000000</td> </tr> <tr> <td>粗细</td> <td>font-weight</td> <td>bold/100</td> </tr> <tr> <td>斜体</td> <td>font-style</td> <td></td> </tr> <tr> <td>下划线</td> <td>text-decoration</td> <td></td> </tr> <tr> <td>大小写</td> <td>text-transform</td> <td></td> </tr> <tr> <td>对齐</td> <td>text-align</td> <td></td> </tr> <tr> <td>浮点</td> <td>float</td> <td></td> </tr> <tr> <td>间隔</td> <td>padding-left/right</td> <td></td> </tr> <tr> <td>间距</td> <td>padding</td> <td>5px/5px 6px 1px 6px</td> </tr> <tr> <td>外边距</td> <td>margin</td> <td>5px</td> </tr> <tr> <td>行高</td> <td>ling-height</td> <td>1.5em</td> </tr> </tbody> </table> ## 图片样式 ## 图片中的样式大部分和文字样式一样,比如:图片对齐与文字对齐一模一样; <table> <thead> <tr> <th>描述</th> <th>表达式</th> </tr> </thead> <tbody> <tr> <td>边框</td> <td>border</td> </tr> <tr> <td>边框样式</td> <td>border-style</td> </tr> <tr> <td>边框颜色</td> <td>border-color</td> </tr> <tr> <td>边框宽度</td> <td>border-width</td> </tr> <tr> <td>边框左边</td> <td>border-left</td> </tr> <tr> <td>边框右边</td> <td>border-right</td> </tr> </tbody> </table> ## 页面样式 ## <table> <thead> <tr> <th>描述</th> <th>表达式</th> <th>参数</th> </tr> </thead> <tbody> <tr> <td>背景颜色</td> <td>background-color</td> <td>yellow/#red/#000000</td> </tr> <tr> <td>背景图片</td> <td>background-image</td> <td>url(图片地址)</td> </tr> <tr> <td>重复方向</td> <td>background-repeat</td> <td>repeat-y/repeat-x/no-repeat</td> </tr> <tr> <td>图片位置</td> <td>background-position</td> <td>bottom right</td> </tr> <tr> <td>固定位置</td> <td>background-attachment</td> <td>fixed</td> </tr> </tbody> </table> ## 表格和表单样式 ## <table> <thead> <tr> <th>描述</th> <th>表达式</th> <th>参数</th> </tr> </thead> <tbody> <tr> <td>表格</td> <td>table</td> <td></td> </tr> <tr> <td>表格标题</td> <td>caption</td> <td></td> </tr> <tr> <td>行</td> <td>tr</td> <td></td> </tr> <tr> <td>第一行</td> <td>th</td> <td></td> </tr> <tr> <td>内容</td> <td>td</td> <td></td> </tr> <tr> <td>表格边框</td> <td>border</td> <td>1px/1px solid #000</td> </tr> <tr> <td>边框重叠</td> <td>border-collapse</td> <td></td> </tr> <tr> <td>宽度</td> <td>widht</td> <td>5px</td> </tr> <tr> <td>高度</td> <td>height</td> <td>5px</td> </tr> <tr> <td>背景颜色</td> <td>background-color</td> <td>000/yellow/red/transparent</td> </tr> <tr> <td>下划线</td> <td>border-bottom</td> <td>1px solid #000</td> </tr> <tr> <td>外边距</td> <td>margin</td> <td>0px</td> </tr> <tr> <td>间距</td> <td>padding</td> <td>0px</td> </tr> </tbody> </table> ## 超链接样式 ## <table> <thead> <tr> <th>描述</th> <th>表达式</th> <th>参数</th> </tr> </thead> <tbody> <tr> <td>背景图片</td> <td>background</td> <td></td> </tr> <tr> <td>超链接正常状态下</td> <td>a:link</td> <td></td> </tr> <tr> <td>访问过的超链接</td> <td>a:visited</td> <td></td> </tr> <tr> <td>鼠标经过时的超链接</td> <td>a:hover</td> <td></td> </tr> <tr> <td>下划线</td> <td>text-decoration</td> <td>none/underline</td> </tr> </tbody> </table> # 总结 # 参数方面需要多多总结,在实际运用中参数的变式多种多样,所以需要多多练习练习。 # end # 谢谢您的阅读!
相关 CSS样式 一、概念 CSS(Cascading Style Sheets) 层叠样式表,叫级联样式表,简称样式表。 文件后缀.css。 语法:CSS规则由两个主要的部分构成:选 ゞ 浴缸里的玫瑰/ 2024年03月23日 13:29/ 0 赞/ 69 阅读
相关 CSS样式 CSS三种引入方式 行内样式 行内样式:只在一个标签中起作用 <!-- 1.行内样式:写在某个标签的style属性中 特点:只对这个标签有 短命女/ 2023年10月02日 19:07/ 0 赞/ 24 阅读
相关 CSS-常见外观(文本)样式属性的用法汇总 color `color: f00;` 用于设置文本的颜色 <table> <thead> <tr> <th>属性值</th> <th>描述< 谁借莪1个温暖的怀抱¢/ 2023年08月17日 17:15/ 0 赞/ 142 阅读
相关 CSS样式 1、CSS介绍 CSS指层叠式表,组成成分: 选择器: 改变样式的HTML元素 一条或多条声明:每条声明由一个属性和一个值组成,使用花括号来包围声明,属性与值之间使 叁歲伎倆/ 2023年06月25日 03:04/ 0 赞/ 21 阅读
相关 CSS样式 一、内部样式表 1、选择器: <html> <head> <title>内部样式表</title> <style type= 怼烎@/ 2022年06月12日 11:15/ 0 赞/ 360 阅读
相关 CSS样式引用方式汇总 1、外部文件引用方式;(推荐使用) 2、使用@import引用外部CSS文件; 3、内部文档头方式也叫内嵌法调用; 4、直接插入式也叫行内样式。 ╰半夏微凉°/ 2022年06月09日 05:08/ 0 赞/ 351 阅读
相关 css样式 1.div下边框虚线 <html> <head> <style type="text/css"> dv{ border-bot た 入场券/ 2022年06月05日 05:25/ 0 赞/ 269 阅读
相关 CSS样式 设置透明背景 background-color: transparent; div靠右或靠左显示 float:right float:left 以你之姓@/ 2021年09月25日 08:24/ 0 赞/ 489 阅读
还没有评论,来说两句吧...