css05文本,文字属性
1.创建一个html页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import "css/css04.css";
</style>
</head>
<body>
<div>
<h1>京东商城——全部商品分类</h1>
<h2>图书、音像、电子书刊</h2>
<p>
<span>电子书刊</span> 电子书 网络原创 数字杂志 多媒体图书目<br/>
<span>音像</span>音乐 影视 教育音像<br/>
<span>经管励志</span> 经济 金融与投资 管理 励志与成功
</p>
<h2>家用电器</h2>
<p><span>大家电</span> 平板电视 空调 冰箱 DVD播放机<br/>
<span>生活电器</span> 净化器 电风扇 饮水机 电话机</p>
<h2>个护化妆</h2>
<p><span>面部护理</span> 洁面乳 精华露 眼部护理 T区护理<br/>
<span>身体护理</span> 洗发护发 沐浴 手工/香皂 手足护理<br/>
<span>香水SPA</span> 女士香水 男士香水 组合套装 迷你香水</p>
<h2>钟表</h2>
<p><span>瑞士品牌</span> 江诗丹顿 卡地亚Cartier 帝舵TUDOR 真利时ZENITH 雷蒙威Raymond Well<br/>
<span>时尚品牌</span> 巴宝莉BURBERRY 雅克利曼Jacques Lemans 苏菲玛索Sophie Marceau<br/>
<span>国产品牌</span> 聚利时Julius 北京beijing 依宝诺EBONO 劳士顿</p>
<h2>服饰鞋帽</h2>
<p><span>女装</span> T恤 衬衫 针织衫 卫衣 连衣裙 风衣 大衣 休闲裤<br/>
<span>男装</span> 衬衫 POLO衫 针织衫 皮衣 外套 棉服 大衣<br/>
<span>运动</span> 休闲鞋 跑步鞋 足球鞋 运动裤 运动包</p>
</div>
</body>
</html>
2.创建对应的css文件夹 下面的css04.css文件
h1{
text-align: center; /*一级标题居中显示*/
}
span{
color: blue; /* 字体颜色 蓝色*/
/* font-style: italic; /!*斜体*!/
font-weight: bold; /!*粗体*!/
font-size:16px ; /!*字体大小*!/
font-family: "楷体"; /!*字体样式*!/*/
font: italic bold 16px "楷体";
text-decoration: underline; /*下划线*/
}
p{
line-height: 30px; /* 行高*/
}
3.运行查看效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
.show{
font-size: 24px; /*字体的大小*/
font-weight: bold; /*字体的粗细*/
font-family:"楷体"; /*字体的类型*/
font-style:italic; /*字体的风格*/
color: red;
}
#dream{
font:italic bold 24px "楷体"; /*顺序不能改变*/
color: rgb(200,2,2); /*三原色的设置*/
/* color: rgba(2,2,2,0.9); 设置颜色以及透明度*/
}
.bird{
font-style: oblique;
}
</style>
</head>
<body>
<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在北大青鸟，有一群人默默支持你成就
<span id="dream">IT梦想</span></p>
<p class="bird">选择<span>北大青鸟</span>，成就你的梦想</p> </body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本装饰</title>
<style type="text/css">
div:nth-of-type(1){
text-decoration: underline; /*下划线*/
}
div:nth-of-type(3){
text-decoration: overline;/*上划线*/
}
div:nth-of-type(2){
text-decoration: none; /*默认没有*/
}
div:nth-of-type(4){
text-decoration: line-through; /*删除线*/
}
</style>
</head>
<body>
<div>文本内容1</div>
<div>文本内容2</div>
<div>文本内容3</div>
<div>文本内容4</div> </body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
span,img{ //图片与文字的垂直居中
vertical-align: middle;
}
</style>
</head>
<body>
<img src="data:images/icon.gif">
<span>这是几本值得拥有的Books</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本阴影</title>
<style type="text/css">
h1{
text-shadow: pink 10px 10px 2px;
}
</style>
</head>
<body>
<h1>文本阴影</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>超链接样式</title>
<style type="text/css"> /* 超链接伪类 必须按照下面的顺序进行设置
01.a:link:未访问的链接
02.a:visited:点击已经访问后的链接
03.a:hover:鼠标悬停的链接
04.a:active:鼠标单击未释放的链接
*/
a:visited{
color: yellowgreen;
}
a:hover{
color: orange;
}
a:active{
color: deeppink;
}
#haha:hover{
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" id="haha">超链接1</a>
<a href="#">超链接2</a>
</body>
</html>
css05文本,文字属性的更多相关文章
- html5文本框提示文字属性为placeholder
html5文本框提示文字属性为placeholder 例子: <textarea id="comment" class="commentCont" n ...
- css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- CSS3：文字属性
文字属性注意的细节: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- iOS-文本段落样式NSMutableParagraphStyle与NSParagraphStyle的使用和一些富文本处理属性
开发过程中,经常会遇到动态计算行高的问题, - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)op ...
- 前端之CSS字体和文本类属性
一.字体类属性: 1.字体类型: font-family:字体1,字体2,字体3; 常用写法: font-family:"微软雅黑",Arial; 注:a) 多个字体之间用逗号分隔 ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- day67-CSS字体属性、文字属性、背景属性、css盒子模型
1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...
随机推荐
- iOS开发，新手入门指导
在做了近两年wp,安卓开发之后,某一天突然决定投身iOS的开发之中. 因为一直用的mac,做wp开发的时候都用双系统,vs开久了,就会比较烫,这点让人不爽.后来更多地做安卓,直接mac下开发,很舒适的 ...
- C#防SQL注入代码的实现方法
对于网站的安全性,是每个网站开发者和运营者最关心的问题.网站一旦出现漏洞,那势必将造成很大的损失.为了提高网站的安全性,首先网站要防注入,最重要的是服务器的安全设施要做到位. 下面说下网站防注入的几点 ...
- 优化HTTP前端请求构建高性能ASP.NET站点
HTTP请求的优化 在一个网页的请求过程中,其实整个页面的html结构(就是页面的那些html骨架)请求的时间是很短的,一般是占整个页面的请求时间的10%-20%.在页面加载的其余的时间实际上就是在 ...
- Spring4.0学习笔记(10) —— Spring AOP
个人理解: Spring AOP 与Struts 的 Interceptor 拦截器 有着一样的实现原理,即通过动态代理的方式,将目标对象与执行对象结合起来,降低代码之间的耦合度,主要运用了Proxy ...
- Oracle 体系结构及安全管理
1 oracle数据库服务器构成:数据库和实例2 oracle内部结构: 物理存储结构: 数据文件(xxx.dbf):存放数据 控制文件(xxx.ctl):控制数据库的完整性恢复数据或使用的日志文件 ...
- [jQuery] $.grep使用
1.$.grep的功能是查找过滤功能的数组,原数组不受影响. 2.参数定义 jQuery.grep( array, function(elementOfArray, indexInArray), [ ...
- 栈的讲解 和 栈的生长方向 源代码技巧分析，简直没SEI 啦
函数的局部变量,都是存放在"栈"里面,栈的英文是:STACK.STACK的大小,我们可以在stm32的启动文件里面设置,以战舰stm32开发板为例,在startup_stm32f1 ...
- 黑马程序员—C语言的函数、数组、字符串
------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 一.函数 定义:函数是代码复用的一种机制. 函数的基本语法: 返回类型 函数名 ( 参数类型 参 ...
- KeyPress事件
在做一个小demo的时候,发现在文本框中输入一个数字,按下“+”,数字增加了,但是“+”仍旧存在的问题,解决方案:提前执行键盘press事件 private void txtNum_KeyPress( ...
- laravel框架——composer导入laravel
第一种: composer create-project --prefer-dist laravel/laravel 名称 "5.2.*"第二种: composer global ...