css第一节课(设置文字颜色大小样式等)

您所在的位置:网站首页 jquery改变字体颜色 css第一节课(设置文字颜色大小样式等)

css第一节课(设置文字颜色大小样式等)

#css第一节课(设置文字颜色大小样式等)| 来源: 网络整理| 查看: 265

CSS的优势

(1) .内容与表现分离 (2) .网页的表现统一,容易修改 (3) .丰富的样式,使得页面布局更加灵活 (4) .减少网页的代码量,增加网页的浏览速度,节省网络带宽 (5) .运用独立于页面的CSS,有利于网页被搜索引擎收录

CSS的基本语法结构

语法:

image.png

CSS语法规则有二部分组成,即选择器和声明。 声明必须放在大括号{}中,并且声明可以是一条或多条; 每条声明由一个属性和值组成,属性和值用冒号分开; 每条语句以英文分号结尾。 案例:

image.png image.png 标签

在HTML中通过使用标签引入CSS样式。标签用于为HTML文档定义样式信息。 标签位于标签中,type属性是必须的

image.png css选择器

在CSS中,有3种最基本的选择器,分别是标签选择器、类选择器和ID选择器

标签选择器

一个HTML页面由很多的标签组成,如

等,CSS标签选择器就是用来声明这些标签的。因此,每种HTML标签的都可以作为相应的标签选择器的名称。

image.png 类选择器

类选择器的名称可以由用户自定义,属性和值跟标签选择器一样,必须符合CSS规范,类选择器的语法结构如下

image.png

设置了类选择器后,就要在HTML标签中应用类样式。使用标签的class属性引用类新式

image.png 例: .green{ font-size: 20px; color: #009900; }

有勇气就会有奇迹。

image.png ID选择器

ID选择器的使用方法与类选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此它的针对性很强。在HTML的标签中,只要在HTML中设置了id属性,就可以直接调用CSS中的ID选择器。

image.png

案例:

image.png image.png 在HTML中引入CSS样式

(一)行内样式

image.png

(二)内部样式表 放在标签中 (三)外部样式表 外部样式是把CSS代码保存为一个单独的样式表文件,文件扩展名为.css,在页面中引用外部样式表即可。 链接外部样式就是在HTML页面中使用标签链接外部样式表,这个标签必须放到页面标签内。

image.png image.png 样式的优先级 image.png 使用CSS编辑网页文本

本节将学习使用CSS设置字体大小、字体类型、文字颜色、字体风格等字体样式;通过CSS设置文本段落的对齐方式、行高、文本与图片的对齐方式,以及文字缩进方式徕排版网页。

标签

例子:

image.png

在宁波教育学院,有一群人默默支持你的教师梦想

选择宁教,成就你的梦想

运用的css:

p{ font-size: 14px; } .dream{ font-size: 24px; color: red; } .school{ font-size: 36px; color: green; } 字体样式

CSS字体属性定义字体类型、字体大小、字体是否加粗、字体风格等。

image.png 字体类型 font-family

语法格式

image.png

这句代码声明了HTML页面中

标签的字体样式,并同时声明了两种字体:Verdana,"楷体"。这样浏览器会优先用英文字体显示文字,如果英文字体没有包含的字符(通常英文字体不支持中文),则从后面的中文字体里找,这样就达到英文使用Verdana,中文使用楷体的不同字体效果。 多种字体之间用逗号隔开。 一些字体的名称中间会出现空格,如Times New Roman字体,或中文,如楷体,这里需要用号将其引起来,命名浏览器知道这是一种字体名称。

字体风格

CSS通过font-style属性设置字体的风格,font-style有三个值: normal:标准字体样式 italic:斜体字体样式 oblique:倾斜字体 font-style的默认值是normal,italic和oblique在页面中显示效果非常相似。

字体粗细

CSS中使用font-weight属性控制文字的粗细。

image.png 使用CSS排版网页文本

在网页中,用于排版网页文本的样式有文本颜色、水平对齐方式,首行缩进、行高、文本装饰、垂直对齐方式。常用的文本属性、及用法如下表:

image.png 首行缩进和行高

在使用word编辑文档时,通常会设置段落的行距,并且段落的首行缩进两个字符,CSS,通过line-height属性民来设置行高,通过text-indent属性设置首行缩进。 在CSS中,text-indent常使用的单元是em,text-indent:2em表示缩进2个字符 案例:

image.png h1{ color: #091cc4; font-size: 24px; text-align: center; } h3{ text-align: right; } p{ font-size: 12px; text-align: left; line-height: 20px; text-indent: 2em; } 文本修饰和垂直对齐 image.png

其中none和underline是常用的,在后面的课程中会经常使用。 垂直对齐方式 vertical-align属性:middle、top、bottom



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3