CSS学习笔记(一) 基本介绍

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学习笔记 】

posted @ 2019-02-10 11:04  半虹  阅读(553)  评论(0)  编辑  收藏  举报