文字属性和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 ...
随机推荐
- 如何使用 adb 命令实现自动化测试
如何使用 adb 命令实现自动化测试 一.前提: 1.打开手机调试模式,确保手机已正常连接电脑,可在电脑上通过adb devices命令查看,结果如下说明连接成功: List of devices a ...
- Pig foreach用法举例
foreach:一行一行的遍历数据,处理一行的数据,然后返回一个tuple. users = load '/users.data'; 1)别名引用 f = foreach users genera ...
- 获取INET4与INET6的信息
获取INET4与INET6的信息 参考书籍: 本人封装的源码: // // IPAddressInfo.h // YXNETWORK // // http://www.cnblogs.com/YouX ...
- C 转义字符说明
%a(%A) 浮点数.十六进制数字和p-(P-)记数法(C99)%c 字符%d 有符号十进制整数%f 浮点数(包括float和doulbe)%e(%E) 浮点数指数输出[e-(E-)记数法]%g(%G ...
- windows下npm安装vue
一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...
- 铁乐学python_Day42_线程-信号量事件条件
铁乐学python_Day42_线程-信号量事件条件 线程中的信号量 同进程的一样,Semaphore管理一个内置的计数器, 每当调用acquire()时内置计数器-1:调用release() 时内置 ...
- matlab规定小数点保留4位且非科学计数法格式存储txt
matlab 不保存为科学计数法 http://blog.sciencenet.cn/blog-472136-402727.html 经常在表示matlab值时,它总会把一些小于1的大于1000的数使 ...
- .net mvc HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容
1. 检查服务器上是否安装了“HTTP重定向”功能和“静态内容压缩”功能(在添加/删除程序或增加角色处安装).这是我所遇到的问题: 2. 应用程序池要被配置为“集成” 3. 把.net 4.0安装在i ...
- 遇见C++ Lambda
转自:https://www.cnblogs.com/allenlooplee/archive/2012/07/03/2574119.html 遇见C++ Lambda Written by Alle ...
- mysql workbench的PK,NN,UQ,BIN,UN,ZF,AI
mysql workbench建表时PK.NN.UQ.BIN.UN.ZF.AI的意思,后面几个老搞不清,随记在这便于以后方便查. [intrinsic column flags] (基本字段类型标识) ...