文章目录
- 一.CSS介绍
- 二.基础知识
- 样式表
- 2.基础选择器
- （1）标签选择器
- （2）类选择器
- （3）id选择器
- （4）通配符选择器
- 3.复合选择器
- （1）后代选择器
- （2）子选择器
- （3）并集选择器
- （4）交集选择器
- （5）伪类选择器
- 4.字体样式属性
- （1）字体大小font-size
- （2）字体类型font-family
- （3）字体粗细font-weight
- （4）字体风格font-style
- 5.文本外观样式
- （1）设置文本颜色color
- （2）word-spacing
- （3）letter-spacing
- （4）line-height
- （5）text-transform
- （6）text-decoration
- （7）text-align
- （8）text-indent
- （9）white-space
- 6.文本外观属性
- （1）text-shadow
- （2）overflow
- 层叠性、继承性及优先级
- 8.边框介绍
- 8.1边框属性
- （1）border-style
- （2）border-width
- （3）border-color
- （4）border-radius
- 8.2内边距属性
- 8.3外边距属性
- 8.4box-shadow
- 9.背景属性
- 9.1背景颜色
- 9.2背景图片
- （1）background-repeat
- （2）background-position
- （3）background-attachment
- （4）background-size
- （5）background-origin
- （6）background-clip
- （7）复合写法
- （8）不透明
- 10.元素的类型
- 标签
- 13.表格标签
- （1）
标签
- （2）
标签 -
（3）
标签 -
（4）
标签 - （5）表格边框
- （6）折叠边框
- （7）表格宽度和高度
- （8）表格边框间距border-spacing
- （9）表格标题位置caption-side
- （1）
- 14.表单
- 14.1创建表单
- （1）标签
- 14.2表单控件
- （1）input控件
- （2）input/标签的type属性
- （3）textarea控件
- （4）select控件
- 盒子模型
- （1）边框（border）
- （2）内边距(padding)
- （3）外边距（margin）
- （4）清除内外边距
- （5）盒子模型
- 16.浮动布局
- （1）传统网页布局
- （2）浮动简介
- （3）浮动特性
- （4）清除浮动
- 17.定位布局
- （1）定位组成
- （2）相对定位relative
- （3）绝对定位absolute
- （4）子绝父相
- （5）固定定位fixed
- （6）定位叠放次序z-index
- （7）定位拓展
- 三.其他
- 1.圆角边框
- （1）圆形
- （2）圆角矩形
- 2.盒子阴影
- 3.文字阴影
- 4.用户界面样式
- （1）鼠标样式 cursor
- （2）轮廓线 outline
- （3）防止拖拽文本域 resize
- 5.过渡 transition
一.CSS介绍
CSS 是 层叠样式表的简称，也是一种标记语言。CSS 主要用于设置 HTML 页面中的 文本内容， 图片的外形以及 版面的布局和外观显示样式 。
可以简单理解： CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单 。
二.基础知识
样式表
（1）行内式
<p style="color: pink; font-size: 15px;">但使龙城飞将在</p>
- 1
（2）内联式
<title>内部样式表</title>
<style>
div {
color: red;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
(3)链入式
<head>
<link href="CSS文件的路径" type = "text/css" rel = "stylesheet">
</head>
- 1
- 2
- 3
2.基础选择器
选择器 分为 基础选择器 和 复合选择器 两个大类
基础选择器包括： 标签选择器 、 类选择器 、 id 选择器 和 通配符选择器。
（1）标签选择器
语法格式：
标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；…}
（2）类选择器
.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
（3）id选择器
#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
（4）通配符选择器
*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
3.复合选择器
（1）后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
语法：
元素 1 元素 2 {样式声明}
<style>
/* 我想要把ol里面的小li选出来改为pink */
ol li {
color: pink;
}
ol li a {
color: red;
}
.nav li a {
color: yellow;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
（2）子选择器
子元素选择器（子选择器） 只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
语法：
元素1 > 元素2 { 样式声明 }
（3）并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式 。通过英文逗号（,）连接而成 。
（4）交集选择器
作用：选中页面中 同时满足 多个选择器的标签
选择器。
语法： 选择器1选择器2 { css }
（5）伪类选择器
伪类选择器 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
<head>
<title>复合选择器之链接伪类选择器</title>
<style>
/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">小猪</a>
</body>
- 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
4.字体样式属性
（1）字体大小font-size
font-size:像素值；
例：font-size:10px;
（2）字体类型font-family
font-family:字体名；
例：font-family:楷体；
（3）字体粗细font-weight
| 属性 | 说明 |
|---|---|
| font-size | 字体大小 |
| font-family | 字体类型 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
（4）字体风格font-style
font-style:取值；
| font-style属性值 | 说明 |
|---|---|
| normal | 默认值 ，正常体 |
| italic | 斜体 |
| oblique | 将字体倾斜 |
5.文本外观样式
（1）设置文本颜色color
（2）word-spacing
（3）letter-spacing
letter-spacing:像素值；
用来调整文字左右间距
（4）line-height
（5）text-transform
（6）text-decoration
（7）text-align
（8）text-indent
（9）white-space
6.文本外观属性
（1）text-shadow
（2）overflow
层叠性、继承性及优先级
8.边框介绍
8.1边框属性
（1）border-style
（2）border-width
（3）border-color
（4）border-radius
8.2内边距属性
8.3外边距属性
8.4box-shadow
9.背景属性
9.1背景颜色
语法：
background-color:颜色值;
9.2背景图片
| 属性 | 说明 |
|---|---|
| background-image | 定义背景图像的路径，这样图片才能显示 |
| background-repeat | 定义背景图像显示方式，例如纵向平铺、横向平铺 |
| background-position | 定义背景图像在元素哪个位置 |
| background-attachment | 定义背景图像是否随内容而滚动 |
（1）background-repeat
（2）background-position
（3）background-attachment
（4）background-size
（5）background-origin
（6）background-clip
（7）复合写法
当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
（8）不透明
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
10.元素的类型
标签
1.标签是一个行内标签
2.与之间只能包含文本和行内标签
3.标签常用于定义网页中某些特殊文本，配合class属性使用。
4.当其他行内标签都不合适时，就可以使用标签。
13.表格标签
（1）标签
（2）标签
（3）标签
（4）标签
（5）表格边框
指定CSS表格边框，使用border属性。
table, th, td
{
border: 1px solid black;
}
- 1
- 2
- 3
- 4
在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。
（6）折叠边框
| border-collapse属性值 | 说明 |
|---|---|
| separate | 默认值，边框分开，不合并 |
| collapse | 边框合并，如果相邻，则共用一个边框 |
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
（7）表格宽度和高度
Width和height属性定义表格的宽度和高度。
设置100％的宽度，50像素的th元素的高度的表格：
table { width:100%; } th { height:50px; }
（8）表格边框间距border-spacing
border-spacing属性来定义表格边框间距。
语法：
border-spacing:像素值;
（9）表格标题位置caption-side
caption-side属性来定义表格标题的位置
| caption-side属性值 | 说明 |
|---|---|
| top | 默认值，标题在顶部 |
| bottom | 标题在底部 |
语法：
<caption>表格标题</caption>
caption-side:属性值;
- 1
- 2
- 3
14.表单
14.1创建表单
（1）标签
14.2表单控件
（1）input控件
（2）input/标签的type属性
（3）textarea控件
（4）select控件
盒子模型
"box model"这一术语是用来设计和布局时使用。
（1）边框（border）
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
（2）内边距(padding)
padding 属性用于设置内边距，即边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
padding 属性（简写属性）可以有一到四个值。
| 值的个数 | 表达意思 |
|---|---|
| padding:5px | 1个值，代表上下左右都有5像素内边距 |
| padding:5p 10px | 2个值，代表上下内边距是5像素左右内边距是10像素 |
| padding:5px 10px 20px | 3个值，代表上内边距5像素左右内边距10像素下内边距20像素 |
| padding:5px 10px 20px 30px | 4个值，上是5像素右10像素下20像素左是30像素顺时针 |
当我们给盒子指定 padding 值之后，发生了 2 件事情：
内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。
（3）外边距（margin）
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
外边距可以让块级盒子 水平居中 ， 但是必须满足两个条件：
盒子必须指定了宽度（width）。
盒子左右的外边距都设置为 auto 。
常见的写法，以下三种都可以：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
（4）清除内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
- 1
- 2
- 3
- 4
（5）盒子模型
16.浮动布局
（1）传统网页布局
- 块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 常用元素：span、a、i、em 等 以上都是标准流布局，我们前面学习的就是标准流， 标准流是最基本的布局方式 。
这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。
（2）浮动简介
语法：
float:取值;
| float属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
（3）浮动特性
设置了浮动（float）的元素最重要特性：
1.脱离标准普通流的控制（浮） 移动到指定位置（动）, （俗称脱标）
2. 浮动的盒子不再保留原先的位置
3.浮动元素会具有行内块元素特性。
（4）清除浮动
17.定位布局
（1）定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移 。
（2）相对定位relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法：
选择器 { position: relative; }
相对定位的特点：（务必记住）
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
（3）绝对定位absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
语法：
选择器 { position: absolute; }
绝对定位的特点：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置。
（4）子绝父相
对定位的话，父级要用相对定位。
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示。
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位
（5）固定定位fixed
固定定位是元素固定于浏览器可视区的位置。
语法：
选择器 { position: fixed; }
固定定位的特点：
- 以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系 不随滚动条滚动。
- 固定定位不再占有原先的位置。
（6）定位叠放次序z-index
选择器 { z-index: 1; }
数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性
（7）定位拓展
1. 绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
① left:50%;：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;：让盒子向左移动自身宽度的一半。
三.其他
1.圆角边框
border-radius 属性用于设置元素的外边框圆角。
div {
width: 300px;
height: 150px;
background-color: pink;
border-radius: 10px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
（1）圆形
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
/* 50% 就是宽度和高度的一半 等价于 100px */
border-radius: 50%;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
（2）圆角矩形
.juxing {
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2.盒子阴影
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 值 |
|---|---|
| h-shadow | 必须。水平阴影的位置。允许负值 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
| inset | 可选。将外部阴影(outset)改为内部阴影。 |
注意：
- 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列。
3.文字阴影
语法
text-shadow: h-shadow v-shadow blur color;
| h-shadow | 必需。水平阴影的位置。允许负值 |
|---|---|
| 必需。水平阴影的位置。允许负值 | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
4.用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
1.更改用户的鼠标样式
2.表单轮廓
3.防止表单域拖拽
（1）鼠标样式 cursor
<ul>
<li style="cursor: default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
（2）轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {outline: none; }
- 1
（3）防止拖拽文本域 resize
textarea{ resize: none;}
5.过渡 transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
/* 过渡 */
transition: all 1s;
}
div:hover {
width: 800px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 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