关于cssの笔记

一、css简介

简单来说css是用来设计html文本样式的工具。

二、实例

CSS 实例CSS声明总是以分号(;)结束，声明总以大括号({})括起来:p {color:red;text-align:center;}为了让CSS可读性更强，你可以每行只描述一个属性:实例p{color:red;text-align:center;}CSS 注释注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 \"/*\" 开始, 以 \"*/\" 结束, 与c/c++语言相同，实例如下:/*这是个注释*/p{text-align:center;/*这是另一个注释*/color:black;font-family:arial;}

三、关于id和class的区别

id和class可能在html里看起来用处不大，但在与css和js联系的交互上十分重要。

CSS Id 和 Classid 和 class 选择器如果你要在HTML元素中设置CSS样式，你需要在元素中设置\"id\" 和 \"class\"选择器。id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 \"#\" 来定义。以下的样式规则应用于元素属性 id=\"para1\":实例#para1{text-align:center;color:red;}尝试一下 »Remark ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。class 选择器class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点\".\"号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。实例.center {text-align:center;}尝试一下 »你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用 class=\"center\" 让该元素的文本居中:实例p.center {text-align:center;}尝试一下 »Remark 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。补充：其他选择器和选择器的优先级如果你要在 html 标签中设置 CSS 样式，那么你有四种方法，即 css 选择器有四种。除了提到的 id 和 class 选择器外，第三种选择器为标签选择器，即以 html 标签作为 css 修饰所用的选择器。实例<style>h3{color:red;}</style><h3>菜鸟教程</h3>第四种选择器即直接在标签内部写css代码。实例<h3 style=\"color:red;\">菜鸟教程</h3>这四种 css 选择器有修饰上的优先级，即：第四种 > id > class > 第三种