CSS基础

一、选择器

1.1 元素选择器：

指定元素统一格式

p {text_align: center;}
1

1.2 id选择器：

当我们想精准找到某元素的时候要就id选择器

/* id选择器使用 # 来定义 */
#para1{ text-align:center;}
1
2

1.3 class选择器：

多个元素统一类型

/* class选择器使用 . 来定义 */
.classname{text-align:center;}
1
2

1.4 分组选择器

在样式表中有很多具有相同样式的元素就可以用分组选择器

h1,h2,p {color:green;}
1

1.5 嵌套选择器

适用于选择器内部的选择器样式

div p{
color:white;
}
1
2
3

二、CSS样式创建

2.1 外部样式表

    "stylesheet" type="text/css" href="mystyle.css">

1
2
3

2.2 内部样式表

	/* 将style写在head标签中的样式 */
    

1
2
3
4
5
6
7
8

2.3 内联样式

"color:sienna;margin-left:20px">这是一个段落。
1

2.4 多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
1

三、背景

3.1 背景颜色

body {background-color:#b0c4de;}/* 十六进制表示 */
body {background-color:rgb(255,0,0);}/* RGB表示 */
body {background-color:red;}/* 颜色名称 */
1
2
3

3.2 背景图像

/* 默认情况下进行平铺显示，以覆盖整个元素实体 */
body {background-image:url('url');}
body {background: url('url')}
1
2
3

3.2.1背景图像——平铺与定位

body {
    background-image:url('url');
    background-image:no-repeat;/* 设置图片不平铺 */
    background-repeat:repeat-x; /* 设置只在水平方向平铺 */
    background-repeat:repeat-y; /* 设置只在垂直方向平铺 */
    background-position: right top;/* 设置图片位置 */
    background-attachment: fixed;/* 设置图片随页面滚动时位置固定 */
    background-attachment: scroll;/* 设置图片随页面滚动时滚动 */
}
1
2
3
4
5
6
7
8
9

3.2.2 背景——简写属性

body {background:#ffffff url('img_tree.png') no-repeat right top;}
/* 此时简写属性的顺序 */
background-color > background-image > background-repeat > background-attachment > background-position
1
2
3

四、文本、字体

4.1 Text文本

4.2 Fonts字体

五、超链接

5.1 链接样式

a:link {color:#FF0000;}  /* 未访问时链接样式*/
a:visited {color:#00FF00;}  /* 用户已访问过后链接样式 */
a:hover {color:#FF00FF;}  /* 当用户鼠标放在链接上时链接的样式 */
a:active {color:#0000FF;}  /* 当链接被点击时的链接样式 */

/* 
	a:hover 必须跟在 a:link 和 a:visited 后面 
	a:active 必须跟在 a:hover 后面
*/
1
2
3
4
5
6
7
8
9

5.2 文本修饰

a:link {text-decoration:none;}  /* 链接未访问时没有下划线 */
a:visited {text-decoration:none;}  
a:hover {text-decoration:underline;}  /* 用户鼠标放在链接上时有下划线 */
a:active {text-decoration:underline;}  
1
2
3
4

5.3 背景颜色

a:link {background-color:#B2FF99;}  /* 链接未访问时背景颜色 */
a:visited {background-color:#FFFF85;}  /* 链接访问过后的链接的背景颜色 */ 
a:hover {background-color:#FF704D;}  /* 当鼠标放在链接上时的背景颜色 */
a:active {background-color:#FF704D;}  /* 当链接被点击时的链接背景颜色 */
1
2
3
4

5.4 鼠标形状

/* 当鼠标放在链接上时鼠标的样式 */
a:hover {
	cursor: default;/* 鼠标呈十字状 */
    cursor: pointer;/* 超链接的指针，手型 */
    cursor: wait;/* 指示程序正在忙 */
    cursor: help; /* 只是可用的帮助 */
    cursor: text;/* 指示文本 */
	cursor: crosshair;/* 鼠标呈十字状 */
}
1
2
3
4
5
6
7
8
9

六、列表样式

6.1 CSS无序列表

	
唱
	
跳
	
rap

1
2
3
4
5

6.2 CSS有序列表

	
唱
	
跳
	
rap

1
2
3
4
5

6.3 CSS列表符号

ul {list-style-type: none};  /* 不使用项目符号 */
ul {list-style-type: disc};  /* 空心圆 */ 
ul {list-style-type: circle};  /* 实心圆 */
ul {list-style-type: square};  /* 实心方块 */
ul {list-style-type: decimal};  /* 阿拉伯数字 */
ul {list-style-type: lower-alpha};  /* 小写英文字母 */
ul {list-style-type: upper-alpha};  /* 大写英文字母 */
ul {list-style-type: lower-roman};  /* 小写罗马数字 */
ul {list-style-type: upper-roman};  /* 大写罗马数字 */ 
1
2
3
4
5
6
7
8
9

6.4 图像作为列表符号

ul {list-style-image: url('url');}
1

七、Table表格

7.1 表格边框

/* th是table head的简写，是表格的首行，字体自动居中加粗 *//* tr是 table row*/

	
	

		/* td是 table data */
		

	
	
	

		

	

1
2
3
4
5
6
7
8
9
10
11

7.2 表格属性

table { border-collapse:collapse; }  /* 设置边框宽度为0 */
table { width: 100%; height:100%; }  /* 设置表格的宽度和长度 */
td {text-align: center; }/* 设置表格文字位置 */
td {vertical-align: bottom; }  /* 设置表格文字对其方式 */
td {background-color: grenn; color: white;}  /* 设置表格背景色和边框颜色 */
1
2
3
4
5

八、CSS Box Model（盒子模型）

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：内边距，外边距，边框，内容。

8.1 元素的宽度和高度

body {
	border:2px solid red; /* 设置边框的样式 */
	width:100% ;  /* 设置内容填充的高度 */
	padding:20px;  /* 设置内边距和内容的距离 */
	margin:10px;  /* 设置外边框的距离 */
}
1
2
3
4
5
6

8.2 padding（填充）

CSS Padding（填充）属性定义元素边框与元素内容之间的空间。

8.2.1 Padding的取值：

• length：定义一个固定的填充（像素、pt、em等）。
• %：使用百分之定义一个填充，相较于父元素的百分值。

8.2.2 单边内边距属性

padding-top: 20% ;
padding-bottom: 20% ;
padding-right: 20% ;
padding-left: 20%;
1
2
3
4

8.3 margin（外边距）

CSS Margin (外边距)属性定义元素周围的空间。CSS Margin 属性接受任何长度单位、百分数值甚至负值。

九、CSS边框

9.1 设置边框

p.none {border-style: none;}/* 无边框 */
p.dotted {border-style: dotted;}/* 点状边框 */
p.dashed {border-style: dashed;}/* 虚线边框 */
p.solid {border-style: solid;}/* 实线边框 */
p.double {border-style: double;}/* 双线边框 */
p.groove {border-style: groove;}/* 凹槽边框。其效果取决于 border-color 的值*/
p.ridge {border-style: ridge;}/* 垄状边框。其效果取决于 border-color 的值 */
p.hidden {border-style: hidden;}/* 隐藏边框 */
p.mix {border-style: dotted dashed solid double;}/* 混合边框 */
1
2
3
4
5
6
7
8
9

9.2 设置边的宽度

.one {
  border-style: solid;
  border-width: 1px 3px; /* 上边框和下边框为 1px，其他边为 3px */
}
.two {
  border-style: solid;
  border-width: 3px 1px; /* 上边框和下边框为 3px，其他边为 1px */
}
.three {
  border-style: solid;
  border-width: 1px 2px 3px 4px; /* 上边框 1px，右边框 2px，下边框 3px，左边框 4px */
}
1
2
3
4
5
6
7
8
9
10
11
12

9.3 设置边框颜色

.one {
  border-style: solid;
   border-color: red;
}

.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

.one {
  border-style: solid;
  border-color: #ff0000; /* 十六进制值 */
}

.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* RGB值 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

日常学习笔记，不喜勿喷，欢迎纠错与探讨！

---