文字属性和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 ...
随机推荐
- url override implements session
url 重写实现会话概述 URL重写是对GET请求参数的应用,当服务器响应浏览器上一次请求时,将某些相关信息以超链接方式响应给浏览器,超链接中包括请求参数信息. 特点:URL必须以GET方式发送请求. ...
- 网络 互联网接入方法、Mbit与MB的转换
ADSL:非对称数字用户环路(绝大多数家庭接入方法,使用电话线).可以提供最高1Mbps的上行速率和最高8Mbps的下行速率.最新的ADSL2+可以提供最高24Mbps的下行速率. 千千兆TB 千兆G ...
- 使用 CLI 创建 Azure VM 的自定义映像
自定义映像类似于应用商店映像,不同的是自定义映像的创建者是你自己. 自定义映像可用于启动配置,例如预加载应用程序.应用程序配置和其他 OS 配置. 在本教程中,你将创建自己的 Azure 虚拟机自定义 ...
- 使用 Azure CLI 创建和管理 Linux VM
Azure 虚拟机提供完全可配置的灵活计算环境. 本教程介绍 Azure 虚拟机的基本部署项目,例如选择 VM 大小.选择 VM 映像和部署 VM. 你将学习如何执行以下操作: 创建并连接到 VM 选 ...
- bat把npm换成淘宝源
@echo off echo 开始.. npm config set registry http://registry.npm.taobao.org/ && npm install 注 ...
- [EntityFramework] 对 DateTime 类型使用 SQL 服务器时间或者字段默认值
DateTime 类型在 SQL 服务器上如果设置了默认值,在 EntityFramework 添加新行的时候想使用该默认值,则不能对新增加的实体的 DateTime 字段赋值. 但是如果新增加的实体 ...
- ORAchk-数据库健康检查好帮手
ORAchk 之前被称为RACcheck,后来它的检查范围进行了扩展,改名为了ORAchk,它是在数据库系统进行健康检查的一个专用工具,这个工具主要用来检查软件的配置是否符合要求以及一些最佳实践是否被 ...
- Falsk的模板分配和蓝图、定制错误信息、 和补充
Flask的模板渲染: Flask的模板在进行渲染的时候是默认选则templates下的html文件 我们可以在实例化app的时候,指定文件来进行选择: 模板渲染更改文件夹:template_fold ...
- [转]SQL Server 数据库定时自动备份
前提:在使用下面的备份方式之前需要确保你的Sqlserver Agent服务启动,切设置为自动启动.否则当你服务器重启了但是Agent服务没有启动,那么自动备份任务就不会执行 (一)使用TSql代码自 ...
- yii 验证码功能的实现
首先知晓我们在使用验证码的时候通常是和我们的表单小部件配合使用首先我们创建model层 新建一个php文件 名字叫做Verifycode.php 要在我们的model层 创建我们的验证码的验证规则,我 ...