Div+CSS基础用法整理.pdf

Div+CSS 基础用法整理

一、善用 css 缩写规则

/*注意上、右、下、左的书写顺序*/

1. 关于边距（4 边）：

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px （省略的左等于右）

1px 2px (省略的上等于下)

1px （四边都相同）

2. 简化所有：

Font-style:italic; 斜体形式

Font-variant:small-caps/normal; 变体样式：小型大写字母/正常

Font-weight:bold;

Font-size:12px;

Line-height:1.2em(120%)/1.5em(150%);

Font-family:arrial,sans-serif,verdana;

缩写成：

Font:italic small-caps bold 12px/1.5em arrial,sans-serif;

注意：Font-size 和 Line-height 用斜杠组合在一起不能分开写。

5. 关于背景图片的：

List-style:none inside url(filename.gif);

二、运用 4 种方法来引入 CSS 样式

1.link

<link rel=‖stylesheet‖ type=‖text/css‖ href=‖a.css‖>

rel 关系

type 数据类型,有多种

href 路径

部分浏览器支持候选样式,关键字:alternate:

<link rel=‖stylesheet‖ type=‖text/css‖ href=‖a.css‖>

<link rel=‖alternate stylesheet‖ type=‖text/css‖ href=‖b.css‖>

<link rel=‖alternate stylesheet‖ type=‖text/css‖ href=‖c.css‖>

2.内部样式块

<style>

注意:此指令必须放在<style>容器中,并且在所有样式之前

建议放在一个 html 注释中,<!– –>浏览器会不显示注释内的内容,而 import 等 css 代码能正常

工作

4.内联样式

<p style=‖color:red;‖>

选择器是 css 的一个基本概念，基本规则如下：

1.规则结构：

h1 {color:red;}

选择器 {属性:值;}

这类是元素选择器，基本可以包括所有 html 的元素

属性值可以包括多个元素，如：border：1px solid red;

常用语法

1)分组：

选择器和声明都可以分组:

h1,h2,h3{color:red;background:#fff;} ,选择器用―,‖分割开,属性用‖;‖分割

3)ID 选择器,即与 id 属性对应的样式

#a{color:red;} ->这个定义对用 id=‖a‖的元素

2.这部分都是我们常见的 css 语法，下面谈一下我们不常见的选择器语法

1)父子结构,跟文档结构图对应

如 p span{border:1px solid red;}对应的是<p>下面的<li>标签,这个很用用途,可以准确定位.

2)属性选择器:(注意:属性选择器 ie7 才开始支持,以下版本并不支持,其他的浏览器基本可以)

语法:img[alt]{border:1px solid;}

个属性都有的 img 标签,也可以与具体值对应:如:img[alt=‖摄影‖]{};

3)伪类和伪元素

日常使用中主要是<a>标签的几个伪类:link:hover:active:visited

以及:first-child:first:before:left:right:lang:focus:fist-line 等等

注意:动态伪类可以应用到任何元素,如,input:focus{background:red;}当 input 标签获得焦点时