文字属性和div容器盒的使用基础
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.center{
width: 200px;
margin: auto;
}
/* 这里是加粗文字 */
.p1 {
font-weight: bold;
}
/* 这里是倾斜文字 */
.p2 {
font-style: italic;
}
/* 这里是文字间距 */
.p3 {
letter-spacing: 10px;
}
/* 这里 是词 间距 */
.p4 {
word-spacing: 10px;
}
/* 这里是首行缩进 */
.p5 {
text-indent: 10px;
}
/* 这里是上划线 */
.p6 {
text-decoration: overline;
}
/* 这里是下划线 */
.p7 {
text-decoration: underline;
}
/* 这里是删除线 */
.p8 {
text-decoration: line-through;
}
/* 这里是衬托文字 */
.p9 {
font-family: serif;
}
/* 这里是非衬托文字 */
.p10 {
font-family: sans-serif;
}
/* 这里是容器盒的阴影 */
.box {
width: 200px;
height: 300px;
background: red;
box-shadow: 10px 10px 10px #ccc;
}
/* 这里是 文字的阴影 */
h1 {
text-shadow: 10px 10px 10px #ccc;
}
/* border边框属性 */
.border{
width: 200px;
height: 200px;
border-radius: % %;
background: yellow;
text-align: center;
line-height: 200px;
}
</style>
</head> <body>
<div class="center">
<p class="p2">这里是倾斜文字</p>
<p class="p3">这里是文字间距</p>
<p class="p4">这里 是词 间距</p>
<p class="p5">这里是首行缩进</p>
<p class="p6">这里是上划线</p>
<p class="p7">这里是下划线</p>
<p class="p8">这里是删除线</p>
<p class="p9"> 这里是衬托文字</p>
<p class="p10">这里是非衬托文字</p>
<div class="box">这里是容器盒的阴影</div>
<h1>这里是文字的阴影</h1>
<div class="border">我是一个圆</div> </div>
</body> </html>
文字属性和div容器盒的使用基础的更多相关文章
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
- 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性
伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- DIV的Position属性和DIV嵌套DIV
1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
- 转载网页博客：ie7bug:div容器下的img与div存在间隙
1.代码及在浏览器上的显示 ie7: ie8+: Firefox: Chrome: 可以看出ie7上在div容器下添加img,div与img中有间隙,而在ie8+和其他浏览器上均显示正常 网页源代码如 ...
- contenteditable属性让div也可以当做输入框
你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...
- day67-CSS字体属性、文字属性、背景属性、css盒子模型
1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...
- html5文本框提示文字属性为placeholder
html5文本框提示文字属性为placeholder 例子: <textarea id="comment" class="commentCont" n ...
随机推荐
- Java集合 -- HashSet 和 HashMap
HashSet 集合 HashMap 集合 HashSet集合 1.1 Set 接口的特点 Set体系的集合: A:存入集合的顺序和取出集合的顺序不一致 B:没有索引 C:存入集合的元素没有重复 1. ...
- HTML复习总结
- zookeeper应用 - FIFO 队列 分布式队列
使用ZooKeeper实现的FIFO队列,这个队列是分布式的. package fifo; import java.util.Collections; import java.util.List; i ...
- 记录一次测试环境遇到的push消息记录
测试环境测试push消息,调用消息中心同事的api接口,感觉怎么都调用不通.纠结了一天,最终发现原因:一是版本的问题,不同的测试包有不同的版本,不同的版本 可能push的消息不同.二是 用户有没有 开 ...
- zabbix系列之三——安装报错
1Zabbix_server启动失败 1.1查看日志:vi /var/log/zabbix/zabbix_server.log zabbix_server [23500]: cannot open l ...
- 转载：http://www.cnblogs.com/double-K/p/6926367.html
sql专家感悟:不可说的感悟-——十年老技术转型(一) http://www.cnblogs.com/double-K/p/6926367.html
- FileStream对文本进行读写操作
class FileHelper { /// <summary> /// 检验文件路径是否合法 /// </summary> /// <param name=" ...
- spring boot 在jdk 1.7下使用 commandLineRunner
在spring boot 中有一段代码,使用的是java 1.8的语法: @Bean public CommandLineRunner commandLineRunner(ApplicationCon ...
- [转]CentOS7增加或修改SSH端口号
前言:开启某服务或软件的端口,要从该服务或软件监听的端口(多以修改配置文件为主),SeLinux和防火墙(FireWall)的安全策略下手.如果使用阿里云,腾讯等第三方服务器还需要对管理控制台的安全组 ...
- CSS学习摘要-引入样式
CSS学习摘要-引入样式 注:主要是摘录自MDN 网络开发者这个网站的. CSS 实际上如何工作? 当浏览器显示文档时,它必须将文档的内容与其样式信息结合.它分两个阶段处理文档: 浏览器将 HTML和 ...