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

不了解前端的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内) > 外部式(单独文件)
总结来说就是就近原则

推荐阅读更多精彩内容

  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 1,259评论 0 30
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,911评论 1 87
  • 第6章 开始学习CSS,为网页添加样式 1、认识CSS样式CSS全称为“层叠样式表 (Cascading Styl...
    夏沫xx阅读 322评论 0 8
  • 2016对我而言是一个重要的开篇。 以前的我其实很虚伪,对自己基本满意。表面年轻气盛无所畏惧,实际一遇事就想逃避,...
    idlefish阅读 52评论 0 0
  • 在项目实际的开发中,MBProgressHUD有时候不能够满足项目需求,所有有时候需要自己去定义。但在开发中也要主...
    A迷城阅读 830评论 0 3