CSS 指层叠样式表 (Cascading Style Sheets)，在网页中用来定义网页的元素如何进行显示。

CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

书写格式

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：

selector {declaration1; declaration2; ... declarationN }

声明的写法按照冒号分隔属性名及属性值：

selector {property: value}

如果有多个声明使用分号隔开：

h1 {color:red; font-size:14px;}

如果属性值有多个单词需要使用引号包括：

p {font-family: "sans serif";}

定义位置

CSS在网页中可以在多个地方进行定义：

内联样式

直接在标签之上编写：

<h1 style="color: brown">Hello</h1>

内部样式表

编写在<head>标签内：

<head><meta charset="UTF-8"><title>Hello</title><style type="text/css">h1{color: brown}</style>
</head>

外部样式表

存储在外部test.css的文件内：

h1{color: brown}

网页引入：

<head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="test.css"/><title>Hello</title>
</head>

使用次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的顺序进行设置：

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

分组

我们可以通过分组将多个标签的样式进行统一的定义，如下：

<style type="text/css">h1,h2,a {color: crimson;}
</style>

继承

子元素从父元素继承属性。

<style type="text/css">body {color: crimson;}
</style>

因为所有可视元素都会放在body元素下，所以这么做将改变所有元素的颜色。

选择器

派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

我们直接来看一个例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello</title>
 6     <style type="text/css">
 7         strong {color: green;}
 8         li strong {color: crimson;}
 9     </style>
10 </head>
11 <body>
12     <p>这是一个<strong>重要的</strong>例子</p>
13     <dl>
14         <li>这是一个<strong>重要的</strong>例子</li>
15     </dl>
16 </body>
17 </html>

派生选择器使用空格进行分隔，可以指定一个嵌套关系进行样式的定义。

id选择器

指定id元素进行样式定义：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello</title>
 6     <style type="text/css">
 7         #mydiv {color: green;}
 8         #mydiv p {color: crimson;}
 9     </style>
10 </head>
11 <body>
12     <div id="mydiv">
13         这是<p>一个</p>测试
14     </div>
15 </body>
16 </html>

id选择器可以配合派生选择器使用。

类选择器

指定对应类名称的元素进行样式定义：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello</title>
 6     <style type="text/css">
 7         .mydiv {color: green;}
 8         .mydiv p {color: crimson;}
 9     </style>
10 </head>
11 <body>
12     <div class="mydiv">
13         这是<p>一个</p>测试
14     </div>
15 </body>
16 </html>

同样，可以配合派生选择器使用。

大家这里会不会有一个疑问：既然有了id选择器为啥还需要类选择器，这两个选择器看上去基本上是一致的？这是因为，一个文档中的元素id应该是唯一的，同时一个元素也只能定义一个id，而一个元素可以定义多个类，同时多个元素可以使用同一个类名。

属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello</title>
 6     <style type="text/css">
 7         [title] {color: crimson;}
 8         [title=a] {color: green;}
 9         [title~=b] {color: yellow;}
10         [title|=c] {color: blue;}
11     </style>
12 </head>
13 <body>
14     <p>这是一个测试</p>
15     <p title="">这是一个测试</p>
16     <p title="a">这是一个测试</p>
17     <p title="c-b">这是一个测试</p>
18     <p title="b c">这是一个测试</p>
19 </body>
20 </html>

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

 1 input[type="text"]
 2 {
 3   width:150px;
 4   display:block;
 5   margin-bottom:10px;
 6   background-color:yellow;
 7   font-family: Verdana, Arial;
 8 }
 9
10 input[type="button"]
11 {
12   width:120px;
13   margin-left:35px;
14   display:block;
15   font-family: Verdana, Arial;
16 }

转载于:https://www.cnblogs.com/hammerc/p/6375479.html

HTML5学习笔记（五）：CSS基础相关推荐

CSS学习笔记(一) CSS基础+CSS3新特性
思维导图文章目录思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
Html5 学习笔记 --》html基础 css 基础
HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head><meta char ...
3月31日学习笔记（CSS基础）
背景属性文本属性 direction 属性影响块级元素中文本的书写方向.表中列布局的方向.内容水平填充其元素框的方向.以及两端对齐元素中最后一行的位置. 注释:对于行内元素,只有当 unicode- ...
HTML5学习笔记二 HTML基础
一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...
C#学习笔记五面向对象基础
属性开头大写,字段开头小写 namespace 属性 { class Program { static void Main(string[] args) { person p = new person ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
Java学习笔记(五)：一张图总结完JVM8基础概念
Java学习笔记(五):一张图总结完JVM8基础概念引文最近在学习JVM的相关内容,好不容易把基础概念全部都学了一遍,却发现知识网络是零零散散的.迫不得已,只好再来一次总的归纳总结.为了更好的理解 ...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
吴恩达《机器学习》学习笔记五——逻辑回归
吴恩达<机器学习>学习笔记五--逻辑回归一. 分类(classification) 1.定义 2.阈值二. 逻辑(logistic)回归假设函数 1.假设的表达式 2.假设表达式的意义 ...

HTML5学习笔记（五）：CSS基础