(5)HTML5-CSS基础知识

原创 2016年08月29日 19:24:07

CSS基本语句

css是由“选择器”,“属性”和“设置值”三个元素所组成的。声明基本如下:

选择器 {属性:设置值;。。。。。}

选择器的功能是用于指定在HTML程序中遇到的何种标签时,就套用括号内的属性和设置。选择器分三种,分别是“TYPE”,“CLASS”和“ID”。TYPE是HTML里会使用到的选择器标签,例如《body》《header》等。Class和ID则是由开发人员自行定义的选择器。

属性与设置值会成对的出现,属性可能是背景颜色(background-color),字体大小(font-size)等需要被设置的元素。一个选择器可以有多个属性,属性之间要用分号“;”隔开。

设置值则是决定“属性”呈现的方式。例如可以将背景颜色设置为红色(red)。

如果有多个标签需要共享同样的样式,就可以集体声明的方式让程序变得更加简洁。例如:

h1,h2,h3{

color:red;

}


除了上面的Type声明方式,也就是除了用HTML内原有的标签来声明之外,也可以使用自行声明的名词来设置样式,Class声明就是一种。例如:

css文件 html文件

.myStyle{ 《p class=“myStyle”》

color:red; 黄色的字

} 《/p》

与Type不同的是Class名称前面必须加上一个“.”作为标识。


type结合class声明适用于需要在不同HTML标签中使用同种名称的class选择器,但要给予不同的设置。举例说明,声明一个class为“myTextColor”代表专门用来处理文字颜色,但是希望在《b》标签里和《i》标签中,能够显示不同的文字颜色。

css文件

b.myTextColor{
Color:red;

}

i.myTextColor{
Color:red;

}

回到html文件中就可以如下应用,虽然class都是指向myTextColor,但是不同的标签下显示的结果也不同。

html文件

《b class=“myTextColor”》粗体是红色《/b》

《i class=“myTextColor”》粗体是黄色《/i》


ID与class声明同样是自行替选择器命名的方式,但是ID选择器在HTML文件中只能出现一次(不能像CLASS一样可以在多个标签上使用),主要配合javascript中的GetElementByID函数,而Class就没有使用的次数限制。使用ID声明前要加“#”作为标识。

css文件

#myTextColor{
Color:red;

}


版权声明:本文为博主原创文章,转载必须声明出处,thank。 举报

相关文章推荐

webAPP项目基础知识介绍用html5+css3+js开发

最近关于webAPP很火,差不多很多公司开始制作自己的webAPP啦。一谈到webAPP,大家就会想到用html5+CSS+js来实现。到底如何来制作?25学堂小编还没有找到比较合适的用html5+c...

html5 css3基础知识详解

如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷。 Html4-html5...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

Html5+CSS3基础知识汇总-CSS3篇

今天总结的是CSS3的学习内容,CSS3的简介、CSS3中新增的样式以及新增样式具体属性的实现。

HTML5基础知识学习笔记

1.Html5基础讲解1.1HTML5基础标签: head:头标签,一般会将一些网页的基本配置和文件引用在head中设置; body:内容标签,里面是整个网页要展示内容部分; 1.2HTML5标...

html5基础知识第四章其他标签

以下内容是学习期间整理,有些语句是便于理解,便于快速入门写的。并不权威。 表格: ...

HTML5游戏开发 Chapter01 基础知识与Processing.js

h5游戏开发,processing与processing.js。

html5画布基础知识

原网址:http://www.w3school.com.cn/html5/html_5_canvas.asp W3C是一个非常适合前端初学者的网站~强烈推荐

html5基础知识(1)-----属性&&样式

html5入门基础知识

html5学习笔记——基础知识1

要想知道html5首先要知道html,什么是html呢? **html(HyperText Markup Language)** 超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)