HTML5学习笔记（五）：CSS基础
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元素下，所以这么做将改变所有元素的颜色。
选择器
派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
我们直接来看一个例子：
<!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基础的更多相关文章
- Html5 学习笔记 --》html基础 css 基础
HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...
- HTML5学习笔记五：html5表单
表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...
- 4月1日学习笔记（CSS基础）
CSS初始化 内边距padding padding属性宽度是按照上右下左的顺序来的,否则单独设置就是padding-left... 边框border border可以设置样式(border-style ...
- 3月31日学习笔记（CSS基础）
背景属性 文本属性 direction 属性影响块级元素中文本的书写方向.表中列布局的方向.内容水平填充其元素框的方向.以及两端对齐元素中最后一行的位置. 注释:对于行内元素,只有当 unicode- ...
- HTML5学习笔记<五>: HTML表单和PHP环境搭建
HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...
- Java基础学习笔记五 Java基础语法之面向对象
面向对象 理解什么是面向过程.面向对象 面向过程与面向对象都是我们编程中,编写程序的一种思维方式.面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程.例如:公司打扫卫生( ...
- HTML5学习笔记二 HTML基础
一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...
- C++基础 学习笔记五：重载之运算符重载
C++基础 学习笔记五:重载之运算符重载 什么是运算符重载 用同一个运算符完成不同的功能即同一个运算符可以有不同的功能的方法叫做运算符重载.运算符重载是静态多态性的体现. 运算符重载的规则 重载公式 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
随机推荐
- Libevent例子(二)
服务端 #include<netinet/in.h> #include<stdio.h> #include<string.h> #include<event. ...
- 转:3d max 2013 安装教程,凭着一种互联网精神提供给广大朋友
看到有人在ps区咨询如何安装3d max教程,当你进行第一步之前,请先断开网络连接第一步:运行安装程序 第二步:接受安装协议,点击下一步会提示输入序列号 第三步:你会看到已经安装完成了的界面 第四部: ...
- cas配置不通过登陆校验的页面
项目中的单点登录是通过CAS配置的,如果是未登录状态,那么请求在通过CAS过滤器校验时会转向登陆页面,无法通过访问类似http://localhost:8080/portal/business-plu ...
- Xcode 常用调试技巧总结
NSLog,po命令和普通断点调试相信每个iOS开发者都会,这里就不作介绍了. 一.Memory Graph Xcode8新增:Memory Graph解决闭包引用循环问题 有很多叹号说明就有问题了. ...
- java线程池的应用
package com.test; import java.util.concurrent.Callable; public class TestThread implements Callable& ...
- 树莓派进阶之路 (020) - 基于24位AD转换模块HX711的重量称量实验
参考文档:http://www.geek-workshop.com/thread-2315-1-1.html 参考文档:https://wenku.baidu.com/view/e5d5e4e2652 ...
- 搭建自己的 github.io 博客
1.前言 github.io 是基于 Github 的 repo 管理,这意味着咱们对其是有绝对的控制,这个跟放在第三方的平台比,可控性要好太多. 使用 github pages 服务搭建博客的好处有 ...
- Spring3整合Quartz实现定时作业
Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...
- gitlab hook declined错误
在向gitlab提交工程的时候,出现错误提示: remote: GitLab: You are not allowed to access master!remote: error: hook dec ...
- Python - 列表解析式/生成器表达式
列表解析式: [expr for iter_var in iterable if cond_expr] 生成器表达式: (expr for iter_var in iterable if cond_e ...