文字属性和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 ...
随机推荐
- Flutter：Slivers大家族，让滑动视图的组合变得很简单！
今天呢,我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法.开发过列表布局的同学们应该对Slivers系列的控件不陌生,或多或少都用过这个库中的控件,来解决复杂的滑动嵌 ...
- vue使用百度地图
1.在百度地图申请密钥:http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http:// ...
- 数组也继承了Object类
C++ 最根上的类有好多,也可以随便地定义.
- mybatis 在存储Integer、bigdecimal等java数据类型时，将0存成null
我们的项目中,有关于金额的计算,所以,一般在java环境中我们使用bigdecimal来做运算和存储金额信息.数据库sqlServer2008用的float类型 问题是,当我将金额赋值成0时,很意外的 ...
- ui-sref的参数传递
例如:路由配置如下: $stateProvider.state('admin.userList', { url: '/listUser?type&role', //参数必须先在这边声明 tem ...
- 8 tensorflow修改tensor张量矩阵的某一列
1.tensorflow的数据流图限制了它的tensor是只读属性,因此对于一个Tensor(张量)形式的矩阵,想修改特定位置的元素,比较困难. 2.我要做的是将所有的操作定义为符号形式的操作.也就是 ...
- Winform 多个窗口编辑同一条数据同步的实现
场景: 一个主窗口中,可以在列表(DataGridView)里选中一条记录编辑,打开一个编辑窗口(非模态窗口),编辑窗口保存后需要刷新父窗口,由于编辑窗口是非模态窗口,如果打开了多个窗口,并且都是编辑 ...
- TreeView控件概述、属性与方法
1.作用:用于显示Node结点的分层列表.2.添加到控件箱菜单命令:工程 | 部件,在部件对话框中选择:Microsoft Windows Common Controls 6.03.TreeView控 ...
- [翻译] LLSimpleCamera
LLSimpleCamera https://github.com/omergul123/LLSimpleCamera LLSimpleCamera is a library for creating ...
- 阿里云全球首次互联网8K直播背后的技术解读
3月28日,云栖大会·深圳峰会现场,阿里云发布并现场演示了阿里视频云最新8K互联网直播解决方案.这是全球发布的首个8K视频云解决方案,也是全球首次8K互联网视频直播. 视频地址:https://v.q ...