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 元素被不止一个样式定义时，会使用哪个样式呢？

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

  1. 内联样式
  2. 内部样式表
  3. 外部样式表
  4. 浏览器缺省设置

分组

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

<style type="text/css">

    h1,h2,a {color: crimson;}

</style>

继承

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

<style type="text/css">

    body {color: crimson;}

</style>

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

选择器

派生选择器

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

我们直接来看一个例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Hello</title>

     <style type="text/css">

         strong {color: green;}

         li strong {color: crimson;}

     </style>

 </head>

 <body>

     <p>这是一个<strong>重要的</strong>例子</p>

     <dl>

         <li>这是一个<strong>重要的</strong>例子</li>

     </dl>

 </body>

 </html>

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

id选择器

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Hello</title>

     <style type="text/css">

         #mydiv {color: green;}

         #mydiv p {color: crimson;}

     </style>

 </head>

 <body>

     <div id="mydiv">

         这是<p>一个</p>测试

     </div>

 </body>

 </html>

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

类选择器

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Hello</title>

     <style type="text/css">

         .mydiv {color: green;}

         .mydiv p {color: crimson;}

     </style>

 </head>

 <body>

     <div class="mydiv">

         这是<p>一个</p>测试

     </div>

 </body>

 </html>

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

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

属性选择器

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Hello</title>

     <style type="text/css">

         [title] {color: crimson;}

         [title=a] {color: green;}

         [title~=b] {color: yellow;}

         [title|=c] {color: blue;}

     </style>

 </head>

 <body>

     <p>这是一个测试</p>

     <p title="">这是一个测试</p>

     <p title="a">这是一个测试</p>

     <p title="c-b">这是一个测试</p>

     <p title="b c">这是一个测试</p>

 </body>

 </html>

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

 input[type="text"]

 {

   width:150px;

   display:block;

   margin-bottom:10px;

   background-color:yellow;

   font-family: Verdana, Arial;

 }

 input[type="button"]

 {

   width:120px;

   margin-left:35px;

   display:block;

   font-family: Verdana, Arial;

 }

HTML5学习笔记（五）：CSS基础的更多相关文章

  1. Html5 学习笔记 --》html基础 css 基础

    HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...

  2. HTML5学习笔记五：html5表单

    表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...

  3. 4月1日学习笔记（CSS基础）

    CSS初始化 内边距padding padding属性宽度是按照上右下左的顺序来的,否则单独设置就是padding-left... 边框border border可以设置样式(border-style ...

  4. 3月31日学习笔记（CSS基础）

    背景属性 文本属性 direction 属性影响块级元素中文本的书写方向.表中列布局的方向.内容水平填充其元素框的方向.以及两端对齐元素中最后一行的位置. 注释:对于行内元素,只有当 unicode- ...

  5. HTML5学习笔记<五>: HTML表单和PHP环境搭建

    HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...

  6. Java基础学习笔记五 Java基础语法之面向对象

    面向对象 理解什么是面向过程.面向对象 面向过程与面向对象都是我们编程中,编写程序的一种思维方式.面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程.例如:公司打扫卫生( ...

  7. HTML5学习笔记二 HTML基础

    一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...

  8. C++基础 学习笔记五：重载之运算符重载

    C++基础 学习笔记五:重载之运算符重载 什么是运算符重载 用同一个运算符完成不同的功能即同一个运算符可以有不同的功能的方法叫做运算符重载.运算符重载是静态多态性的体现. 运算符重载的规则 重载公式 ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  10. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

随机推荐

  1. 给mysql配置phpmyadmin可视化管理工具

    1.配置IIS管理器1.控制面板——程序——程序和功能——启用或关闭windows功能并稍稍等候2.internet information services3.勾选ftp服务器.web管理工具.应用 ...

  2. spring boot 配置动态刷新

    本文测试使用的spring cloud版本为: Dalston.SR1 很多朋友只知道spring cloud config可以刷新远程git的配置到内存中, 却不知道spring cloud con ...

  3. sqlserver修改为windows验证登陆, 程序的调整

    业务需求, 客户要求sqlserver改为windows验证登陆, sa用户不可用, 程序端如何修改呢? 我在本机做了个测试. 环境: sqlserver2016, springmvc+spring+ ...

  4. LLVM和clang

    LLVM编译器架构 LLVM项目是一套工具的集合,它包括模块化.可复用的编译器及一些列工具链技术. LLVM最开始是Low Level Virtual Machine的简称,但现在它并不是传统意义上的 ...

  5. 【RS】Local Low-Rank Matrix Approximation - LLORMA ：局部低秩矩阵近似

    [论文标题]Local Low-Rank Matrix Approximation (icml_2013 ) [论文作者]Joonseok Lee,Seungyeon Kim,Guy Lebanon  ...

  6. jenkins+maven+git+ 邮件自动转发 持续化集成 图文教程

    1.所需要的插件,安装plugin ,进入mangae Jenkins→ manage Plugins, 切换到Available tab, 选择如下plugin 安装 Gitplugin, GitH ...

  7. 【经验总结】 fisheye 3.1.5 安装、破解全过程 图文教程（2.0以上版本均可成功！）

    声明:此破解仅为个人娱乐,如果你有钱,请支持正版! 重要说明,只要把fisheye先关掉即可,然后执行下面的破解步骤,一样可以破解!本人已测试通过. 一.安装.破解fisheye最新版3.1.5 所需 ...

  8. iOS扩大UIButton按钮的可点击区域

    一.开发中遇到的问题 我们在开发时有时遇到这中情况:UI给的图片很小,button的点击区域要求比较大.如果用 setBackgroundImage: 方式设置图片会导致图片也跟着button的fra ...

  9. 代码管理（三）sourcetree 的使用

    一.SourceTree简介   SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,拥有可视化界面,容易上手操作.同时它也是Mercurial和Subv ...

  10. SourceTree 代码库管理工具

    1.SourceTree 简介 SourceTree 是拥有可视化界面的项目版本控制软件,适用于 git 项目管理,window.mac 均可用. 官网下载地址 SourceTree 其它下载地址 S ...