CSS背景以及文本
css设置背景:
<style type="text/css">
/*background-image: 直接设置x,y重复而且平铺整个body*/
/*下面两句的功能图片在昨边居中*/
/*background-position:left;*/
/*background-attachment:fixed;*/
body{
background-color: gray;
background-image: url(123.png);
background-repeat:no-repeat;
background-attachment:fixed;
/*background-position:10% 0%; 第一个参数50%水平居中 第二个参数50%垂直居中*/
background-position:210px 110px;
}
/*p.flower p.中间不能有空格*/
p.flower { background-image: url(bubbleMine.jpg); } </style>
css设置文本:
/*padding内边距 text-indent 4em:首行缩进,可以为负数 ,也可以是百分数,缩进父元素的%数*/
p {background-color: yellow; padding: 20px; text-indent: 4em;}
/*p.flower p.中间不能有空格*/
p.flower { background-image: url(bubbleMine.jpg); text-align: justify; }
文本间隔:
h4 {letter-spacing: 20px}
默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。
h1 {text-transform: uppercase}
nderline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记。
a {text-decoration: none;}
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线,则规则如下:如果一个元素有两个值,不会叠加,优先的会期待之前的
a:link a:visited {text-decoration: underline overline;}
white-space:
p {white-space: normal;}
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。
font-family:可以输入多个,从第一个开始,优先级,都好隔开
h1 {font-family: Georgia, serif;}
font-sytle:font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。italic倾斜, 一般italic和oblique在浏览器中没有区别
p.oblique {font-style:oblique;}
全部字母转大写,而且第一个单词的第一个字符大一些
p {font-variant:small-caps;}
font-weight:关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
p.thick {font-weight:bold;}
h1 {font-size:60px;}
列表样式
/*none disc circle decimal decimal-leading-zero square upper-roman lower-alpha*/
/*ul {list-style-type : square}*/
系统的图片不能满足我们的需要
ul li {list-style-image : url(bubbleMine.jpg)}
/*该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。*/
/*li {list-style : url(example.gif) square inside}*/
/*list-style-position*/
ul
{
list-style-position:inside;
}
table
border-collapse 属性设置是否将表格边框折叠为单一边框:
table
{
border-collapse:collapse;
}
table
{
width:100%;
}
表格标题
<caption>This is a caption</caption>
表格水平间距,垂直间距
border-spacing: 10px 50px
隐藏空的cell数据
empty-cells: hide;
边框:
outline-color outline-style outline-width
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
dotted dashed solid double groove ridge inset outset IE8
p
{
border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;
}
CSS背景以及文本的更多相关文章
- 重温CSS之背景、文本样式
CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...
- CSS基础(背景、文本、列表、表格、轮廓)
CSS 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. backgr ...
- CSS属性定义 文本修饰 边框效果 背景修饰
一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...
- CSS 背景
CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背影效果: background-color background-image background-repeat background- ...
- CSS 背景实例
CSS 背景属性属性 描述background 简写属性,作用是将背景属性设置在一个声明中.background-attachment 背景图像是否固定或者随着页面的其余部分滚动.background ...
- css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边 一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...
- CSS背景图像的简单响应
本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...
- CSS Text(文本)
CSS Text(文本) 一.文本颜色 color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0 ...
- 认识CSS中css背景样式设置
前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...
随机推荐
- 请问C#中string是值传递还是引用传递?
https://www.cnblogs.com/xiangniu/archive/2011/08/17/2143486.html 学了这么久,终于弄明白了... 是引用传递 但是string又有值传递 ...
- Android Studio右下角不显示当前branch名称
当一个project刚从git server端clone下来并open后,或许你会发如今Android Studio的右下角看不到当前是哪个branch的信息.例如以下图: 原因分析:不显示的原因是由 ...
- 超全面的JavaWeb笔记day20<监听器&国际化>
JavaWeb监听器 三大组件: l Servlet l Listener l Filter Listener:监听器 1. 初次相见:AWT 2. 二次相见:SAX 监听器: l 它是一个接口,内容 ...
- python2.0_s12_day21_web聊天室一
本节内容: 项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以 ...
- Redis(三)-- 主从同步
一.主从同步的工作原理 redis主从复制过程: 当配置好slave后,slave与master建立连接,然后发送sync命令.无论是第一次连接还是重新连接,master都会启动一个后台进程,将 数据 ...
- 【PHP】通过header发送自定义数据
发送header: 我们定义了三个参数,token.language.region,放入header发送过去 <?php $url = 'http://www.example.com'; $he ...
- 2.5 CMMI2级——配置管理(Configuration Management)
我们先需要回答,什么是 配置管理? 这个问题好难回答,我们可以找到很多解释,但真正理解配置管理的人可能不多. 配置管理的概念非常多,我们可不愿意做理论家,我们是非常务实的,我们先看看,如果没有有效的配 ...
- UVa 130 - Roman Roulette
模拟约瑟夫环 Roman Roulette The historian Flavius Josephus relates how, in the Romano-Jewish conflict o ...
- 深刻理解 React (一) ——JSX和虚拟DOM
版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/155 来源:腾云阁 https://www.qclou ...
- Docker 使用指南 (五)—— Dockerfile 详解
版权声明:本文由田飞雨原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/97 来源:腾云阁 https://www.qclou ...