css

层叠样式表

链接方式

行内样式表

写在和 HTML 标签里的

1
style=""

内联样式表

写在 style 标签里的

1
<style></style>

外联样式表

写在一个单独的 css 文件中

1
<link rel="stylesheet" type="text/css" href="">

href=”” 里写 css 文件的地址

选择器

id 选择器

唯一性,一般不用,留给 JavaScript

给标签 id 赋值,css 里 #id

1
2
3
<div id="di"></div>
#di{
}

class 选择器

给标签 class 赋值,css 里 .class

可以写多个,名字之间用空格分割

非常常用

1
2
3
4
5
<div class="dc1 dc2"></div>
.dc1{
}
.dc2{
}

标签选择器

css 直接写标签名

用时需注意,因为会修饰HTML里所有的该标签

1
2
3
<div></div>
div{
}

组合选择器

多个选择器一起修饰一条代码

1
2
3
4
5
<div id="di" class="dc"></div>
#di{
}
.dc{
}

层级选择器

根据 HTML 标签嵌套顺序

1
2
3
<div><div><p></p></div></div>
div div p{
}

属性选择器

根据 HTML 的某一个属性

1
2
3
<div name="dn"></div>
div[name=dn]{
}

伪类选择器

一般用于 a 标签

a:link 超链接为访问时的样式

a:visited 超链接访问过后的样式

a:active 点击时的样式

a:hover 鼠标停留时的样式

a:first-child 同级标签的第一个

a:last-child 同级标签的最后一个

1
2
3
4
5
6
7
8
9
10
11
12
13
<a></a>
a:link{
}
a:visited{
}
a:active{
}
a:hover{
}
a:first-child{
}
a:last-child{
}

注:

hover 和 active 可以用于其他标签

first-child 和 last-child 使用时该级标签必须是同种标签

通配符

匹配页面的所有标签

1
2
3
<html></html>
*{
}

选择器优先级

行内样式 > id 选择器 > class 选择器 > 标签

层级选择器 > 标签选择器

样式继承

子级标签没有设置该属性,并且父级标签已经设置

子级标签会拥有父级设置的样式

css命名规范

1、命名要有意义

2、不能起中文

3、不能以数字开头

4、不能使用特殊符号 ~ $ % ^ & *

5、可以使用下划线_

标签类型相互转换

不显示

1
display:none;

转换成行内标签

1
display:inline;

转换成为块标签

1
display:block;

转换成行内块(常用)

1
display:inline-block;

常用属性

基础

背景颜色

1
background:red;

边框

1
2
3
4
5
border-left:5px solid #ccc;
border-right
border-top
border-bottom
border:5px solid color;

宽高

1
2
3
4
width:10px;
height:10px;
min-width:10px;
min-height:10px;

单位

1
2
3
4
10px
100%
em
rem

字体

字体大小

1
font-size:10px;

字体加粗

1
font-weight:bold;

字体样式

1
font-family:Microsoft YaHei;

字体倾斜

1
font-style:italic;

字体颜色

1
color:red;

文本

排列

1
text-align:left/right/center;

注:

left 靠左

right 靠右

center 居中

行高

1
line-height:10px;

注:
如果要实现文字上下居中,行高须设置与盒子一致

缩进

1
text-indent:2em;

阴影

1
text-shadow:5px 5px 5px #000;

属性:

左右偏移量

上下偏移量

透明度

颜色

盒子阴影

1
box-shadow:5px 5px 5px #000;

属性:

和 text-shadow 相同

文本超出隐藏

1
overflow:hidden;

线

1
text-decoration:none/underline/overline/line-through

属性:

none 去除下划线

underline 加下划线

overline 上划线

line-through 中划线

圆角

1
border-radius:10px;

注:

写成圆形可以将属性设置 50%

取消列表默认样式

1
list-style:none;

注:

无序列表和有序列表

背景

1
2
background:red;
background:url('img.png') no-repeat/repeat-x/repeat-y

属性:

加颜色就是背景颜色

加 url 就是背景图

no-repeat 不平铺

repeat-x x轴平铺

repeat-y y轴平铺

背景图定位

1
2
3
width: 5px;
height: 5px;
background:url('xuebi.png') no-repeat -3px -4px;

属性:

宽和高是要定位图片的宽高

-3px:图片左侧偏移量

-4px:图片上侧偏移量

透明度

1
opacity:0.5;

属性:

0-1取值范围

盒子模型

内容 content

内边距 padding

边框 border

外边距 margin

内边距为10px 的两种方式:

1
padding:10px;
1
2
3
4
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;

上下为 3 左右为 4

1
padding:3px 4xp;

上3 下5 左右4

1
padding:3px 4px 5px;

上 右 下 左

1
padding:1px 2px 3px 4px;

margin和padding是相同的设置的方法

浮动

作用

共处一行

特点

1、元素变成行内块

2、顶部对齐

3、半脱离文档流

注:
如果设置了浮动,就必须清除浮动

1
.clearFix:after{display:block;content:'';clear:both;};

定位

1
position:relative/absolute/fixed;

relative

相对定位

特点

1、不脱离文档流

2、不改变元素类型

3、参照物是他本身

作用

子级标签设置绝对定位时做参照物使用的

absolute

绝对定位

特点

1、完全脱离文档流

2、元素变成块

3、参照物是body体

但是如果你的父级加了(相对)定位参照物变成了父级

fixed

固定定位

特点

1、完全脱离文档流

2、元素变成块

3、参照物是屏幕可视区

注意:

如果你加了定位就要写 top left right bottom

z轴显示顺序

z-index:-1 < 普通元素 < 浮动元素 < 定位元素 < z-index:1