您的位置：360文档中心› CSS初学到精通手把手

CSS初学到精通手把手

CSS初学到精通手把手
CSS初学到精通手把手

样式选择器一：选择器

1：html有标签，css就有选择器

2:选择符就是赋予内部或外部样式表的名字

3:html的标签，用来改变一个指定标签的样式

4：任何一个元素都可以是一个css选择符。

样式选择器分为哪能种类：

.nav{

}

#left{

}

a,b,h1,#one{

}

a b h1 #two{

}

a:hover,a;link{

}

二、类选择器

1: 同一个选择器能有不同的类、因而允许同一个元素有不同的样式。

定义的方式：① :「tag 元素名」(class)可拉斯；类名（类名为自定义的、如果不加tag则代表所有html 元素）：

②:（同一个元素可以使用多个类，类名之间使用空格分开）

例：cla1 cla2 cla3 为自定义

PPPPPPPPPP

背景色为绿色字体白色有一个像素红色的边框实体(solid)的

PPPPPPPPPP

颜色为红色字体大小12像素

PPPPPPPPPP

出程现出cla3 one two 的三种样式，因为one two前面没有元素只有点，所以对每个html的样式都管用。一个加红色背景蓝色边框4cm的P字

PPPPPPPPPPPPPPPP

PPPPPPPPPPPPPp

这是只针对P标签的样式。对

是不能起到作用的。但是如何：把p(P)去掉直接留点就对所有的标签都可以定义了。(点cla1)

三：ID选择器

1:在html页面中，ID属性指定了某个单一元素，id属性就用来对单一元素定义单独样式。

2:一个html页面中，id属性值要唯一。

3：使用ID的格式：#idname{ } (idname是自定义的名称) 就是：

例：#id2{ background-color:#00FF00; color:#FFFFFF; border:1px solid red}

四：关联样式选择器

1：关联选择器只不过是一个用空格隔开的两个或更多的单一选择器给成的字符串。

2：因为层叠顺序的规则，它们的优先权比单一的选择符大

3：必须按关联关系使用。

4：只要能保持关联关系就可以，不管是在多少层。(组合是用逗号，关联是用空格)

例：

AAAAA

五：组合选择器

1：为了减少样式表的重复声明，组合是允许的，只要使用（，逗号）隔开每个选择符就可以了。例：

AAA

CCCC

WWW

他们的样式是一样的``

五：伪元素选择器

?伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义方式

?目前只有a和p两处HTML元素可以使用

?使用时的语法

?标签：伪元素标签［.类名］：伪元素

?a:link 没有任何运作前的状态

?a:hover 光标移到到超链接上的状态

?a:active: 选择超链接的状态

?a:visited 访问过超连接的状态

?p:first-letter 一个段落中首个字母的状态

?P:first-line 一个段落中首行的状态

六：样式规则的继承

1:所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。

2：优先级：关联>ID选择器>CLASS选择器>HTML标签选择器

Css常见属性

一：字体样式

font: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科> 二：CSS中常见的控制文本的属性

三：CSS中常见的控制背景的属性

四：应用多个图标放到同一个图片里

多个图标放到同一个图片里，通过定义某区块的背景定位，调用同一个图片中不同位置上的小图标，好处是可以减少对服务器的请求次数，从而加快页面的访问速度。

五：边框属性

1：任何一个元素都可以设置边框。

2：边框属性是用于设置一个元素边框风格、边框宽度、边框颜色的略写，可以一起设置4边的边框，也可对上边框、右边框、下边框和左边框单独设置。

3：边框风格属性

①：可以通过边框风格属性border-style设定上下左右边框的风格，该属性用于设置一个元素边框的样式，而且必

须用于指定可见的边框。可以使用1到4个关键字，如果四个值都给出了，它们分别应用于上、右、下和左边

框的式样。

②如果给出一个值，它将被运用到各边上。

③如果两个或三个值给出了，省略了的值与对边相等

④也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的

风格

4：各边的风格使用的属性值

none：没有边框dotted：点线式边框dashed：破折线式边框solid：直线式边框double：双线式边框groove：槽线式边框ridge：脊线式边框inset：内嵌效果的边框outset：突起效果的边框

5:边框宽度属性

①可以通过边框宽度属性border-width设定上下左右边框的宽度，该属性用1到4个值来设置元素的边界，值是一

个关键字或长度，不允许使用负值长度。

②如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。

③如果只给出一个值，它将被运用到各边上。

④如果两个或三个值给出了，省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框

宽度属性的略写。

⑤也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边

的宽度。除了可以使用长度单位定值外，还可以用medium（是默认值）、thin（比medium细）或thick（比medium 粗）值。

6：设置颜色

可以通过边框颜色属性border-color设定上下左右边框的颜色，可以使用1到4个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。

7：略写的边框属性

①：CSS属性border是边框属性的一个快捷的综合写法，是一个用于设置一个元素边框的宽度、式样和颜色的略

写，它包含border-width，border-style和border-color属性。

②：边框属性border只能设置四种边框，也只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

8:鼠标光标属性

在网页中默认的鼠标指针只有两种，一种是最普通的箭头，另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术，当将鼠标移动到链接上时，可以看到多种不同的效果。CSS可以通过Cursor属性实现鼠标形状的改变，其属性可以是默认的鼠标形状default、小手形状hand、交叉十字crosshair、文本选择符号text、Windows的沙漏形状wait、带有问号的鼠标help以及各个方向的箭头属性值。

例：h1{ background-color:red;

background-image:url(22.jpg);

cursor:pointer; }

这里的鼠标是成小手状态的

cursor:pointer; （小手）cursor:wait;等待

六：CSS中常见的控制列表的属性

例：list-style-type:circle（空心圆）list-style-type:square（方块的）list-style-type:none(无、什么都没有的)

1: list-style-image 插入图片这面所说的是无序列表。通过我们做都是把样式调成无，然后加图片进来做样式有助于各种浏览器的显示。有序列表就是把

    改为：
      道理同上。

      Css+div概述

      一：“无意义”的元素div和span

      1：HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS 结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用

      2：它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。

      span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。

      3：div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

      区别：Div属块标签他会默认换行的而span 标签是不换行的。什么时候用div ？答：需要换行的时候就用div 不需要换行的时候就用span 它两个都是区块标签通常div定义一个大的盒子如图：

      二：盒子模型

      每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

      外边距指：盒子与盒子之间的距离margin

      内边距指：盒子内容到盒子边的距离padding

      (div盒模型)

      这里面是内容

      例：这里的样式是错误的。

      三：布局中的主要样式

      ?Font (字体) line-height ( 行高) color (颜色) margin (外边距)

      ?Padding (内边距) border （边框）text-align (文本左右居中) background (背景颜色) width: (宽) Height (高) float: clear display

      四：定位属性

      五：区块属性(区块模型)

      六：行框和清理

      在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性的值可以是left、right、both 或none，它表示框的哪些边不应该挨着浮动框。

      ?区块居中设计

      ?高度和宽度固定的区块居中（position）(position:absolute绝对的)

      ?高度和宽度可变的区块居中(margin)

      ?布局页面局中

      ?设置两列浮动的布局

      ?设置三列浮动的布局

      ?设置多列浮动的布局

      实例css

      几大重点(IE支持)：margin-left:auto; margin-right:auto; （外边距左右符动）从而让正文部份起到一个居中的效果。

      1：但FF不支持。这时候我们就要在body里面加：text-align:center 表示在body里面的所有文本都是居中的，从而达到了IE和FF一致的效果。但是这样子的话，正文部份的本文文字，这里我们指的正文部份了的，他们都会居中了，我们这个时候只要在正文里面加：text-align:left 这样就可以把正文的文字默认成为我们常用的靠左边了。

      本文记住关键词：margin-left:auto; margin-right:auto; text-align:center text-align:left

      height:800px; /* etm */ “/* etm */ ”代表临时的意思，后面可能会被去掉。

      background:green; /*etm */

      单词：clear:both; （可呢尔波士）意思表示：让他不挨着任何浮动区块，就是中间间隔点缝隙，增加网站美观。

      2：IE指定的最低高度像素：18px，所以当我们在设置18个像素以下的时候，我这个时候就要用我们以前学过的：overflow:hidden; 超出部份自动隐藏，如果我们在这个时候把，clear:both; 中的区块设置为10，但在IE还是显示的还是18px，所以我们就用：overflow:hidden; (超出部份被隐藏)把其他的部份给隐藏了。

      3：IE 会自动调整高度，而FF不会自动调整，指定多高就是多高。如果我们在头部设置了高度，那么这个时候FF 就会受到控制高度，解决问题的方案：把头部的高度去掉，我们在刚开始做的时候设置的高度都是临时性的：用/* etm */表示一下。这个时候我们只要去掉头部的高度的话，FF就可以自动调整高度了。

      4；脱离文档流：float:left; 脱离文档流向左摆动，如果我们头部包括三个部份，那么我们可以把前二个部份脱离文档流向左摆动，第三个部份向右摆动。float:right; ，这样就可以把头部三个部份并列排在一起了。

      5；但是如果排在一起之后，有些地方是紧挨在一起的，这个时候我们可以用：margin-right:10px; 进行设置他的左右边距就可以了。

      二：FF如果使用浮动则是正常的，（我们最好是把所有的都脱离文档流）然后去掉背景颜色。float:left;

      三：IE和FF在列表(ul)中也有很大的差别：所以我们在这个时候一定要把