请选择 进入手机版 | 继续访问电脑版

DZ起点网_免费Discuz视频教程

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz

1-8 CSS层叠样式表

2014-3-24 11:09| 发布者: admin| 查看: 4410| 评论: 0|原作者: 朱朝兵|来自: DZ起点网

摘要: )css样式简介 CSS的英文全称是“cascading style sheets”中文译为“层叠样式表”也可译为“串联式样式表”,利用他们可以对网页中的文本进行精确的格式化控制。Css样式可以控制多个范围内的文本格式,而且还可以 ...

第一章 HTML+DIV+CSS基础知识

主讲老师:朱朝兵  QQ537060756

 

CSS层叠样式表

视频教程

高清版下载

http://pan.baidu.com/s/1jGslH2m

教程截图


(1)css样式简介

CSS的英文全称是“cascading style sheets”中文译为“层叠样式表”也可译为“串联式样式表”,利用他们可以对网页中的文本进行精确的格式化控制。Css样式可以控制多个范围内的文本格式,而且还可以控制多个文档中的文本格式。网页制作时采用css技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精准的控制。

(2)定义css样式表

(a)用HTML标记定义

使用HTML的style组件,并将这个元素放置于head部分,包含网页的样式规则,每个规则包含一个选择符(通常是一个HTML元素),如body、p等。

样式规则如下:

选择符{属性:值}

单一的选择符使用多个样式时应用(;)隔开。如

选择符{属性1:值1;属性2:值2;属性3:值3}

综合实例(定义H1/H2的颜色和字体大小):

综合实例[html代码]

    
        HTML元素选择符


     

这是H1

这是H2


 

 

(b)Class类别选择符

Class属性用于指定元素属于何种样式的类,类表示方法(.类名称)。

例如样式表可以加入title类:

css代码:

 .title{color:red;font-size:24px;}


在这个例子中titie类可以用于任何body元素,因为它在样式表中没有与任何HTML元素与之关联。

综合实例:

[代码]html代码:

    
        类别选择符的使用


     

这是一个标题,他现在运用了.title类的样式

这是一个内容,他现在运用了.neirong类的样式


(c)Id选择符

Id和class一样用于指定元素属于何种样式的类,类表示方法(#类名称)。

例如样式表可以加入weiyi类:

#weiyi{color:red;font-size:24px;}

在这个例子中weiyi类可以用于body元素中的一个元素。

在同一个层中可以同时运用class和id,但是id的级别要高于class,也就是说他们同时包含了一个样式时,将会优先选择id中的样式进行显示。

综合实例:

[代码]html代码:

    
        定义型列表标记演示


     

这是一个标题,他现在运用了.title类的样式

这是一个内容,他现在运用了.neirong类的样式

感谢您的收看


本教程由DZ起点网为您录制  版权所有!


dz模板制作交流群:253092987


1

路过

雷人

握手

鲜花

鸡蛋

相关阅读

最新评论

QQ|小黑屋|Archiver|手机版|Discuz代码分析|Discuz目录结构|DZ起点网 ( 蜀ICP备13000518号-15 )

GMT+8, 2021-11-27 14:22 , Processed in 0.036461 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

返回顶部