1. 三种导入方式

1.1 行内样式

1
<h1 style="color: red">Title</h1>

1.2 内部(HTML文件中)样式

1
2
3
4
5
<style>
    h1{
    color: green;  
    }
</style>

# 当存在多种时，最靠近代码的style的会被执行，其他的会被覆盖

1.3 外部(CSS文件中)样式

使用 link 标签引入外部样式文件，需要注意以下几点。

  • link 标签放在 head 标签内部
  • 样式文件要以 .css 为扩展名
  • 一个页面往往需要引入多个样式文件
属性 说明
rel 定义当前文档与被链接文档之间的关系
href 外部样式文件
type 文档类型 
1
2
3
<link rel="stylesheet" href="houdunren.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
<!--重置所有标签默认样式-->

2. 三种基本选择器

2.1 基本选择器

  1. 标签选择器：选择页面上所有的这个标签

    使用 * 可为所有元素设置样式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    *{
        xx: xx;
    }
    h1 or p or h2{
        xx: xx;
    }
    /*同时设置多个元素组合*/
    h1,h2 {
        color: red;
    }

  2. 类选择器：.class的名称，根据相同的class可以复用

    1
    2
    3
    4
    5
    <h1 class="nh"></h1>

    .nh{
        corlor: red;
    }

  3. id选择器：#id的名称，全局唯一

    1
    2
    3
    4
    5
    <h1 id="nh"></h1>

    #nh{
        corlor: red;
    }

    ID选择器 > 类选择器 > 标签选择器

  4. 层次选择器：元素里面的元素

    1. 后代选择器

      1
      2
      body p{}
      /*body里面所有的p标签*/

    2. 子选择器

      1
      2
      body>p{}
      /*与body差一个缩进的p标签*/

    3. 亲弟弟选择器，只有一个，而且是后面的

      1
      2
      .class + p{}
      /*在.class后面的那个p*/

    4. 通用选择器，可以是多个

      1
      2
      .class~p{}
      /*在.class后面所有的p*/

2.2 结构伪类选择器

  1. 不用class & id的情况下，结构选择

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <body>
    	<p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
    </body>

    <style>
        ul li:first-child{}
        /*ul里的第一个li元素*/
        ul li:last-child{}
        /*ul里的最后一个li元素*/
    	p:nth-child(1){}
    	/*定位到p的父元素，选择当前的父元素的第一个元素*/
    	/*前提是这个父元素的第一个元素必须是p元素，否则无效*/
    	p:nth-of-type(1){}
    	/*选择p的父元素下的第一个p元素，不会因为被其他元素隔开而被影响*/
    </style>

  2. 伪类

    状态 示例 说明
    :link a:link 选择所有未被访问的链接
    :visited a:visited 选择所有已被访问的链接
    :hover a:hover 鼠标移动到元素上时
    :active a:active 点击正在发生时 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /*鼠标悬浮的状态*/
    a:hover{
        background: yellow;
    }
    <a href="">变色</a>
    /*鼠标按住不放的状态*/
    a:active{
        background: yellow;
    }
    <a href="">变色</a>
    /*以及a:link未访问的链接；a:visited已访问的链接*/
    格式 示例 说明
    ::first-letter p:first-letter 选择每个元素的首字母
    ::first-line p:first-line 选择每个元素的首行
    ::before p:before 在每个元素的内容之前插入内容
    ::after p:after 在每个元素的内容之后插入内容 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    span::before {
        content: '⇰';
        color: red;
    }
    span::after {
        content: '⟲';
        color: green;
    }
    p::first-letter {
        font-size: 30px;
    }
    p::first-line {
     font-size: 20px;
    }

2.3 属性选择器

优势：匹配属性，可以用正则表达式，然后将符合描述的全部匹配到

1
2
3
4
5
6
7
/*比如p属性里面有一堆a属性*/
/*"="就是绝对等于；"*="就是包含这个；"^="就是以这个为开头的；"$="就是以这个为结尾的*/
a[id]{}
a[id=first]{}
a[class*="links"]{}
a[href^=http]{}
a[href$=doc]{}

3. 美化网页元素

3.1 为什么要美化网页

  1. 有效传递页面信息
  2. 凸显主题
  3. 提高用户体验

span标签：重点要突出的字，用span包起来

3.2 字体样式

1
2
3
4
5
6
7
8
9
10
11
12
p{
  font-faimily: "Arial Black", 楷体;
  font-size: 50px or 200px; /*百分数是子元素相对于父元素的大小，如父元素是20px，子元素设置为200%即为父元素的两倍大小。*/
  font-weight: bold;
  color: cyan;
  font-style: italic;
}
/*或者一行表示*/
p{
  font: oblique bold 50px "楷体"
}
/*oblique斜体*/

可以使用 font 一次将字符样式定义，但要注意必须存在以下几点：

  • 必须有字体规则
  • 必须有字符大小规则
1
2
3
4
5
span {
	font: bold italic 20px/1.5 'Courier New', Courier, monospace;
}

<span>0.0.0.0.0.0</span>

上例中的 20px 为字体大小，1.5为1.5倍行高定义

3.3 文本样式

  1. 颜色

    1
    2
    3
    4
    5
    6
    7
    8
    p{
      color: red;
      color: #000000;
      color: rgb(255, 23,43);
      color: rgba(23,56,245,0.9);
    }
    /*颜色可以直接单词，也可以RGB（#000000-#FFFFFF）或者rgb（0，0，0）或者rgba（0，0，0，0.5）*/
    /*rgba的a是用来调整透明度的，0-1*/

  2. 对齐方式

    1
    2
    3
    4
    span{
        text-align: center;
        /*或者left，right*/
    }

  3. 首行缩进

    1
    2
    3
    4
    span{
        text-indent: 2em;
        /*em表示字符，px表示像素*/
    }

  4. 行高

    1
    2
    3
    4
    5
    6
    span{
        background: cyan;
        height: 100px;
        line-height: 100px;
        /*如果线高和高一样的话就是居中了，有点类似行距，height是这一行占多高*/
    }

  5. 装饰

    1
    2
    3
    4
    5
    6
    7
    span{
        text-decoration: underline;
        text-decoration: line-through;
        text-decoration: overline;
        /*分别是下划线，中划线，上划线*/
        /*decoration=none的话就是没有任何线，可以用来去掉超链接的下划线*/
    }

  6. 文本图片对齐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>文档标题</title>
      <style>
        img, span{
          /*middle, bottom, top*/
          vertical-align: middle; 
        }
      </style>
    </head>
    <body>
      <p>
        <img src="E:/PY/单词/Save.ico" alt="">
        <span>你好</span>
      </p>
    </body>
    </html>

  7. 文字阴影

    1
    2
    3
    4
    #shadow{
        text-shadow: black 5px 10px 3px;
        /*阴影的颜色，水平偏移，竖直偏移，阴影半径*/    
    }

3.4 超链接伪类

结合上面的小知识，超链接伪类界面

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>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <style>
      a{
          text-decoration: none;
          color: black;
      }
      a:hover{
          color: orange;
      }
  </style>
</head>
<body>
    <a href="#">
        <img src="E:/PY/单词/Save.ico" alt="">
    </a>
    <p>
        <a href="#">icon</a>
    </p>
    <p>
        <a href="">Author: FQY</a>
    </p>
    <p>
        $99
    </p>
</body>
</html>

3.5 列表样式优化

做一个导航栏例子，具体如何优化详见代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
	<div id=nav>
		<h2>商品分类</h2>
		<ul>
			<li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
			<li><a href="#">男装</a>&nbsp;&nbsp;<a href="#">女装</a></li>
			<li><a href="#">图文</a>&nbsp;&nbsp;<a href="#">娱乐</a></li>
			<li><a href="#">白条</a>&nbsp;&nbsp;<a href="#">贷款</a></li>
		</ul>
	</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
29
30
31
#nav{
  width: 300px;
  background: lightblue;
}
h2{
  font-family: kaiti;
  font-size: 30px;
  text-indent: 1em;
  line-height: 50px;
  background-color: cyan;
  /*颜色，图片，图片位置，平铺方式*/
  background: red url("xxx.jpg") 270px 10px no-repeat;
}
ul>li{
  font-family: 楷体;
  font-weight: bold;
  height: 40px; /*间距*/
  list-style: none; /*前面的点去掉, 还有cicle空心圆，decimal有序列表，square正方形*/
  text-indent: 1em;
  background-image: url();
  background-repeat: no-repeat;
  background-position: 236px 2px;
}
a{
  color: red;
  text-decoration: none;
}
a:hover{
  color: orange;
  text-decoration: underline;
}

3.6 背景

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<body>
	<div class="d1"></div>
 	<div class="d2"></div>
 	<div class="d2"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div{
    width: 700px;
    height: 300px;
    border: 2px solid cyan; /*线宽，实线 or dashed，边框颜色*/
    background-image: url("xxxx,jpg")
}
.d1{
    background-repeat: repeat-x; /*横向平铺图片*/
}
.d1{
    background-repeat: repeat-y; /*纵向平铺图片*/
}
.d1{
    background-repeat: no-repeat; /*将图片置于左上角*/
}
选项 说明
scroll 背景滚动
fixed 背景固定 
1
background-attachment: fixed;

  • 图片摆放位置

    1
    2
    3
    background-position: 100px 100px;
    /*也支持使用负值*/
    background-position: -200px 100px;

==可以使用一条指令设置背景==

1
background: red url(xxx.png) no-repeat right 50% fixed;

3.7 渐变

1
2
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
/*可以自行去网上找*/

4. 盒子界面

4.1 什么是盒子模型

盒子模型

margin：外边距

padding：内边距

border：边框

具体可查看浏览器测试

4.2 边框

  • body里面总会有一些默认值，所以要自行初始化

    1
    2
    3
    4
    5
    6
    /*初始化一些设定*/
    body{
        margin: 0;
        padding: 0;
        text-decoration: none;
    }

border用法：粗细，样式，颜色

border: 3px solid red

边框设计

类型 描述
none 定义无边框。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。

4.3 内外边距

1
2
3
4
5
6
7
#box{
    width: 300px;
    border: 1px solid red;
    margin: 0 auto; /*上右下左的顺序，此处自动对齐居中*/
    /*margin: 0 0 0 0*/
    padding: 0 0 0 0; /*上右下左，两个元素就是上下，左右*/
}

注：盒子的计算方式是margin+border+padding+内容宽度

4.4 圆角边框和阴影

==border-radius==

==box-shadow==

1
2
3
4
5
6
7
8
9
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 50px 20px;
    /*规则是左上，右上，左下，右下
    两个值的时候就是1 3，2 4*/
    box-shadow: 10px 10px 10px cyan;
}

小结：很多的前端后端无论是登陆界面还是门面啥的都不是原创的，因为很累，做出来还不一定好看。白嫖真香，稍加修改即可

5. 浮动

5.1. 引入

  • 标准文档流（由上至下顺序排列）

  • 块级元素：独占一行

    h1~h6 p div list....

  • 行内元素：不独占一行

    span a img....

  • 行内元素可以被包在块级元素中，反之不行

==float==：left or right 左右浮动

5.2. diplay

选项 说明
none 隐藏元素
block 显示为块元素
inline 显示为行元素，不能设置宽/高
inline-block 行级块元素，允许设置宽/高 
1
2
3
4
5
6
7
8
9
10
11
12
div{
  width: 100px;
  height: 100px;
  border: solid cyan;
  display: inline-block;
}
span{
  width: 100px;
  height: 100px;
  border: solid cyan;
  display: inline-block;
}

5.3. overflow

选项 说明
hidden 溢出内容隐藏
scroll 显示滚动条（有些浏览器会一直显示，有些在滚动时显示）
auto 根据内容自动处理滚动条

5.4 父级边框塌陷

1
2
3
a{
  clear: both;
}

  1. 增加增加父级元素高度（不建议）

  2. 添加一个新的div（代码）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class='oc'></div>

    <style>
      .oc{
        clear: both;
        margin: 0;
        padding: 0;
      }
    </style>

  3. 父级元素增加 overflow：hidden；

  4. 父类添加一个after伪类（推荐）

    1
    2
    3
    4
    5
    #father:after{
      content: '';
      display: block;
      clear: both;
    }

5.5. 尺寸

选项 说明
width 宽度
height 高度
min-width 最小宽度
min-height 最小高度
max-width 最大宽度
max-height 最大高度
fill-available 撑满可用的空间
fit-content 根据内容适应尺寸

6. 定位

  • 课前纯手写一个小定位，九宫格的div，然后排列……
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div>
  <a class=a1 href="#">1</a>
  <a class=a2 href="#">2</a>
  <a class=a3 href="#">3</a>
  <a class=a4 href="#">4</a>
  <a class=a5 href="#">5</a>
  <a class=a6 href="#">6</a>
  <a class=a7 href="#">7</a>
  <a class=a8 href="#">8</a>
  <a class=a9 href="#">9</a>
  </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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
div{
  position: absolute;
  margin: 0 auto;
  height:310px;
  width: 310px;
  border: red 1px solid;
}
a{
  width: 90px;
  height: 90px;
  text-decoration: none;
  background: pink;
  margin: 10px 10px;
  text-align: center;
  line-height: 90px;
  display: block
}
.a2{
  position: relative;
  right: -100px;
  top: -100px;
}
.a3{
  position: relative;
  right: -200px;
  top: -200px;
}
.a4{
  position: relative;
  right: 0px;
  top: -200px;
}
.a5{
  position: relative;
  right: -100px;
  top: -300px;
}
.a6{
  position: relative;
  right: -200px;
  top: -400px;
}
.a7{
  position: relative;
  right: 0px;
  top: -400px;
}
.a8{
  position: relative;
  right: -100px;
  top: -500px;
}
.a9{
  position: relative;
  right: -200px;
  top: -600px;
}
a:hover{
  background: red;
}

6.1 相对定位

  • 对自己原来的位置进行偏移（依然在标准文档流中，原来的位置会被保留下来，只是看不到了）

  • position: relative;

    1
    2
    3
    4
    #{
      position: relative;
      top: -100px;  /*top，bottom，right，left都行；往哪儿移动就写对应的方向，然后像素加个‘-’号*/
    }

6.2 绝对定位

  • 定位条件

    • 没有父级元素定位的前提下，相对于浏览器定位（如果需要父级元素定位，就给父级元素加一个position: relative;）
    • 有父级元素存在定位，就相对父级元素定位
    • 如果是浏览器定位的话，只能定位到第一界面的屏幕范围内

  • position: absolute;

    1
    2
    3
    4
    5
    #{
      position: absolute;
      right: 30px; /*距离上级框架（父级或者浏览器）最右侧30px*/
      /*移动范围不会超出父级元素*/
    }

6.3 固定定位

  • 比如一些网站的导航栏是一直不变的，就是固定定位
  • position: fixed;

6.4 z-index

  • 相当于ppt里面的多层图片，哪个置顶，哪个置后一样

  • 置于第几层就写几层，比如

  • ==z-index: 77; opacity: 0.5;==

    1
    2
    3
    4
    5
    6
    7
    #{
      z-index: 77; /*置于最上层通常用77*/
    }
    #{
      backgournd: black;
      opacity: 0.5; /*透明了*/
    }