CSS系列之美化网页/span标签和div标签/字体样式/文本样式

01 span标签和div标签

span标签的作用
- 能让几个文字或者某个词语凸显出来
- 属于行内元素
div标签
- 属于块级元素

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>span标签</title><style>#a{font-size: 40px;color: red;font-weight: bold;}.b{font-size: 20px;color: black;font-weight: bold;}#c{font-size: 30px;color: red;font-weight: bold;}#d{font-size: 30px;color: red;font-weight: bold;}</style></head>
<body><p><span class="b">你要批评指点四周风景，</span> <span id="a">你首先要爬上屋顶</span>
</p><div class="b">不以<span id="c">物</span>喜，不以<span id="d">己</span>悲</div></body>
</html>

运行结果

02 字体样式

常用字体样式设置

属性名	含义	举例
font-family	设置字体类型	font-family:“隶书”;
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体	font:italic bold 36px “宋体”;

03 文本样式

常用文本样式设置

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
text-decoration	设置文本的装饰	text-decoration:underline;
vertical-align	设置文本对齐	vertical-align ：middle；
line-height	设置文本的行高	line-height:25px;

04 文本阴影

text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在
CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持
格式：

text-shadow：color（阴影颜色）x-offset(阴影水平位移) y-offset(阴影垂直位移) blur-radius(阴影模糊半径)

程序示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*用后代选择器给基础代码添加字体样式和文本样式*/.demo a{float: left; /*设置浮动*/display: block;/*设置元素的显示属性 block 元素会被显示为块级元素*/height: 50px;/*设置元素高度*/width: 50px;/*设置元素宽度*/border-radius: 10px;/*设置圆角边框*/background: antiquewhite;/*设置背景颜色*/color: white;/*设置文本颜色*/text-align: center;/*设置文本居中*/line-height: 50px;/*设置文本行高*/text-decoration: aliceblue;/*设置文本装饰*/margin: 5px;/*设置外边距*/font-family: "Courier New";/*设置字体类型*/}</style></head>
<body><p class="demo"><a href="" >1</a><a href="" >2</a><a href="" >3</a><a href="" >4</a><a href="" >5</a><a href="" >6</a><a href="" >7</a><a href="" >8</a><a href="" >9</a></p></body>
</html>

运行结果

CSS系列之美化网页/span标签和div标签/字体样式/文本样式相关推荐

CSS基础：基础选择器、字体和文本样式
CSS基础 Date: August 31, 2022 Summary: 基础选择器.字体和文本样式基础认知学习路径: CSS初识 CSS引入方式 CSS初识 CSS介绍 CSS:层叠样式表(Ca ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...
css笔记一-CSS简介、基础选择器、字体和文本样式
一一.CSS简介 1.1.什么是CSS? CSS(Cascading style sheets):层叠样式表 CSS作用:给页面中的HTML标签设置样式 1.2.CSS语法规则写在哪里? css写 ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
05使用CSS设置字体和文本样式
使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|ser ...
html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
html5中还有div吗,关于html5中的section标签与div标签的区别（内有实例）
摘要腾兴网为您分享:关于html5中的section标签与div标签的区别(内有实例),周公解梦,智学网,学习计时,完美root等软件知识,以及网上预约医院软件,字体预览软件,铁血联盟卷土重来,海量 ...
关于html5中section标签与div标签的区别
关于html5中section标签与div标签的区别本篇文章主要的想大家介绍了关于HTML5 section标签和div标签的区别,section和div的用法看似相近,实则差的也不是太多,有些地方 ...

CSS系列之美化网页/span标签和div标签/字体样式/文本样式

CSS系列之美化网页/span标签和div标签/字体样式/文本样式

01 span标签和div标签

02 字体样式

03 文本样式

04 文本阴影

程序示例

CSS系列之美化网页/span标签和div标签/字体样式/文本样式相关推荐

最新文章

热门文章