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. http get请求获取server返回的应答数据

    libcurl库中的參数CURLOPT_WRITEFUNCTION所设置的回调函数应该是这种: size_t fun_cb( char *ptr, size_t size, size_t nmemb, ...

  2. AFNetworking的详细解析

    AFNetworking serializer 分析 AFNetworkResponse.png 1. AFHTTPRequestOperationManager *manager = [AFHTTP ...

  3. Linux批量生成生成帐户脚本,随机密码

    此脚本应用于生产环境下生成帐户,也可生成成百上千个密码相同的帐户.脚本代码如下: 批量生成: #!/bin/bash for name in tom jerry joe jane do useradd ...

  4. u-boot的内存分布和全局数据结构

    U-boot,除非在RAM中调试,一般情况下都是从flash中执行一段代码,然后将flash中储存的代码和数据搬移到ram中,然后跳转到ram中执行.当然这应该也是一般的bootloader的执行方式 ...

  5. bzoj 4318 OSU! —— 期望DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4318 期望DP,因为平方的期望不等于期望的平方,所以用公式递推: 第一次推错了囧,还是看这位 ...

  6. leetcode数学相关

    目录 166分数到小数 169/229求众数 238除自身以外数组的乘积 69Sqrt(x) 求平方根 231Power of Two 166分数到小数 给定两个整数,分别表示分数的分子 numera ...

  7. SQL Server 行转列,列转行

    一.多行转成一列(并以","隔开) 表名:A 表数据: 想要的查询结果: 查询语句: SELECT name , value = ( STUFF(( SELECT ',' + va ...

  8. Asp.net MVC Checkbox控件 和 Nullable<bool>, 或bool?类型

    @Html.CheckBoxFor() 这个方法生成两个Input HTML标签,不明白为什么这样,如果数据库是Nullable<bool>类型,就会报错. 网上的解决方法是这样: 方法一 ...

  9. Go中的main函数和init函数

    Go里面有两个保留的函数:init函数(能够应用于所有的package)和main函数(只能应用于package main).这两个函数在定义时不能有任何的参数和返回值.虽然一个package里面可以 ...

  10. IN、EXISTS的相关子查询用INNER JOIN 代替--性能优化

    如果保证子查询没有重复 ,IN.EXISTS的相关子查询可以用INNER JOIN 代替.比如: IN.EXISTS的相关子查询用INNER JOIN 代替--sql2000性能优化