从零开始的html教程之CSS篇(3):常用的字体与文本属性

一、css常用的字体属性

1.字体的设置

在CSS中字体通过font-family属性来设置。

font-family:"黑体";

2.字体的大小

用font-size设定文字的大小 font-size: 16px; px是长度单位,1px的意思是1个像素的大小用color设定文字颜色

3.字体的颜色

color: black; color: #FFFFFF;

color: rgb(255,255,000);

color: rgb(0%,100%,100%);

颜色可以用英文单词、十六进制码、rgb表示。

二、常用文本的属性

1.行距

用line-height属性设置行距

line-height: 20px;

line-height: 2;

20px表示行距是20像素大小;没有单位只有数字的数字是字体大小倍数。如果字体大小是16px,这里2的行距为40px。

2.首行缩进

用text-indent表示首行缩进

text-indent:30px;

3.文本对齐

用text-align设定文本的对齐方式

text-align:left;

text-align:right;

text-align:center;

text-align:justify;

left是左对齐,right是右对齐,center是居中。justify是使两端都对齐,调整单词和字母间的间隔,使各行的长度恰好相等。

4.文本的修饰

用text-decoration属性来修饰文本

text-decoration:none;

text-decoration:underline;

text-decoration:overline;

text-decoration:line-through;

text-decoration:blink;

none是取消decoration属性,underline 添加下划线,overline 在文本顶部添加线,line-through会在文本中间划出一条线,blink 会让文本闪烁。

时间: 2025-01-27 18:49:08

从零开始的html教程之CSS篇(3):常用的字体与文本属性的相关文章

从零开始的html教程之CSS篇(1):轻松入门CSS

大家通过学习html已经可以做出简单的网页了,但是想要做出复杂的网页就不能局限于html这一门语言了.通过学习CSS可以极大提高效率.做出精美的网页. 一.样式表是什么? 层叠样式表(英语:Cascading Style Sheets,简写 CSS),是一种用来格式化文档.添加样式的计算机语言. 样式表分为: 1.外部样式表 在head元素中添加<link>标签链接到css样式表<link rel="stylesheet" type="text/css&qu

从零开始的html教程之CSS篇(2):CSS中的选择器

一.css的基本构成 选择器{属性:属性值} css的语句就是由以上三部分组成选择器写在花括号前,花括号内为声明,如果有多个声明,属性前会用":"隔开.先列举个例子: body {     background:#2CA4CF;     font-family:"黑体";         color:#ffffff; } 我们之前学过元素内嵌入style改变样式的用法,style跟花括号内声明的用法相同.当外部样式表或内部样式表时,就要以这样的形式书写.这段代码的意

Dreamweaver MX 2004 CSS使用教程之CSS类型属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 二.定义CSS的类型属性 使用"CSS 样式定义"对话框中的"类型"类别可以定义 CSS 样式的基本字体和类型设置. 定义 CSS 样式的类型设置: 在"CSS 样式定义"对话框中,选择"类型"(如下图),然后设置所需的样式属性. 以下属性如果不设置可以保留为空. 字体:为样式设置字体.DW MX 2004内置6个系列的英文字体(如下图). 一般英

CSS教程之CSS的应用_基础教程

  一.In-line 行内  行内样式是在html标签里直接使用style属性     <p style="color: red">text</p>  设定段落文字红色.  但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免.  二.Internal 内部  使用于整个页面的植入内部样式在head标签里面,style标签包围样式.     <!DOCTYPE html PUBLIC "-//W3C//DTD X

CSS高级教程之CSS的定位属性和实例

css|高级|教程 CSS定位属性允许你对元素进行定位. CSS 定位 (Positioning)实例: 定位:相对定位 本例演示如何相对于其正常位置来定位元素. <html><head><style type="text/css">h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative;left:20px}</style></head>&

学习网页技术CSS高级教程之CSS 伪元素

css|高级|教程|网页 CSS 伪元素被用来将特殊的效果添加到某些选择器. CSS 伪元素 (Pseudo-elements)实例: 制作首字母特效 本例演示如何向文本的首字母添加特效. <html><head><style type="text/css">p:first-letter {color: #ff0000;font-size:xx-large}</style></head><body><p>

CSS入门教程之CSS的语法

css|教程|入门教程|语法 1.基本语法 CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value). 基本格式如下: selector { property: value} (选择符 { 属性:值}) 选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY.P.TABLE--,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开: body { color: black} 选择符body是指页面主体部分,color是控制

Dreamweaver MX 2004 CSS使用教程之CSS滤镜介绍

css|dreamweaver|教程|滤镜 本站原创内容,转载请注明出处网页教学网. 十.CSS 滤境的详细介绍1 ALPHA 属性 [Alpha滤镜属性]这个名字,在Flash和Photoshop经常见到.它们的作用基本类似,就是把一个目标元素与背景混合.你可以指定数值来控制混合的程度.这种"与背景混合"通俗地说就是一个元素的透明度.通过指定坐标,可以指定点.线.面的透明度.由于"Alpha"滤镜的参数多,我们先来看一下下图: "opacity"

Dreamweaver MX 2004 CSS使用教程之CSS扩展属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 九.定义 CSS 样式扩展属性 "扩展"样式属性包括过滤器.分页和光标选项,它们中的大部分效果仅受 Internet Explorer 4.0 和更高版本的支持. 指定扩展属性:在"CSS 样式定义"对话框中,选择"扩展"(如下图),然后设置所需的样式属性. 分页:在打印期间在样式所控制的对象之前或者之后强行分页.选择要在弹出式菜单中设置的选项.此选项不受任何 4.0