您的位置：首页 > Web前端 > HTML5

HTML5 CSS介绍及三种使用方法

2017-02-23 13:35 399 查看

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

在定义css后我们便可直接通过设置样式来使用，不需要重复定义

css定义：

选择符：又称选择器，指明网页中要应用样式规则的元素

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。如

p{font-size:12px;color:blue;}

为了容易阅读，可以将每条代码写在一个新行内，如：

p{
font-size:12px;
color:blue;
}

注释：

css中使用/*注释*/格式来注释

Html中使用<!–注释语句–>

css三种用法：

- 内联式css样式，直接写在现有的HTML标签中。如

<p style="color:red">文字是红色</p>

嵌入式css样式，写在当前的文件中，如：

<style type="text/css">
span{
color:red;
}
</style>

外部式css样式，写在单独的一个.css文件中，在本文件用引用，如：

<link href="xxx.css" rel="stylesheet" type="text/css" />

注意：

1.xxx.css文件，名称要与有意义的英文命名，如head.css

2.rel=”stylesheet” type=”text/css为固定写法，不可修改

3.通常< link>放置于< head>标签内

三种方式的优先级顺序：

内联式 > 嵌入式 > 外部式

也就是说，如果同时三种方法对一个标签进行设置，那么只有内联式起作用，注意，平时开发，外部式要写于嵌入式前面，如果顺序不一样，优先级顺序也会不一样

代码示例：

html代码：

<!DOCTYPE html>
<html>
<head>
<title>css使用</title>
<link rel="stylesheet" type="text/css" href="test.css">/*外部式写于嵌入式前面*/
<style type="text/css">
p{
font-size:14px;/*字号*/
color:blue;
}
</style>
</head>
<body>
<span style="color: red;font-size: 18px;font-weight: bold;">沁园春·雪</span><!--内联式-->      毛泽东
<p>北国风光，千里冰封，万里雪飘。<!--嵌入式-->
望长城内外，惟余莽莽；大河上下，顿失滔滔。<br>
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。<br>
江山如此多娇，引无数英雄竞折腰。
惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。<br>
<lable>一代天骄，成吉思汗，只识弯弓射大雕。</lable><!--外部式-->
俱往矣，数风流人物，还看今朝。</p>
</body>
</html>

css代码：

lable{
color: black;
}

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航