设计师学习HTML/CSS之路-07

时间 2019-11-30

标签设计师学习 html css 之路栏目 HTML 繁體版

原文原文链接

不了解前端的UI不是好美工，如下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!css

第7章 CSS样式基本知识

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

CSS样式代码插入的形式分3种：
1.内联式：把CSS代码直接写在现有的html标签中，以下代码：html

这里的文字是红色，字号为12px。前端

<p style="color:red;font-size:12px">
这里的文字是红色，字号为12px。
</p>
复制代码

css样式要写在style=""双引号中，多条样式代码中间用分号隔开。bash

7-2 嵌入式CSS样式，写在当前文的文件中

嵌入式的优点在于能够一对多修改样式。
学习

嵌入式css样式代码写在<style type="text/css">...</style>之间。
把须要带有css样式的文字放在<span></span>标签之间。ui

<head>
 <style type="text/css">
 span{
    color:red;
    font-size:20px;
 }
 </style>
</head>
复制代码

嵌入式css样式必须写在<style></style>之间，而且通常状况下嵌入式css样式写在<head></head>之间。spa

7-3 外部式CSS样式，写在单独的一个文件中

外部式css样式是把css代码写在一个单独的外部文件中管理。这个css样式以“.css”为扩展名，在<head>内使用<link>标签。以下：code

<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>
复制代码

单独外部文件以下：cdn

注意：
1. css样式文件名称以有意义的英文字母命名，如h1.css。<br>
2. 同嵌入式同样，把须要带有css样式的文字放在<span></span>标签之间。<br>
3. rel="stylesheet" type="text/css"是固定写法。<br>
4. <link>标签通常写在<head>内。
复制代码

7-4 三种方法优先级

优先级:
内联式(行内) > 嵌入式(head内) > 外部式(单独文件) 总结来讲就是就近原则htm