CSS3（未完-不再更新）

单位：

绝对单位

in：英尺

cm：厘米

mm：毫米

pt：英镑

pc：皮卡

相对单位：

px：像素

%

em

css基本框架

内嵌样式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            p {
              /*
              注释
              */
                color: red;
                font-size: 30px;
                text-decoration: underline;
                font-weight: bold;
                text-align: center;
                font-style: italic;
            }
            h1 {
                color: blue;
                font-size: 50px;
                font-weight: bold;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <h1>大标题</h1>
        <p>内容</p>
    </body>
</html>

选择器{k:v; k:v; k:v;}

行内样式（行内未定义的但内嵌定义的会采用内嵌定义的内容）：

1

<p style="color: red; font-size: large;">行内样式</p>

外链样式

link标签（head里写入）：

1

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

alternate stylesheet是候选样式表

import（必须卸载style里）：

1

@import url(a.css);

选择器

标签选择器：所有某种类型的标签均采用的样式

例如

1

p{ font-size:14px; }

ID选择器：针对某个特定标签只使用一次，#开头，只能是数字、字母、下划线，字母开头，不能与标签同名，一个标签可以同时被ID选择器与标签选择器，多个选择器使用

例如

1
2
3
4
5
6
7
8


<head>
<style>
#mytitle{ border:3px dashed green; }
</style> 
</head>
<body>
  <h1 id="mytitle">内容</h1>
</body>

类选择器：.开头，针对想要的所有标签

例如

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<head>
<style>
  .one{
    color: red;
    font-size: 20px;
  }
</style> 
</head>
<body>
  <div class="one">内容一</div>
  <p class="one">内容二</p>
</body>

同一个标签可以有多个类选择器

1

<h3 class="testclass1  testclass2">标题</h3>

不能够写成class="" class=""的形式

class为css使用，id为js使用

通用选择器

*开头，匹配任何标签

1
2
3
4


* {
    margin-left: 0px;
    margin-top: 0px;
}

后代选择器

a b c的形式，某个元素的后代或后代的后代…

例如

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<style type="text/css">
  /*代表divl下面的p上色为红*/
    .div1 p {
        color: red;
    }
  /*代表h3下面的b下面的i上色为红*/
  	    h3 b i {
        color: red;
    }
</style>

交集选择器

类选择器a.b，类选择器接ID选择器a#b的形式，取交集

1
2
3


h3.special {
    color: red;
}

交集选择器也可以连写但不推荐

并集选择器

a,b,c的形式

1
2
3


p,h1,.title1,#one {
    color: red;
}

子代选择器

a > b，只能选择儿子，不能选择后代，即不能选择b后面的元素

例如

1
2
3


div > p {
    color: red;
}

序选择器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<head>
<style type="text/css">
    ul li:first-child {
        color: red;
    }
</style>
</head>
<body>
  <ul>
    <li class="first-child">项目一</li>
    <li>项目二</li>
    <li>项目三</li>
  </ul>
</body>

first-child不用写类名，为了兼容性则需要写

相邻兄弟选择器

a+b，a后面的紧挨着的第一个兄弟，即他后面的一个元素

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<head>
  <style type="text/css">
    h3 + p {
        color: red;
    }
</style>
</head>
<body>
 <h3>标题</h3>
<p>段落</p>
<p>段落</p>
</body>

字体

font

1
2
3
4
5
6
7
8


p{
	font-size: 50px; 		/*字体大小*/
	line-height: 30px;      /*行高*/
	font-family: 幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认，英文在前*/
	font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/
	font-weight: bold;	/*粗体，mormal或bold或400、700*/
	font-variant: small-caps;  /*小写变大写*/
}

行间距=(行高-字体大小)/2

行高、字体大小一般采用偶数

可以简化为：font: 加粗字号/行高/ 字体

同时还有

letter-spacing: 0.5cm ;：单个字母之间的间距

word-spacing: 1cm; ：单词之间的间距

text-decoration: none; ：字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线

text-transform: lowercase;：单词字体大小写。uppercase大写、lowercase小写

color:red; ：字体颜色

text-align: center; ：在当前容器中的对齐方式。属性值可以是：left、right、center、justify

text-transform: lowercase; ：单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）

列表属性

1
2
3
4
5


ul li{
	list-style-image:url(images.gif) ;  /*列表项前设置为图片*/
	margin-left:80px;  /*外边距*/
	float: left;     /*水平排列*/
}

`overflow`属性

超出范围的内容

visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
hidden：不显示超过对象尺寸的内容。
auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<style type="text/css">
		div{
			width: 200px;
			height: 100px;
			margin-right: 100px;
			float: left;
		}

		#div1{
			overflow: auto;
		}
  	#div2{
			overflow: hidden;
		}
  	#div3{
			overflow: scroll;
		}
</style>

鼠标属性

cursor

auto：默认值。自动确定鼠标光标类型。

pointer：竖起一只手指。

hand：竖起一只手指。

1
2
3


p:hover{
	cursor: pointer;
}

图片滤镜

变黑白图

1

<img src="photo.jpg" style="filter:gray()">

背景

background-color:#ff99ff; 设置元素的背景颜色，red，rgb(255,0,0)，#ff0000，css3的rgba。三位简化写法，#000 黑，#fff 白，#f00 红，#222 深灰，#333 灰，#ccc 浅灰

background-image:url(images.gif); 将图像设置为背景，可以用，隔开用多个背景。

background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。

no-repeat不要平铺；

repeat-x横向平铺；

repeat-y纵向平铺。

background-position:center top; 设置背景图片在当前容器中的位置，也可以是px，(向右,向下)，单词是左右，上下

background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动，fixed,scrool。属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。

综合属background，它的作用是：将上面的多个属性写在一个声明中。

1
2


background:color url repeat position attachment;
background:red url(1.jpg) no-repeat 100px 100px fixed;

background-size背景尺寸大小，可以写成100px 100px， 50% 50%，100% auto，cover始终充满容器超出隐藏，contain完整显示不够空白两者均长宽比不变

background-origin背景显示从什么地方开始padding-box、border-box、content-box分别是内边距，边框，内容区域

background-clip是否超出边框，超出剪掉，可以写border-box，padding-box，content-box

background-image: linear-gradient(方向, 起始颜色, 终止颜色);方向可以是to left、to right、to top、to bottom、顺时针角度30deg，颜色可以用很多，可以写成 #000 0%, #000 25%,#fff 25%,一直到100%来描述渐变过程也可以用red等，#000 25%, #fff 25%可以变成色块，方向可以用100px at center，at left top，at 50px 50px 来呈现径向渐变

clip-path: circle(50px at 100px 100px);裁剪

伪类

伪类：同一个标签，根据不同状态有不同样式，用:表示

两种伪类

静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前

:visited 链接被访问过之后

动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候

:active “激活”：鼠标点击标签，但是不松手时。

:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接a标签

a标签的四种伪类：

:link “链接”：超链接点击之前

:visited “访问过的”：链接被访问过之后

:hover “悬停”：鼠标放到标签上的时候

:active “激活”：鼠标点击标签，但是不松手时。

必须按顺序写

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


    <head>
    <style type="text/css">
        a:link{
            color: green;
        }
        a:visited{
            color: gray;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: blue;
        }
    </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>
    </body>

a:link、a:visited都是可以省略的，但是要么同时省略要么不省略

动态伪类

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<head>
<style type="text/css">
		  input:focus{
			  border:3px solid #FF6F3D;
			  color:white;
			  background-color:#6a6a6a;
		  }
	  
		  /*
		  鼠标放在标签上时显示蓝色
		  */
		  button:hover{
			  color:blue;
		  }
	  
		  button:active{
			  color:red;
		  }
	  
		</style>
</head>
<body>
	<input type="text">
	<button>按钮</button>
</body>

继承

文字样式的具有继承性，例如color、text-、line-、font-

盒子、定位、布局的属性不能继承

层叠性

权重顺序

ID选择器 > 类选择器、属性选择器、伪类选择器 > 标签选择器、伪元素选择器

行级样式 > 内嵌样式表 > 外部样式表

外部样式表的ID选择器 > 内嵌样式表的标签选择器

相同的权重，写在后面的为准。没有描述到准确某一个位置的情况，则谁谁描述的准确、接近则值应该选择哪个

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


	<head>
	<style type="text/css">
		.hezi ul li{
			color:blue;
		}

		.hezi ul li.first{
			color:red;
		}
		/*
		这样用不行，权重不对
		.hezi first{
			color:red
		}
		*/

  </style>
<body>
	<div class="hezi">
		<ul>
			<li class="first">第一行</li>
			<li>第二行</li>
			<li>第三行</li>
		</ul>
	</div>
</body>

!important优先级最高，但是比不过直接选中的，干不过就近原则，不推荐使用，例如：

1

font-size:60px !important;

盒子模型

div、span、a都是盒子。图片、表单都是文本，图片里不能放东西

width和height：内容的宽度、高度（不是盒子的宽度、高度）。

padding：内边距。

border：边框。

margin：外边距。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			border: 1px solid red;
			padding: 20px;
			margin: 30px;
		}

	</style>
 </head>

 <body>
	<div>第一个div</div>
	<div>第二个div</div>
 </body>

padding拥有四个方向，分别是 padding-top、padding-right、padding-bottom、padding-left，可以按照上右下左的顺序简写

1

padding:30px 20px 40px 100px;

如果只写了三个值，则顺序为：上、右和左、下。

如果只写了两个值，则顺序为：上和下、左和右。

后写的会把前面的层叠掉

有些元素默认带padding，比如ul有40px，可以用

1
2
3
4


*{
	margin: 0;
	padding: 0;
}

来清除

border拥有三个要素：像素（粗细）、线型、颜色即border-width、border-style、border-color。默认为黑色。

同时也有四个方向border-top、border-right、border-bottom、border-left

可以简写为

1
2
3


.div1{
	border: 2px solid red;
}

按小属性拆开

1
2
3
4
5


.div1{
	border-width:10px 20px;
	border-style:solid dashed dotted;
	border-color:red green blue yellow;
}

按三要素拆开

1
2
3
4
5


.div1{
	border-width:10px;
	border-style:solid;
	border-color:red;
}

也可以按照方向、全部进行拆分

比较稳定的border-style有solid、dashed、dotted

在html中

文本级标签：p、span、a、b、i、u、em。

容器级标签：div、h系列、li、dt、dd。

（p只能放文字、图片、表单，不能放自己和其他容器级）

在css中

行内元素为html中文本级元素除p

块级元素为html中容器级元素还有p

css中

行内元素与其他元素并排，不能设置宽高

块级元素能设置宽高，默认宽度为父级的100%

块级元素可以用display: inline;来变成行内元素，这样就不能设置宽高，但是能并排

行内元素可以用display: block;来变成块级元素，可以设置宽高，不能并排

定位

浮动

1

float: left;

这个命令可以让多个元素并排，如果让2个元素并排，则需要都设置浮动，否则发生重叠，设置浮动后可以设置宽高，浮动元素当改变空间大小时始终会贴靠。文字不会被浮动的盒子遮挡住，会形成字围，浮动如果没有设置内容宽度会自动变成内容宽度

如果需要2个导航栏，那么li的高度需要至少等于div，因为需要祖先div有高度，否则两个ul会并列，clear:both;不允许左右侧有浮动对象，因此也可以使用，但是会造成margin失效，因为div默认高度为0。或者中间添加一个空的div，内外部均可

相对定位

1
2
3


	position: relative;/*相对定位*/
	left: 50px;/*横坐标：正值向右，负值向左*/
	top: 50px;/*纵坐标：正值向下，负值向上*/

相对定位用来微调元素，或做绝对定位的参考

left：右移

right：左移

top：下移

bottom：上移

绝对定位

1
2
3


position: absolute;  /*绝对定位*/
left: 10px;  /*横坐标*/
top/bottom: 20px;  /*纵坐标*/

绝对定位不再遵循行内元素、块级元素的规则，不需要display:block就可以设置宽高

top从页面左上角再是，bottom浏览器首屏窗口的左下角

在盒子内部用绝对定位的时候以最近的已经定位的祖先元素为定位点

固定定位

固定定位：相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。与IE6不兼容

未完待续…