CSS笔记

CSS层叠样式表

1、CSS

1) 什么是css（cascading style sheet）

叫层叠样式表，又叫级联样式表

2) 作用

实现了内容与表现的分离；提高了代码的可重用性和可维护性

 

2、CSS样式表的使用方式

使用方式共分三种，使用任何一种都可以更改页面的样式

1) 内联样式

将css样式定义在html的标签中

特点：不通用，只能定义某一标签的单独样式

2）内部样式表

将一系列样式定义在html的标签中

特点：当前网页任何一个标签都可以使用，体现出可重用性

3）外部样式表

将样式定义在外部的css文件中

特点：可以由任何一个页面进行样式表的引用，真正意义的实现了样式表的可重用性

 

3、内联样式的CSS

定义在html标签中的style属性里

;样式规则”>。多个样式规则之间，用; 进行区分

Css语法： 属性名称：属性值

 

4、内部样式表的CSS

样式内容要出现在中的

样式组成：选择器和样式声明

选择器：决定哪些元素能够使用定义好的规则

样式声明：由一对大括号包围着所有的样式规则

 

5、外部样式表

①创建一个文件以 .css作为后缀名；

②在css文件中写样式相关代码

选择器

{

属性名称：属性值；

}

③在页面中对css文件进行引用

”stylesheet”  type=”text/css”  href=”引入样式表的地址”>

 

6、CSS样式表特征

1）继承性

大部分的样式属性是可以被继承的

2）层叠性

可以为一个标签定义多个样式；不冲突时，多个样式可以合并 成一个

3）优先级

样式定义冲突时，会根据样式规则的优先级进行应用样式。

级别最高：内联样式  

其次：内部样式表 与 外部样式表 使用就近原则，谁离标签 近就先执行谁

4）调整优先级

将 !important 添加在样式规则后面，中间用空格隔开

语法：

选择器{属性：属性值 !important;}

 

 

 

 

7、选择器

规定了哪些元素能够使用定义好的样式

1）通用选择器

表示： * 

可以与任何一个元素匹配；

多数用在设置网页整体的默认样式

*{

font-size:12px;

font-family:”微软雅黑”;

}

2）元素选择器

由html元素名称作为选择器；

用于修改当前选择器所对应的元素的默认样式

语法：元素名称{ }

p{

font-size:12px;

color:red;

  }

3）类选择器

语法： . classname{ }

注意：类名不能以数字开始

使用：能够附带class属性的元素都能使用类选择器，将元素 的class属性设置为类名即可

一个标签可以同时引入多个类选择器 

表示div同时引用了c1和c2两个类样式

类选择器和元素选择器结合使用：能够实现对某种元素中不同 样式的细分控制。又称之为“分类选择器”

语法：元素选择器.类选择器

p.classname{ }

4）id选择器

语法：#idname{ }

 

特点：作用于指定id属性值的元素上

id属性作用：标识元素的唯一的值；引用样式表中的id样式。

5）群组选择器

语法：选择器1，选择器2，选择器3，......{ }

选择器的声明是以” , ”隔开的选择器列表

作用：将相同的规则用于多个元素中

 

6）后代选择器

语法：选择器1 选择器2 选择器3  ...{ }

选择器的声明是以”空格”隔开的选择器列表

作用：根据元素的位置关系（层次）找到元素，然后改掉样式

div  span{}    修改div元素中的span元素的样式

div  .classname{}   修改div元素中的class为classname的元 素的样式

7）子代选择器

语法：选择器1>选择器2{ }

只描述父子关系的元素，标签嵌套页局限于父子关系的嵌套

span.s1是fieldset的子代元素

span.s2不是fieldset的子代元素，是div的子代元素，是fieldset 的后代元素

fieldset>span 对

fieldset>.s1   对

8）伪类选择器

语法：通过 “ : ”作为结合符

选择器:伪类选择器

作用：为一些选择器添加特殊的效果，多数表示的是一个元素 （选择器）的不同状态

伪类选择器的分类：

链接伪类

:link    尚未访问的链接

:visited  访问过的链接

动态伪类

:hover  鼠标悬停在元素上的状态

:active  元素被激活时的状态

:focus  元素获取焦点时的状态

目标伪类

元素状态伪类

结构伪类

否定伪类

 

8、选择器的优先级

    内联样式 > ID选择器 > 类（伪类）选择器 > 元素选择器

权值:1,0,0,0    0,1,0,0         0,0,1,0          0,0,0,1

 1越靠左，其优先级别就越高

 

div{color:blue;}

#d1{color:green;}

.red{color:red;}

 

9、颜色

#rrggbb：十六进制数 如#ff0000

每一位的范围：0—9  A—F

#rgb：简写的十六进制数 如 #f00

表示颜色的英文单词，如red

10、尺寸

尺寸属性是用于设置元素的宽度和高度

单位一般为像素或百分比

宽度属性：width

 max-width

 min-width

高度属性：height

 max-height

 min-height

 

在HTML中哪些元素适合使用尺寸属性

  ①所有的块级元素 div,p,h1,ol,li,ul...

  ②大部分行内元素不适合使用尺寸属性 span...

  ③存在width和height属性的元素适合使用尺寸 img，table

 

溢出：使用尺寸属性控制框的大小时，如果内容所需的空间大于框本 身的空间，会导致内容溢出

overflow  当内容溢出元素框时如何处理

属性：visible 显示

hidden 隐藏

scroll 滚动

auto 自动（只出现纵向滚动条）

overflow-x 横向溢出

overflow-y 纵向溢出

11、边框 border

border设置四个方向边框的宽度(width)，样式(style)，颜色(color)

border-left/right/top/bottom：width style color 

定义四个边框某一方向的宽度 样式 颜色

 

border-width:  四个边框的宽度

border-style:  四个边框的样式

border-color:  四个边框的颜色

 

border-left/right/top/bottom-width： 定义某一方向的宽度

border-left/right/top/bottom-style：  定义某一方向的样式

border-left/right/top/bottom-color：  定义某一方向的颜色

 

边框倒角 border-radius

为简写属性，按顺时针顺序设置四个倒角

取值为绝对值或者百分比

单独定义：border-top-left-radius  左上角

 border-top-right-radius  右上角

 border-bottom-left-radius  左下角

 border-bottom-right-radius  右下角

 

12、边框阴影 box-shadow

box-shadow:h-shadow v-shadow blur spread color inset;

box-shadow:10px(水平) 10px(垂直) 5px(模糊程度) #ccc(颜色)  inset(内阴影);

向方框添加阴影

取值：h-shadow  必选 水平阴影

v-shadow  必选 垂直阴影

blur   可选 模糊程度

spread  可选 阴影的尺寸

color  可选 阴影的颜色

inset    将外部阴影(outset)改为内部阴影

13、图片边框 border-image

由图像作为元素的边框显示效果

border-image：src width repeat

border-imagr:url(img/a.jpg)  26px  repeat

repeat值： repeat  平铺

 round  铺满

    stretch  拉伸

 

border-image-source:url(img/a.jpg)  图片的路径

border-image-width:   图片边框的宽度

border-image-repeat:repeat/round/stretch  图片边框是否平铺

14、轮廓 outline

轮廓是绘制于元素周围的一条线，在边框的外围。

语法：

outline:color  style  width;

outline-color:  轮廓的颜色

outline-style:  轮廓的样式

outline-width:  轮廓的宽度

 

 

15、框模型(盒子模型)

定义了元素框处理元素内容、内边距padding、边框border和外边 距margin的方式。

Width和height指内容区域的宽度和高度

外边距margin

外边距是指围绕在边框外围的空白区域

默认情况下，html中的块级元素都存在外边距（body，h1,h2,..h6,p）

margin取值为auto时，实现的是水平方向居中显示的效果

取值：margin：10px；  表示上下左右各为10px

margin：5px 10px； 表示上下5px，左右10px

margin：5px 10px 5px； 表示上5px，左右10px，下5px

margin：5px 10px 5px 10px；表示上5px，右10px，下5px，  左10px

外边距合并

 当上下外边距相遇时，他们将形成一个外边距，称为外边距合并  最终的外边距以数值大的为准

 

内边距padding

内边距时指内容区域与边框之间的距离

注意：会扩大元素边框所占用的区域

赋值：（取值与margin相似）

padding：value

内边距属性值可以为像素、百分比，不能是负数

padding-left

padding-right

padding-top

Padding-bottom

CSS重写

方式：将margin padding全部设置为0；将list-style-type：none；

*{margin:0px;padding:0px;list-style-type:none;}

目的：去除有些标签默认显示效果

hn,p,ul,ol,di,dt,dd,

 

16、背景

①背景颜色background-color

②背景图片 background-image

默认值是none，表示背景上没有放置任何图像

如果需要设置一个图像，需要用起始字母url附带一个URL地址

background-image：url(“image/a.jpg”)

③背景重复 background-repeat

  取值： repeat  垂直、水平方向平铺

repeat-x  水平方向平铺

repeat-y  垂直方向平铺

no-repeat  不平铺，仅显示一次

④背景图像尺寸

属性：background-size

取值：v1 v2  宽度  高度

v1%  v2%  原始大小的百分比

cover  扩展背景图像，使背景图完全覆盖背景区域

contain  将图像扩展至最大尺寸，让高度与宽度自适应 内容区域

⑤背景图片固定

属性：background-attachment

取值：scroll  默认情况下随着滚动条滚动

fixed 背景图像固定，不会随着滚动条而滚动，

实现水印效果

⑥背景定位

属性：background-position

取值：

left  ：在页面左边显示

right ：页面右边显示

center ：页面中间显示

top ：页面顶部显示

bottom ：页面底部显示

x%  y% ： 第一个值表示水平偏移量

第二个值表示垂直偏移量

x  y ：  x表示水平偏移量，y表示垂直偏移量

 

 

⑦背景绘制区域（颜色）

属性：background-clip

取值：border-box  背景被裁减到边框，默认值

padding-box 背景被裁减到内边距框

content-box  背景被裁减到内容框

⑧背景的定位区域（图像）

属性：background-origin

取值：border-box  背景图像相对于外边框来定位

padding-box 背景图像相对于内边距框来定位 content-box  背景图像相对于内容框来定位

⑨背景属性background

在一个属性中声明所有的相关的背景属性

语法：background：color  url( )  repeat  attachment  position； 背景颜色  路径  平铺    固定      定位

      background：red url(a.jpg)  no-repeat  fixed  -35px -25px;

 

17、渐变属性

渐变是指两种或多种颜色之间的平滑过渡

线性渐变

径向渐变

重复渐变

渐变语法：使用background-image属性进行设置

取值：linear-gradient  线性渐变

radial-gradient  径向渐变

repeating-linear-gradient  重复线性渐变

repeating-radial-gradient  重复径向渐变

 

①线性渐变

linear-gradient(angle.color-point1,color-point2,...) 

background-image：linear-gradient（to bottom,red 0%，green 30%， yellow 50%，blue 100%）

angle ： 为第一个参数，指定渐变的方向，可以是角度值，也可  以是关键词。如：angle：to top(odeg)/to right(90deg)/

to bottom(180deg)/to left(270deg)

color-point:表示颜色的起始点、中间点或者结束点，取值为颜色 和位置的组合。如：red 0%、green50%

②径向渐变

radial-gradient（size at position，color-point1，color-point2，...）

background-image:radial-gradient(200px at left top,red 0%,

blue 50%,yellow 100%);

position： 为第一个参数，指定渐变的圆心位置，默认值为center； 可以取值为数值、百分比或者关键字；可省略。

size表示半径；position可以为left right top bottom /x y(x 轴y轴)

如：200px at left top

color-point：表示颜色的起始点、中间点、最终点，取值为颜色和 位置的组合。如：red 10%，green 50%，blue 100%

③重复线性渐变

repeating-linear-gradient(angle，color-point1，color-point2，...) 

background-image:repeating-linear-gradient(180deg,red 0px,

green 30px,red 60px);

④重复径向渐变

repeating-radial-gradien(size at position,color-point1,color-point2，...)

background-image:repeating-radial-gradient(50px at center,

red 0%,blue 50%,orange 100%);

浏览器兼容性

对于不支持的版本：

Firefox 需要加前缀 -moz-

Chrome 和Safari需要加前缀  -webkit-

Opera 需要加前缀  -o-

 

background-image:linear-gradient(angle.color-point1,color-point2,...) 

background-image:-moz-linear-gradient(angle.color-point1,color-point2,...) 

background-image:-webkit-linear-gradient(angle.color-point1,color-point2,...) 

background-image:-o-linear-gradient(angle.color-point1,color-point2,...) 

 

 

 

 

 

 

 

 

 

 

1、文本格式化

1）控制字体

指定字体：font-family：value value.....；

字体大小：font-size：value；（font-size:24px；）

字体加粗：font-weight：bold加粗/normal正常/value取值;

字体样式（斜体）：font-style:normal/italic;

小型大写字母显示：font-variant:normal/small-caps小型大写;

2）字体属性font

简写格式：font:font-style  font-variant  font-weight  font-size   font-family;

常用：font:12px Times,微软雅黑；

3）控制文本格式

文本颜色 color

文本水平对齐方式 text-align:left/center/right

文字线条修饰  

text-decoration：none无/underline(下划线)/overline(上划 线)/line-through(删除线)

4）行高 line-height

注意：如果行高的高度高于文本自身的高度的话，那么文本将在这段区域内垂直居中。

属性：line-height：value；

取值：常用值 与所在容器设置相同高度

 

5) 首行文本缩进 text-indent

属性：text-indent：value；

取值：缩进的距离  比如20px

6）文本阴影 text-shadow

属性：text-shadow：h-shadow  v-shadow  blur  color；

    水平方向    垂直方向    阴影程度  颜色

7）溢出

处理空白white-space：normal/nowrap(不换行)；

文本溢出 text-overflow：clip(溢出)

 elipsis(显示...);

8）文本换行（只对英文有效）

长单词换行  word-wrap:normal

 break-word(强制换单词);

文本换行   word-break:normal

break-all 不关心单词显示完整问题，该换就换

keep-all; 当文本到达边界处后根据半角空   格”  ”和连字符”-”进行换行

2、表格常用样式属性

边距属性：padding

尺寸属性： width  height 设置表格或者单元格的尺寸

文本格式化属性

背景属性 ：设置表格或者单元格的背景色或者背景图像

Border属性 ：设置表格的边框

 

垂直方向对齐

vertical-align属性

取值：vertical-align:top/middle/bottom;

在表单元格中，设置单元格框中的单元格内容的对齐方式

表格特有属性

①边框合并  属性：border-collapse

取值：separate(默认值)

collapse(边框合并)

②边框边距  属性：border-spacing

取值：v1 ：水平和垂直方向的距离都是v1

v1  v2：v1表示水平间距

v2表示垂直间距

注意：必须是border-collapse为separate的时候才有作用

table的 属性cellspacing

 

 ③标题位置  属性：caption-side

取值：top 默认

bottom  靠下

 ④显示规则  属性：table-layout

取值：auto 列的宽度由单元格的内容决定，默认

fixed 列宽由表格宽度和列宽来决定，不受内 容来影响

 

3、定位

定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

 

①普通流定位

页面中的块级元素框从上到下一个接一个地排列。

内联元素将在一行中从左到右排列水平布置

 

 

②浮动定位

是指将元素排除在普通流之外，即元素脱离标准文档流；元素将不在页面占用空间；将浮动元素放置在包含框的左边或者右边；浮动元素依旧位于包含框之内。

浮动的框可以向左或向右移动，知道它的外边缘碰到包含框或另一个浮动框的边框为止；经常使用它来实现特殊的定位效果。

属性：float

取值：none/left(左浮动)/right(右浮动)

 

清除浮动 

用来清除浮动所带来的影响，定义了元素哪边上不允许出现浮动 元素。

属性： clear

  取值：left/right/both

float与overflow

包含框内的元素被应用了float之后，包含框的高度会发生变化，高度变成0.

在包含框内设置一个overflow属性后才能显示高度。

  在父框中添加： overflow:hidden;

 

定位属性

position属性

取值：static 默认

relative 相对定位

absolute 绝对定位

fixed

偏移属性

top/bottom/right/left：value

堆叠顺序

z-index：value

value的数值越大，越靠近用户，就显示在上面

value的数值越小，离用户越远

如：z-index:10;显示在上面

 z-index:5;显示在下面

 

相对定位

元素框相对于它原来的位置偏移某个距离

首先设置position：relative

然后使用 left或right、top或bottom属性设置水平方向的偏移量

 

 

 

 绝对定位

将元素的内容从普通流中完全移除，不占据空间

相对于最近的已定位的元素来进行偏移，如果元素外围没有已定位的元素，那么他的位置是相对于body元素来进行偏移的

首先设置position：absolute

然后使用 left或right、top或bottom属性设置水平方向的偏移量

 

 

固定定位

将元素的内容固定在页面的某个位置

元素从普通流完全移除，不占用页面空间；当用户向下滚动页 面时元素框并不随着移动

首先设置position：fixed

然后使用 left或right、top或bottom属性设置水平方向的偏移量

 

 

显示方式

display属性

取值：none  (隐藏)，框及其所有内容都不再显示，不占空间的隐藏

block  让行内元素表现为块级元素（显示）

inline  让块级元素表现为行内元素（显示）

inline-block  行内块元素，本身是行内元素但具备块元素的特点

显示效果

visibility属性

取值：visible  默认值，元素可见

hidden  元素不可见，但依然占据空间

collapse  用在表格元素时，可删除一行/列，不影响表格布局

opacity属性

取值：opacity：value；

value的取值从0.0（透明）到1.0（不透明）

vertical-align属性

取值：baseline 默认，元素放置在父元素的基线上

top  把元素的顶端与行中最高元素的顶端对齐

bottom 把元素的顶端与行中最低的元素的顶端对齐

middle 把此元素放置在父元素的中部

设置单元格框中的单元格内容的垂直对齐方式。

修改图像周围的文本相对于图像的垂直对齐方式。

对于行内块级元素，如，可设置垂直对齐方式。

定义行内元素的基线相对于该元素所在行的基线的垂直对齐 方式。

光 标

cursor属性

取值：default  三角

pointer 手状

crosshair 十字

text  I状

wait  等待

help  箭头+问号

鼠标悬停在链接上时，光标变成手状

鼠标悬停在文本区域时，显示I形状

鼠标悬停在一个按钮上时，光标会显示箭头状

 

列表样式

列表项标志 list-style-type属性

 无序列表取值：none 无标记

disc 实心圆

circle 空心圆

square 实心方块

有序列表取值： none 无标记

decimal 数字

lower-roman  小写罗马数字

upper-roman  大写罗马数字

列表项位置 list-style-position属性

取值：outside 标记位于文本的左侧，放在文本外，默认

inside 标记放在文本内

列表项图像 list-style-image属性

list-style-image：url（“image/a.jpg”）

指定图像作为有序或无序列表的列表项标志

 

列表属性list-style

简写方式：list-style：type  url  position

  标志  图像  位置

一般情况下，直接将list-style属性设置为none

 

 

CSS3  2D转换

transform属性

取值：translate(v1  v2); 左(X轴)和顶部(Y轴)位置给定的参数，

从当前元素位置移动。

rotate(30deg); 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale(2,4); 该元素增加或减少的大小，取决于宽度（X轴）和高度

（Y轴）的参数：

skew(30deg,20deg); 该元素会根据横向（X轴）和垂直（Y轴）

线参数给定角度.

matrix (0.866,0.5,-0.5,0.866,0,0); matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。