html h 好看的样式,html5 中有关 css3 样式

html5 中有关 css3 样式

外部式 CSS 样式 (也可称为外联式) 就是把 css 代码写一个单独的外部文件中, 这个 css 样式文件以. css 为扩展名,

在 < head > 内 (不是在 < style > 标签内) 使用 < link > 标签将 css 样式文件链接到 html 文件内, 如下面代码:

注意:

1.css 样式文件名称以有意义的英文字母命名, 如 main.css

2.rel="stylesheet" type="text/css" 是固定写法不可修改

3. 标签位置一般写在 < 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 样式中的选择器:

每一条 css 样式声明 (定义) 由两部分组成, 形式如下:

选择器{

样式;

}

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

如: body{

}

标签选择器其实就是 html 代码中的标签如右侧代码编辑器中的 < html>

例如下面代码:

p{font-size:12px;line-height:1.6em;}

上面的 css 样式代码的作用: 为 p 标签设置 12px 字号, 行间距设置 1.6em 的样式

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

语法:

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

1. 英文圆点开头

2. 其中类选器名称可以任意起名(但不要起中文)

使用方法:

第一步: 使用合适的标签把要修饰的内容标记起来, 如下:

胆小如鼠

第二步: 使用 class="类选择器名称" 为标签设置一个类, 如下:

胆小如鼠

第三步: 设置类选器 css 样式,

如下:

.stress{color:red;}/ 类前面要加入一个英文圆点 /

例子:

认识 html 标签

.stress{

color:red;

}

勇气

三年级时, 我还是一个 < span class="stress">胆小如鼠 的小女孩, 上课从来不敢回答老师提出的问题, 生怕回答错了老师会批评我

就一直没有这个 < span class="stress">勇气 来回答老师提出的问题学校举办的活动我也没勇气参加

到了三年级下学期时, 我们班上了一节公开课, 老师提出了一个很简单的问题, 班里很多同学都举手了, 甚至成绩比我差很多的, 也举手了,

还说着:"我来, 我来" 我环顾了四周, 就我没有举手

来源: http://www.qdfuns.com/article/49321/d735f69c9704eb768c675fe90bfb7a2f.html