文字属性和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 ...
随机推荐
- shiro web 集成
集成方法 shiro与web集成,主要是通过配置一个ShiroFilter拦截所有URL,其中ShiroFilter类似于SpringMVC的前端控制器,是所有请求入口点,负责根据配置(如ini配置文 ...
- BS网站架构演变
BS网站架构演变 网站架构的整个演变过程主要是围绕大数据和高并发这两个问题展开的,解决的方案主要分为使用缓存和使用多资源两种类型.多资源主要指多存储(包括多内存).多CPU和多网络,对于多资源来说又可 ...
- 【java8】为java8的foreach正名
首先为自己没有经过严格测试得出的错误结论感到抱歉,原博文,测试完感觉自己发现了一个新bug,后来思前想后觉得不应该是这样的,如果效率差的这么多,jdk的开发人员会不去优化它吗,但是怎么重复测试任然得到 ...
- 八、Web移动端Fixed布局的解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...
- 使用 PowerShell 创建和修改 ExpressRoute 线路
开始之前 安装最新版本的 Azure Resource Manager PowerShell cmdlet. 有关详细信息,请参阅 Azure PowerShell 概述. 在开始配置之前,请查看先决 ...
- MySQL InnoDB锁机制之Gap Lock、Next-Key Lock、Record Lock解析
MySQL InnoDB支持三种行锁定方式: l 行锁(Record Lock):锁直接加在索引记录上面,锁住的是key. l 间隙锁(Gap Lock):锁定索引记录间隙,确保索引记录的间隙 ...
- qmake
https://blog.csdn.net/m0_37876745/article/details/78537556
- Linux系统优化实现高并发
ulimit -SHn 65535内核优化net.ipv4.ip_forward = 1 #开启路由功能net.ipv4.conf.default.rp_filter = 1 ...
- Squid安装配置和使用
文:铁乐与猫 环境 centos 6.5 x64 安装 最简单的一种就是yum安装. yum install squid 版本 rpm -qa | grep squid squid-3.1.23-16 ...
- .net 和 core 数据库连接字符串
Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-xxxx.mdf;Initial Catalog= ...