html5中有关css3样式

原创 Celine_Na 教程 css样式 222阅读 2018-01-31 14:04:57 举报

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,
在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
<link href="base.css" rel="stylesheet" type="text/css" />
注意:
1.css样式文件名称以有意义的英文字母命名,如 main.css。
2.rel="stylesheet" type="text/css" 是固定写法不可修改。
3.<link>标签位置一般写在<head>标签之内。

对于同一个元素我们同时用了三种方法设置css样式,优先级:

1.使用内联式CSS(如在段落中对个别词使用span标签进行强调<span style = "color:red">)设置。
2.然后使用嵌入式CSS(在<style>标签内)来设置。
3.最后又使用外部式设置文字为蓝色(link链接到的style.css文件中设置)。

外部样式<link href="style.css" ...>代码如果在嵌入式样式<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。
就是外部样式的优先级大于嵌入式的优先级;
把它们调换顺序,他们的优先级变化。

其实总结来说,如果三种方式都设置了不同的样式,采取------就近原则(离被设置元素越近优先级别越高)。

style样式中的选择器:
每一条css样式声明(定义)由两部分组成,形式如下:

选择器{
样式;
}
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
如:body{

}

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码:

p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。

类选择器在css样式编码中是最常用到的,用class属性设置(span class = "变量名",变量名在style标签内设置)。如下面代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

语法:

.类选器名称{css样式代码;}

1.英文圆点开头
2.其中类选器名称可以任意起名(但不要起中文)

使用方法:
第一步:使用合适的标签把要修饰的内容标记起来,如下:
<span>胆小如鼠</span>
第二步:使用class="类选择器名称"为标签设置一个类,如下:
<span class="stress">胆小如鼠</span>
第三步:设置类选器css样式,
如下:
.stress{color:red;}/类前面要加入一个英文圆点/

例子:
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>认识html标签</title>

<style type="text/css">

.stress{

color:red;

}

</style>

</head>

<body>

<h1>勇气</h1>

<p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。
就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

<p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,
还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复