新手学习CSS的一些些笔记

来源：互联网发布：windows字体下载大全编辑：程序博客网时间：2024/05/21 20:54

新手学习CSS的一些些笔记之 CSS基础课（一）

Cascade Style Sheet 级联样式单/表，层叠样式表，一个元素若附加了某样式，其中的内容及其中的子元素/孙子元素都会施用此样式。

CSS样式可以在如下有如下三种编写方式：

(1) 内联样式(inline)：使用style属性声明在元素中

(2) 内部样式(inner)：

<head><style type=”text/css”>...</style></head

(3) 外部样式(outer)：创建一个独立的.css文件

<head>

</head>

使用原则：

·内联样式只对当前元素有效；内部样式对当前整个页面有效；外部样式对所有引用它的页面都有效(可用于控制全站的风格)

·内联样式尽量少用；内部样式可以适量使用(全站中只有一个页面中使用的样式)；推荐使用外部样式(外部文件不要太多)

4.CSS基本语法：

属性名: 属性值;

内部/外部CSS：

选择器{ /*该样式的作用*/

属性名: 属性值;

...

属性名: 属性值;

}

5.CSS选择器——重点

说明：JavaScript/jQuery中也可以使用类似于CSS中的选择器进行元素的选择。

(1)通用选择器： *{...} 选择页面中的所有元素

(2)元素选择器：元素名{...} 选择指定的元素如div{...}

(3)ID选择器：#ID值{...} 仅选择具有指定ID的元素如#p2{...}

(4)类别选择： .类名{...}选择具有指定class的所有元素 .mark{}

(5)并列/过滤选择器：选择器1选择器2{...} 选择可被两个选择器同时选定的元素如p.mark{...} 或 .product.mark{...}

(6)子元素选择器：选择器1 选择器2{...} 选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素如div span{...} .product .mark{...}

(7)直接子元素选择器选择器1>选择器2{...} 选中选择器1中的直接子元素中可被选择器2选中的如div > span{...} IE6不支持

(8)多选/群组选择器：选择器1,选择器2,...选择器n{...} 选择可被任何一个选择器选中的元素 h2,#main,.mark{...}

(9)伪类选择器： :伪类名{...}

a:link{...} 选择所有未访问过的超链接

a:visited{...} 选择所有访问过的超链接

元素:hover{...} 当鼠标悬停于元素上方时 IE6只支持a:hover

元素:active{...} 当元素被激活时

input:foucs{...} 当元素获得输入焦点 IE7前都不支持

达内学习笔记，仅供参考~

lanpanda 2016.2.15

0 0