CSS

CSS使用伪类前用冒号：

  • Cascading Style Sheets
  • 层叠样式表，美化html页面

  • CSS1.0

  • CSS2.0

    • DIV（块），CSS与HTML结构相分离

  • CSS2.1

    • 浮动、定位

  • CSS3.0

    • 圆角、阴影、动画等···

第一个CSS程序

可以在html中直接用style标签来修饰，但更建议单独写一个css文件，用link标签来连接。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

<!--规范：<style>编写css代码，每个声明分号结尾。
语法：
    选择器{
        声明1;
        声明2;
        声明3;
    }
    <style>
        h1{
            color: aqua;
        }
    </style>
-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>标题</h1>

</body>
</html>

css：

1
2
3
h1{
    color: aqua;
}

CSS的3种导入方式

1、行内样式：标签中直接编写

1
2
<!--行内样式，在标签，中直接编写style属性-->
<h1 style="color: yellow">导入方式</h1>

2、内部样式：

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

3、外部样式

1
2
3
4
5
h1{
    color: green;
}
/*要在html中加入link标签*/
<link rel="stylesheet" href="css/style.css">

优先级：就近原则，具体用于区分外部/内部的样式。内部最优，内外部看位置，连接和本体近则优先度高。

  • 外部样式的两种写法

    • 链接式：

      1
      <link rel="stylesheet" href="css/style.css">

    • 导入式：

      1
      2
      3
      4
      <!-- css2.1特有 -->
      <style>
      	@import url("css/style.css");
      </style>

基础选择器

用来选择页面上的元素,注意style中写css的代码。

1、标签选择器（标签{}）

1
2
3
4
5
6
7
8
9
10
11
<style>
   /* 标签选择器，会把所有同名标签一起修改，无法区分 */
       h1{
           color: yellow;
           border-radius: 30px;
           background: darkcyan;
       }
       p{
           font-size: 100px;
       }
   </style>

2、类选择器（.class{}）

1
2
3
4
5
6
7
8
9
<style>
       /* 类选择器格式 .class的名称{} */
       .a{
           color: yellow;
       }
       .b{
           color: blue;
       }
   </style>

3、id选择器（#id名{}）

id命名全局唯一

1
2
3
4
5
6
<style>
       /* id选择器格式  #id名称{}*/
       #aaa{
           color: aqua;
       }
   </style>

4、优先级

与顺序与关，id选择器>class选择器>标签选择器

层次选择器

1、后代选择器

（ul）元素后的所有（p）元素实现

1
2
3
4
5
6
<style>
    /*后代迭代器*/
    ul p{
        background: red;
    }
</style>

2、子选择器

选择作为（body）元素子元素的（p）元素实现

1
2
3
4
5
6
<style>
/*子选择器*/
       body>p{
           background: blue;
       }
   </style>

3、相邻兄弟选择器

选择（.a）紧凑的后一（p）元素实现，要有相同父类

1
2
3
4
5
6
<style>
/*相邻兄弟选择器*/
    .a + p{
        background: purple;
    }
</style>

4、通用选择器

选择（.a）后所有的（p）某种元素实现

1
2
3
4
5
6
<style>
/*通用选择器*/
    .a ~ p{
        background: green;
    }
</style>

结构伪类选择器（:伪类用冒号分离）

  • first-child

  • last-child

  • ntn-child()

  • ntn-of-type()

  • hover

    ·····

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
<style>
       /*ul中第一个p元素*/
       ul p:first-child{
           background: purple;
       }
       /*ul中最后一个p元素*/
       ul p:last-child{
           background: aqua;
       }
       /*n th就是父元素后的第n个子元素，自行输入n值
        *这里是父元素后的第1个元素，若该元素和指定标签相同则实现
        */
       p:nth-child(1){
           background: red;
       }
       /*父元素后指定的第n个元素
        *这里是父元素后指定的第1个p元素实现
        */
       p:nth-of-type(1){
           background: cornflowerblue;
       }
       /*链接背景色
        *hover:鼠标移上去显示颜色
        */
       a:hover{
           background: blue;
       }
   </style>

属性选择器

  • 属性判断，可用正则表达式
    • = 绝对等于
    • *= 包含这个元素
    • ^= 以这个开头
    • $= 以这个结尾
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
<style>
       .demo a{
           float: left;
           display: block;
           height: 50px;
           width: 50px;
           border-radius: 10px;
           background: red;
           color: yellow;
           text-align: center;
           text-decoration: none;
           margin-right: 5px;
           font: bold 20px/50px Arial;
       }
       /*有指定属性的元素
        *标签[元素 = "具体值"]{}
        *值是字符串是应带""，单个字符可不带
        *[]中判断语句还可使用正则表达式
        */
       a[id=first]{
           background: blue;
       }
       a[class="demo1 a"]{
           color: darkred;
       }
       /*正则表达式相关
        * = 绝对等于
        * *= 包含这个元素
        * ^= 以这个开头
        * $= 以这个结尾
        */
       a[href^="https://"]{
           height: 444px;
       }
   </style>

美化网页

  • span标签，展现想突出的字
1
2
3
4
5
6
7
8
9
<style>
       #a{
           color: red;
           font-size: 50px;
       }
</style>
   <body>
   欢迎来到我的<sapn id="a">博客</sapn>
   </body>

1、字体样式（font）

  • font-style 字体样式
  • font-variant 字体异体（小型大写字母）
  • font-weight 字体粗细
  • font-size/line-height 字体尺寸/行高
  • font-family 字体体系
1
2
3
4
5
<style>
   p{
       font: oblique bold 50px/50px 宋体;
   }
</style>

2、文本样式

1
2
3
4
5
color:rgb(0,125,255); 颜色的各种表示
   text-align：文本水平对齐方式
   text-indent：首行缩进
   line-height：单行文字上下居中，行高 == 块高
   text-decoration：划线

3、超链接伪类（主要是hover）

hover是鼠标悬浮于内容上时的对应实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
       /*正常情况*/
       a{
           text-decoration: none;
           color: black;
       }
       /*hover：鼠标悬浮时的状态*/
       a:hover{
           color: deeppink;
           font-weight: bold;
           font-size: 50px;
       }
   </style>

4、列表

  • list-style
    • none 去标点
    • circle 空心圆
    • decimal 数字
    • square 正方形

5、背景

  • image
    • background-image: url(“···”) 图片填满范围，要定义长宽
    • background-repeat: repeat-x 填满横轴
    • background-repeat: repeat-y 填满纵轴
    • background-repeat: no-repeat 只填一张图
1
2
background的属性可集成于一体
backgroud: color url(" ") 横轴 纵轴 repeat属性（一般是no-repeat）

  • 渐变色

    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)

盒子模型

注意首先要写一个框架出来

  • margin：外边距
  • border：边框
  • padding：内边距

blog1.png

1、边框（border）

  • border-width：边框宽度
  • border-style：边框样式
  • border-color：边框颜色
1
2
3
4
5
6
7
8
9
div:nth-of-type(1)>input{
       border: 3px dashed black;
   }
   div:nth-of-type(2)>input{
       border: 3px solid blue;
   }
   div:nth-of-type(3)>input{
       border: 3px solid sienna;
   }

2、内外边距（padding、margin）

  • 属性为上右下左顺时针的4个元素，若有缺省，则按bottom=top、left=right赋值

  • 居中元素（要有块元素）

    1
    margin: 0 auto;

3、圆角边框

  • border-radius

    参数顺序左上、右上、右下、左下，有缺省时按对角线赋值，可以画图形。

浮动（float）

1、display

  • block：块元素
  • inline：行内元素
  • inline-block：块元素，但可以在一行
  • none：隐藏

2、float

1
2
float: left; /*左浮*/
flaot: right; /*右浮*/

3、父级边框塌陷问题（4种方法）

推荐添加伪类的方法

1
2
3
4
5
6
7
clear
/*
clear: left 左侧禁止浮动
clear: right 右侧禁止浮动
clear: both 两侧均禁止浮动
clear: none 允许两侧浮动，默认值
*/
  • overflow隐藏浮动（避免下拉场景）

下拉菜单无法显示

1
2
3
4
#father{
    border:  1px solid red;
    overflow: hidden;
}
  • 父类添加伪类（！！推荐！！）
1
2
3
4
5
#father:after{
    content: '';
    display: block;
    clear: both;
}

  • 给父类加高度（太笨了）

    固定高度有所限制

  • 加一个空div，clear清两侧浮动

    加了div代码，冗杂

定位

1、相对定位（relation）

相对于自己原来的位置，原来的空间会保留

1
2
3
4
5
postion: relation;
top: -20px/*-会向上偏移，+向下偏移*/
left:
right:
bottom:
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
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 5px solid blue;
            margin: 0 auto;
        }
        a{
            width: 100px;
            height: 100px;
            text-align: center;
            background: darkturquoise;
            text-decoration: none;
            line-height: 100px;
            display: block;
        }
        a:hover{
            background: sienna;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            bottom: 100px
        }
        .a5{
            position: relative;
            left: 100px;
            bottom: 300px;
        }
    </style>
</head>
<body>

<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>

</body>

2、绝对定位（absolution）

1
2
3
4
5
position: absolution;
1、没有父级元素时，相对浏览器边框定位
2、有父类元素，相对于父类元素进行偏移
	则父级元素要写position: relation
3、绝对定位，原来的空间不会保留

3、固定定位（fixed）

fixed直接固定死

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
       body{
           height: 1000px;
       }
       div:nth-of-type(1){
           width: 100px;
           height: 100px;
           background: deeppink;
           position: absolute;
           right: 0;
           bottom: 0;
       }
       div:nth-of-type(2){
           width: 50px;
           height: 50px;
           background: red;
           position: fixed;
           right: 0;
           bottom: 0;
       }
   </style>

4、重叠元素（z-index）

  • z-index

    多个重叠元素的优先级

  • opacity

    背景透明度

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
<style>
       #a0{
           width: 500px;
           padding: 0;
           margin: 0;
           overflow: hidden;
           font-size: 12px;
           line-height: 25px;
           border: 1px solid sienna;
       }
       ul,li{
           padding: 0;
           margin: 0;
           list-style: none;
       }
       #a0 ul{
           position: relative;
       }
       .a1,.a2{
           position: absolute;
           bottom: 50px;
           width: 200px;
           height: 50px;
       }
       .a1{
           color: #52ff99;;
       }
       .a2{
           opacity: 0.5;
           background: blue;
       }
   </style>


   <body>

   <div id="a0">
       <ul>
           <li><img src="../4、美化网页/resource/img/conan2.jpg" alt=""></li>
           <li class="a1">lalalalalal</li>
           <li class="a2"></li>
           <li class="a3">laal</li>
       </ul>
   </div>

   </body>

小结

javascript冲，最近看前端效率好低，赶紧搞完进web。。。