CSS知识概况

1、什么是CSS

层叠样式表(cascading style sheets),用来定义如何显示HTML元素。

有三种方法在HTML中使用CSS样式:

内联样式表:CSS代码写在现有的HTML标签中,直接使用style属性改变样式。

案例1:内联式设置

内容

嵌入式样式表:CSS样式代码写在标签之间,表示可以文档通用,一般情况下CSS写在之间。

案例2:嵌入式设置

div{

background-color:red;

color:white;

}

外部样式表:CSS代码写在一个单独的外部文件里面,这个CSS样式文件以“.CSS“为扩展名,在内使用标记来将css样式文件链接到HTML文件。

案例3:外部样式表

因为head优先级高于body,如果是相同的属性,可以使用嵌入式,如果是特殊要求的,可以使用内联式。

2、CSS选择器:

选择器通常是需要改变样式的HTML元素,每条声明由一个属性和一个值组成。包含以下几种类型:

标签选择器,比如div,找到所有的div标签,然后赋值样式,也可以用p、dr等

ID选择器,以#开始,后加名称,如"#i1",ID标签不能重复

class选择器,以点开始,后加名称,如“.c1”

多级选择器,以.class名称+空格+标签+空格...+.+子class名称

案例4:选择器

/*标签选择器*/

div{

color:red;

}

/*ID选择器*/

#i1{

font-size:56px;

color:green;

}

/*class选择器*/

.c1{

background-color:yellow;

}

/*多级选择器,可以使用--.c2 div p a--*/

.c1 div p .c2{

background-color:green;

}

内容

id选择器

class选择器1

class选择器2

class选择器3

oo

多级标签

效果:

属性选择器,跟随class,.class[属性名='属性值'];选取class选择器下的属性

案例5:属性选择器

.sp[qita='a']{

color:red;

}

1

2

3

4

效果:

3、CSS的属性值:

4-1 颜色属性color来定义文本:

颜色名称,如color:green

十六进制,如color:#ff6600

简写方式,如color:#f60

RGB方式,如rgb(255,255,255),

RGBA方式,如color:rgba(255,255,255,1)

4-2 字体属性

字体大小:font-size:14px

字体:font-family:微软雅黑,serif

字体加粗,font-weight,定义字体加粗,可以使用名称,如normal、bold(粗)、bolder(更粗)、lighter(更细),还可以使用数字,700=bold

4-3 背景属性

主要包括背景颜色、背景图片、背景重复、背景位置。

背景颜色:background-color用来定义背景的颜色

背景图片:background-image,none表示不适用

背景重复:background-repeat,no-repeat,repeat-x在x轴上重复,repeat-y在y轴上重复。

背景位置:background-position。横向为left、right、center;纵向top、center、bottom;

4-4 文本属性

可以用文本属性设置行高、缩进和字符间距,

text-align 设置文本对齐方式,属性值可以取left、center、right

line-height 设置文本行高,属性值可以是具体的数值

text-indent 代表首行缩进

letter-spacing设置字符间距,比如letter-spacing:3px;

4-5:边距:

(Box Model) 规定了元素框处理元素内容、内边距、边框和外边距 的方式:

案例6:边框,去空格

效果:

4-6 position 属性

CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

fixed:按窗口固定,比如网页的头部图片固定

absolute:找上级position,会根据块级框定位,滚动时会移动

relative:单独的是没有作用的,需要和absolute结合使用,absolute相对于relative去定位

案例7:位置

其他

返回底部

返回顶部

返回中部

4-7 漂浮 属性

案例8:漂浮,一列显示

aa

bb

aa

bb

效果:

4-8 display属性

display:block

block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

4-9 其他案例:

案例9:小尖角的实现,主要是transparent的应用

.icon{

display:inline-block;

border-top:15px solid green;

border-bottom:15px solid red;

border-left:15px solid transparent;

border-right:15px solid transparent;

}

效果:

案例10:关于布局的实现,上侧固定标题栏,左侧目录栏,右侧内容栏

/*去body空格*/

body{

margin:0;

}

/*header格式*/

.pg-header{

height:48px;

background-color:rgb(22,121,81);

}

/*body左边栏目*/

.pg-body .body-menu{

position:absolute;

top:48px;

left:0;

bottom:0;

width:200px;

background-color:rgb(140,199,159);

}

/*内容栏目*/

.pg-body .body-content{

position:absolute;

top:48px;

left:210px;

right:0;

bottom:0;

background-color:rgb(76,172,199);

overflow:auto;/*如果超出内容则自动添加滚动条*/

}

效果:

案例11:z-index类图层作用

.model{

width:500px;

height:300px;

background-color:green;

position:fixed;

top:50%;

left:50%;

margin-left:-250px;

margin-top:-150px;

z-index:10;

}

.shadow{

position:fixed;

left:0;

right:0;

bottom:0;

top:0;

background-color:black;

opacity:0.4;

z-index:9;

}

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180107G0PTMX00?refer=cp_1026

扫码关注云+社区