1、简介

层叠样式表(Cascading Style Sheets,CSS)用于为 HTML 元素 指定样式,从而使得内容与表现分离

当一个 HTML 元素被多个 CSS 样式定义时,最终的样式确定顺序如下(优先级从小到大排列):

  • 浏览器缺省设置
  • 外部样式表
  • 内部样式表
  • 内联样式

(1)外部样式表

当样式需要应用于很多页面时,外部样式表是理想的选择

我们可以使用 <link> 标签链接样式表,<link> 标签一般位于 HTML 文档头部

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

(2)内部样式表

当单个文件需要特殊的样式时,可以使用内部样式表

我们可以使用 <style> 标签定义样式,<style> 标签一般位于 HTML 文档头部

<head>
<style type="text/css">
/* 这里写样式定义 */
</style>
</head>

(3)内联样式

当单个元素需要特殊的样式时,可以使用内联样式

我们可以在需要定义内联样式的标签中使用 style 属性指定样式

<p style="color: red;">这是一个段落</p>

2、语法

CSS 语法规则由两部分组成,分别是 选择器声明语句

选择器用于定位需要改变样式的 HTML 元素,声明语句用于指定 HTML 元素需要使用的样式

由于选择器和声明语句的内容较多,所以我们将会使用两篇文章分别讲解

文章传送门:

语法格式如下:

selector {
property: value;
property: value;
......
}

一个简单的例子(垂直导航栏)如下,这里使用的是内部样式表指定样式:

<!DOCTYPE HTML>
<html>
<head>
<style>
ul.linkList {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.linkList a:link, ul.linkList a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #bebebe;
text-align: center;
text-decoration: none;
}
ul.linkList a:hover,ul.linkList a:active {
background-color:#cc0000;
}
</style>
</head>
<body>
<ul class="linkList">
<li><a href="https://github.com/forwhfang">Github</a></li>
<li><a href="https://blog.csdn.net/wsmrzx">CSDN</a></li>
<li><a href="https://www.cnblogs.com/wsmrzx">博客园</a></li>
</ul>
</body>
</html>

【 阅读更多 CSS 系列文章,请看 CSS学习笔记

CSS学习笔记之基本介绍的更多相关文章

  1. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  2. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  3. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  4. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  5. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  9. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. 一个NHibernate的BUG

    一.背景 我们如今做的项目,用NHibernate实现数据訪问层. 訪问数据时,有的数据库表是确定的:有明白的表名.字段名.这时候依照常规的方法处理就可以:建立数据库表到类的映射.使用HQL读写数据库 ...

  2. 【特征匹配】SIFT原理之KD树+BBF算法解析

    转载请注明出处:http://blog.csdn.net/luoshixian099/article/details/47606159 继上一篇中已经介绍了SIFT原理与C源代码剖析,最后得到了一系列 ...

  3. 超简洁代码实现CircleImageView

    效果图: 页面代码: public class CircleView extends ImageView { private Paint mPaint = new Paint(); public Ci ...

  4. Oracle VM VirtualBox使用的注意事项

    Oracle VM VirtualBox使用的注意事项 Oracle VM VirtualBox 上克隆虚拟机 方法一 1.复制源虚拟里的 vdi 文件到新的目录 2.命令行进入 Oracle VM  ...

  5. ASP.NET快速开发框架不得不做的几个功能、高大上档次后台管理UI界面

    俗话说磨刀不误砍柴工,确实,一早上花一个小时去磨刀一天下来肯定能多砍很多柴.我们做软件开发也是同样的道理,有套好开发框架在手里,开发也是事半功倍.那么一套MVC快速开发框架至少得具有哪些功能才能帮我们 ...

  6. B1024 生日快乐 递归。。。

    bzoj1024叫生日快乐,其实很简单,但是没看出来就很尴尬... Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括win ...

  7. Google Chrome调试常用快捷键

    Ctrl+Shift+I调出开发者工具 Ctrl+R刷新(界面显示不清楚,刷新后变清楚)

  8. javaweb中的三个域

    1.Request域 程序产生数据,显示完了就没用了,就用这个域. 2.Session域 程序产生数据,出了显示用,待会还要用,就用这个域. 3.ServletContext域 程序产生数据,数据显示 ...

  9. 10.Flask-上下文

    1.1.local线程隔离对象 不用local对象的情况 from threading import Thread request = ' class MyThread(Thread): def ru ...

  10. LeetCode Weekly Contest 28

    1. 551. Student Attendance Record I 2. 552. Student Attendance Record II hihocode原题,https://hihocode ...