type="text/css"的作用是什么？
它是CSS样式的标记。
type->类型,这里是style的属性
text/css ->文本/css,即css文本
type="text/css" 表示的是浏览器的解释方式，如果不定义的话，有些CSS效果 浏览器解释得不一样。

层叠次序

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

内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

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

selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。
每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}

后代选择器

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意：id 属性只能在每个 HTML 文档中出现一次。

在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>
注意：类名的第一个字符不能使用数字！

css 笔记1的更多相关文章

  1. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  2. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  3. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  4. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  5. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...

  6. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  7. HTML+CSS笔记 CSS进阶续集

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  8. HTML+CSS笔记 CSS进阶

    文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...

  9. HTML+CSS笔记 CSS入门续集

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...

  10. HTML+CSS笔记 CSS入门

    简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...

随机推荐

  1. IE haslayout的理解与bug修复

    要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE下的显示错误,就是源于 haslayout 什么是 haslayout ? ...

  2. Java MySQL(SqlHelper)

    1.配置文件为: driver=com.mysql.jdbc.Driver url=jdbc\:mysql\://localhost\:3306/user_info user=root passwor ...

  3. 查找checked的checkbox和raido

    <fieldset id="checkArray"> <input type="checkbox" name="chk[]" ...

  4. A GDB Tutorial with Examples--转

    http://www.cprogramming.com/gdb.html A GDB Tutorial with Examples By Manasij Mukherjee A good debugg ...

  5. Java代码签名证书申请和使用指南

    第1步 下载签名工具 Step 1: Download Signing Tools 如果您还没有签名工具,请到SUN公司网站免费下载:http://java.sun.com/j2se/,推荐下载JDK ...

  6. 【转】合理的布局，绚丽的样式，谈谈Winform程序的界面设计

    从事Winform开发很多年了,由于项目的需要,设计过各种各样的界面效果.一般来说,运用传统的界面控件元素,合理设计布局,能够设计出比较中规中矩的标准界面:利用一些换肤的控件或者部分界面组件,能够设计 ...

  7. i.mx6 Android5.1.1 初始化流程之init.rc解析（未完成）

    接上一篇:i.mx6 Android5.1.1 初始化流程之init进程 参考资料:http://blog.csdn.net/mr_raptor/article/category/799879 这个博 ...

  8. ansible 回调函数处理

    https://www.u3v3.com/ar/1421 https://serversforhackers.com/c/running-ansible-2-programmatically

  9. protobuf简单测试应用

    protobuf是google推出的一种数据交换协议,比较适合应用于底层服务交互,nodejs提供protobufjs包的实现,下面是一个简单的测试demo: 首先是.proto文件: package ...

  10. EF面试题

    为什么用EF而不用原生的Ado.Net? 1.极大的提高开发效率:EF是微软自己的产品,跟VS拉法集成度比较好,开发中代码都是强类型的, xiefl代码效率非常高,自动化程度非常高,命令式的编程. 2 ...