css-note-2

css-note-2

Charles Lv7
  2023-08-18 07:54:27 2023-08-18 07:54:27 Created   2023-08-18 09:06:51 2023-08-18 09:06:51 Updated      1.6k Words  7 Mins  

CSS其他重要样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        .cir{
            width:500px;
            height:300px;
            background-color: #00ff00;
            border-radius:50px;
            cursor:pointer;
        }
    </style>
</head>
    
<body>
<!--    圆角矩形制作border-radius-->
    <div class="cir"></div>
<!--    鼠标光标cursor-->
</body>
</html>

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
31
32
33
34
35
36
37
38
39
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        .background{
            width:600px;
            height: 1000px;
            background-color: #00ff00;
            background-image: url("../https://charles2530.github.io/image/Stephen curry.jpg");
/*            插入图片*/
            background-repeat: no-repeat;
/*            这行代码决定了当图片尺寸小于画布时是否将照片进行平铺*/
            background-position: center;
/*            图片位置设置*/
            background-size: cover;
/*            图片尺寸设置*/
            
            
/*            上述代码可以使用下面的省略写法：*/
/*
            background: #00ff00 
                url("../https://charles2530.github.io/image/Stephen curry.jpg"); 
                no-repeat center;
*/
/*            size需要单独设置*/
        }    
    </style>
</head>

<body>
<!--    div后加.和类名后按tab键可以快速形成一个类-->
    <div class="background">
        
    </div>
</body>
</html>

CSS 背景属性

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

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
31
32
33
34
35
36
37
38
39
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
/*        浮动float:这样可以让两个块状元素位于同一排*/
/*        边距margin*/
/*        填充pdding*/
        .box1{float:left;
            width: 100px;
            height: 100px;
            background-color: #00ff00;
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
/*            也可以用margin:10px;或margin:10px 10px 10px 10px;(上右下左的顺序)*/
            padding: 10px;
            
        }
        .box2{float:left;
            width: 100px;
            height: 100px;
            background-color: #ffff00;
        }
    </style>
</head>

<body>
    <div class="box1">
        hello i'm charles
    </div>
    <div class="box2">
    
    </div>
</body>
</html>

img

CSS边距

margin可能的值
值 说明
auto 设置浏览器边距。 这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距
CSS边距属性
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

CSS填充

  • 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

  • 单独使用 padding 属性可以改变上下左右的填充。

padding可能的值
值 说明
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充
CSS填充属性
属性 说明
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

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>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        .box{
            width:500px;
            height:500px;
            border-style:solid dashed double dotted;
/*            边框样式：solid-实线，dashed-虚线，double-双实线，dotted-点实线*/
/*            如上所示可以对不同边实现分别设置*/
            border-width: 5px;
            border-color:#00ff00;
/*            等效写法：*/
/*            border: solid 5px #7f7f7f;*/
            border-bottom: solid 5px #000000;
/*            类似写法可以实现单边设置*/
            
        }
    </style>
</head>

<body>
    <div class="box">
    
    </div>
</body>
</html>

CSS 边框属性

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
border-radius 设置圆角的边框。

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        .set{
            width:300px;
/*            也可以写width:50%;*/
            height:300px;
        }
        .word{
            color: #00ff00;
        }
    </style>
</head>
<!--要看见这个虚线框选择查看+查看模式+改实时视图为设计即可-->
<body>
    <div class="set">
        <p class="word">CSS样式</p>
    </div>
</body>
</html>

CSS 尺寸 (Dimension)属性

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
  • Title: css-note-2
  • Author: Charles
  • Created at : 2023-08-18 07:54:27
  • Updated at : 2023-08-18 09:06:51
  • Link: https://charles2530.github.io/2023/08/18/css-note-2/
  • License: This work is licensed under CC BY-NC-SA 4.0.
recommend_articles
Diameter_of_tree Diameter_of_tree Inverse pair Inverse pair JavaScript-note-9 JavaScript-note-9
recommend_articles
Diameter_of_tree Diameter_of_tree Inverse pair Inverse pair
Comments
On this page
css-note-2
  1. CSS其他重要样式
  2. CSS样式之背景设置
    1. CSS 背景属性
  3. CSS样式之边距与填充
    1. CSS边距
      1. margin可能的值
      2. CSS边距属性
    2. CSS填充
      1. padding可能的值
      2. CSS填充属性
  4. CSS样式之边框设置
    1. CSS 边框属性
  5. CSS样式之宽高颜色
    1. CSS 尺寸 (Dimension)属性