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学习笔记 】
CSS学习笔记之基本介绍的更多相关文章
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- CSS学习笔记10 相对定位，绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- poj 3468 A Simple Problem with Integers（线段树+区间更新+区间求和）
题目链接:id=3468http://">http://poj.org/problem? id=3468 A Simple Problem with Integers Time Lim ...
- MySql解压版使用
1.解压 2.配置环境变量 3.新建空目录data,修改ini配置文件,修改basedir和datadir 4.管理员运行cmd,进入bin目录 5.mysql -install,如果提示错误,先my ...
- 飘逸的python - 极简的二叉树前中后序通杀函数
对于任一结点.能够按某种次序运行三个操作: 訪问结点本身(N) 遍历该结点的左子树(L) 遍历该结点的右子树(R) 用来表示顺序,即,前序NLR/中序LNR/后序LRN. 以下我们用namedtupl ...
- CMDBuild安装
近日来,老板要在内部部署一套IT资产管理系统,要笔者去调研一下,测试了GLPI.OCSNG(没记错吧)和CMDBuild之后,发现还是CMDBuild的功能较为强大,虽然暂时不具备SNMP之类的工具, ...
- P1228 地毯填补问题（分治）
P1228 地毯填补问题(分治) 题目描述 相传在一个古老的阿拉伯国家里,有一座宫殿.宫殿里有个四四方方的格子迷宫,国王选择驸马的方法非常特殊,也非常简单:公主就站在其中一个方格子上,只要谁能用地毯将 ...
- C 非标准库（conio.h）
所谓的 C 标准库(C standard library),是指在 ISO C 或者 POSIX 标准中定义的: POSIX is a superset(超集) of the standard C l ...
- 认证与授权协议对比：OAuth2、OpenID、SMAL
认证授权是目前大多数系统都必须要实现都功能,认证就是验证用户都身份,授权就是验证身份后对受限资源的访问控制.最开始是单个平台要做,后来在互联网时代到来,一个账户可登陆多个平台,然后是各种开放平台账户共 ...
- bzoj 3231 [ Sdoi 2008 ] 递归数列 —— 矩阵乘法
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3231 裸矩阵乘法. 代码如下: #include<iostream> #incl ...
- Android开发中的日期格式化
下面的转换符来自Java,但是在android中同样可用.(以下表格内容来自互联网.) 常见日期格式化转换符 转换符 说 明 示 例 %te 一个月中的某一天(1-31) 2 %tb 指定语言环 ...
- 题解报告：hdu 4764 Stone（巴什博弈）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4764 Problem Description Tang and Jiang are good frie ...