设计师学习HTML/CSS之路-07
2018-08-19 本文已影响0人
HU_Wei
不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!
第7章 CSS样式基本知识
7-1 内联式css样式，直接写在现有的HTML标签中
CSS样式代码插入的形式分3种：
1.内联式：把CSS代码直接写在现有的html标签中，如下代码：
<p style="color:red;font-size:12px">
这里的文字是红色，字号为12px。
</p>
<p style="color:red;font-size:12px">
这里的文字是红色，字号为12px。
</p>
css样式要写在style=""双引号中，多条样式代码中间用分号隔开。
7-2 嵌入式CSS样式，写在当前文的文件中
嵌入式的优势在于可以一对多修改样式。
嵌入式css样式代码写在<style type="text/css">...</style>之间。
把需要带有css样式的文字放在<span></span>标签之间。
<head>
<style type="text/css">
span{
color:red;
font-size:20px;
}
</style>
</head>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
7-3 外部式CSS样式，写在单独的一个文件中
外部式css样式是把css代码写在一个单独的外部文件中管理。这个css样式以“.css”为扩展名，在<head>内使用<link>标签。如下：
<link href="h1.css" rel="stylesheet" type="text/css" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>外部式css样式是把<span>css代码</span>写在一个单独的外部文件中管理。这个css样式以“.css”为扩展名。
</P>
</body>
</html>
单独外部文件如下：
image
注意：
1. css样式文件名称以有意义的英文字母命名，如h1.css。<br>
2. 同嵌入式一样，把需要带有css样式的文字放在<span></span>标签之间。<br>
3. rel="stylesheet" type="text/css"是固定写法。<br>
4. <link>标签一般写在<head>内。
7-4 三种方法优先级
优先级:
内联式(行内) > 嵌入式(head内) > 外部式(单独文件)
总结来说就是就近原则
