(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。

(10)HTML5-CSS网页小游戏

游戏的组成有如下: 初始画面:初始画面的布局包括背景,计分栏,地鼠和计时条。 计分系统:若打到地鼠,计分栏的分数会加一,最低0,最高十分。 计时系统:游戏时间计时10秒,计时条会显示游戏进行的进度。 ...
  • zsc2014030403015
  • zsc2014030403015
  • 2016年08月31日 19:48
  • 814

MySql基础知识总结

MySql基础知识总结
  • weixin_37547197
  • weixin_37547197
  • 2017年06月08日 09:02
  • 292

java基础知识总结5

四、I/O流、FileFile——–java.io.File——–文件和目录路径名的抽象表示形式常用方法: createNewFile(” “)———创建文件 delete(” “) exist...
  • qq_26431469
  • qq_26431469
  • 2016年03月29日 10:15
  • 72005

C语言基础知识总结

一.结构体定义的使用 1.struct node { int num; struct node *next; }; 此时定义node结构体变量时,必须写成struct node *nod; 2.typ...
  • chen_geng
  • chen_geng
  • 2016年08月11日 19:54
  • 519

Java基础知识5

方法的概述及基本使用方法的概述 方法就是完成特定功能的代码块,在很多语言里面都有函数的定义 , 函数在Java中被称为方法。方法格式 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数...
  • HQZ820844012
  • HQZ820844012
  • 2017年07月25日 23:47
  • 78

java基础知识5

82、能不能自己写个类,也叫java.lang.String? 可以,但在应用的时候,需要用自己的类加载器去加载,否则,系统的类加载器永远只是去加载jre.jar包中的那个java.lang.Str...
  • u012877177
  • u012877177
  • 2015年04月12日 14:28
  • 270

oc基础知识(5)

/ // main.m // oc5 // // Created by ChenZiyan on 16/4/17. // Copyright © 2016年 ChenZiyan. All ri...
  • wz_chan
  • wz_chan
  • 2016年04月20日 19:00
  • 100

Java - 面试 - 基础知识 5

41、a.hashCode() 有什么用?与 a.equals(b) 有什么关系?hashCode() 方法对应对象整型的 hash 值。它常用于基于 hash 的集合类,如 Hashtable、Ha...
  • diyu122222
  • diyu122222
  • 2017年08月01日 11:10
  • 79

5、config.xml的作用(基础知识)

lconfig.xml的作用Config.xml用于控制一些app的行为,这个平台无关的xml文件是基于W3C的Packaged Web Apps(Widgets)描述标准,扩充特定的核心Cordov...
  • zzh_receive
  • zzh_receive
  • 2016年11月16日 20:30
  • 3115

前端css基础知识(5)

1 定位 Position:  left   |  right  |   top   |   bottom 1.1 静态定位 Position:static;    标准流。 1.2 绝对定...
  • tianwei0822
  • tianwei0822
  • 2017年12月22日 15:12
  • 30
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(5)HTML5-CSS基础知识
举报原因:
原因补充:

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