CSS入门学习笔记02

桂花很香,旭很美

已于 2022-06-29 16:33:59 修改

阅读量360

点赞数

分类专栏：前端文章标签： css 前端

于 2020-09-24 15:50:50 首次发布

本文链接：https://blog.csdn.net/weixin_40959890/article/details/108776092

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css常用属性

border ：设置边框的样式
- 格式：宽度样式颜⾊
- 例如：style=”border:1px solid #ff0000” ，1像素实边红⾊。
- 样式取值：solid 实线，none ⽆边，double 双线等
width、height：⽤于设置标签的宽度、⾼度。

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             div{
                 width: 200px;
                 height: 200px;
                 /*设置边框 粗细,颜⾊,样式(实线,虚线,点划线,双实线)*/
                 /*border-right: 5px solid yellow;*/
                 border: 10px solid cyan;
             }
         </style>
     </head>
     <body>
         <div>我是div</div>
     </body>
</html>

css转换属性

语法格式 : 选择器 {display: 属性值 }

常⽤的属性值：

inline：此元素将显示为⾏内元素（⾏内元素默认的display属性值）, 常⻅⾏内元素有: <span>、 <a>
block：此元素将显为块元素（块元素默认的display属性值）,常⻅块元素有: <div>、<h1>、<ul>
none：此元素将被隐藏，不显示，也不占⽤⻚⾯空间。

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8">
         <title></title>
     </head>
     <body>
         <div style="display: inline;">我是div</div> 2
         <span style="display: block;">我是span</span>3
         <div style="display: none;">我是隐藏的div</div>
     </body>
</html>

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8">
         <title></title>
     </head>
     <body>
         <div>我是div</div> 2
         <span style="display: block;">我是span</span>3
         <div style="display: none;">我是隐藏的div</div>
     </body>
</html>

css字体属性

常⽤的属性值：

font-size:⽂本⼤⼩

font-family: 字体
color: 颜⾊

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             div{
                 font-family: 楷体;
                 font-size: 32px;
                 color: red;
             }
         </style>
     </head>
     <body>
         <div>我是div</div>
     </body>
</html>

css背景属性

常⽤的属性值：

background-color 背景⾊
background-image 背景图

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             /*
             body{
             background-color: red;
             background-image: url(img/btn.jpg);
             }*/
     
             div{
                 width: 200px;
                 height: 200px;
 
                 background-image: url(img/btn.jpg);
                 background-color: blue;
            }
         </style>
     </head>
     <body>
         <div>我是div</div>
     </body>
</html>

css浮动属性

通常默认的排版⽅式，将⻚⾯中的元素从上到下⼀⼀罗列，⽽实际开发中，需要左右⽅式进⾏排版，就需要使⽤浮动

使⽤浮动: 选择器{float:属性值;}
常⽤属性值：left：元素向左浮动 | right：元素向右浮动 | none：元素不浮动（默认值）

由于浮动元素不再占⽤原⽂档流的位置，所以它会对⻚⾯中其他元素的排版产⽣影响。如果要避免影响，需要使⽤ clear 属性进⾏清除浮动。

清除浮动: 选择器{clear:属性值;}
常⽤属性值：
- left：不允许左侧有浮动元素（清除左侧浮动的影响）
- right：不允许右侧有浮动元素（清除右侧浮动的影响）
- both：同时清除左右两侧浮动的影响

<!DOCTYPE html>
<html>
     <head>
         <meta charset="utf-8">
         <title></title>
        <style type="text/css">
             div{
                 width: 200px;
                 height: 200px;
                 border: 1px red solid;
             }
             .box {
                 float:left;
             }
             .top {
                 width: 600px;
             }
             .bottom {
                 width:600px;
                 clear: both;
             } 
         </style>
     </head>
     <body>
         <div class="top">上边div</div>
         <div class="box">左边div</div>
         <div class="box"><img src="img/btn.jpg" ></div>
         <div class="box">右边div</div>
         <div class="bottom">下边div</div>
     </body>
</html>

css盒⼦模型

什么是盒⼦模型 : CSS 的框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的⽅式。

边框 border
- 也可以使⽤下⾯四个单端的属性, 分别设置上、右、下、左的边框：
- border-top-style | border-right-style | border-bottom-style | border-left-style
外边距：margin, 设置不同元素之间, 它们边框与边框之间的距离
- 也通过使⽤下⾯四个单独的属性，分别设置上、右、下、左的外边框：
- margin-top | margin-right | margin-bottom | margin-left
内边距 padding, 设置元素边框与元素内容之间的距离
- 也通过使⽤下⾯四个单独的属性，分别设置上、右、下、左的内边距：
- padding-top | padding-right | padding-bottom | padding-left

<!DOCTYPE html>
<html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
             div{
                 width: 200px;
                 height: 200px;
                 border: 1px red solid;
             }
             .box {
                 float:left;
             }
             /* css盒⼦模型 */
             .box_model{
                 float:left;
                 /* 边框 */
                 border: red 10px solid;
                 /* 外边距 */
                 margin-left: 100px;
                 margin-top: 40px;
                 /* 内边距 */
                 padding-left: 50px;
                 padding-top: 20px;
             }
             .top {
                 width: 600px;
             }
             .bottom {
                 width:600px;
                 clear: both;
             }
         </style>
     </head>
     <body>
         <div class="top">上边div</div>
         <div class="box">左边div</div>
         <div class="box_model"><img src="img/btn.jpg"/></div>
         <div class="box">右边div</div>
         <div class="bottom">下边div</div>
     </body>
</html>

css 盒⼦模型框模型 (Box Model) 多属性值使⽤ :

margin: 50px; 上下左右
margin: 10px 50px; 上下 10 , 左右50
margin: 10px 20px 30px; 上10 ,左右20, 下30
margin: 10px 20px 30px 40px; 顺时针上右下左
margin: 0 auto; 上下0, 左右距离⾃动调整(居中)

<!DOCTYPE html>
<html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
             div {
                 width: 200px;
                 height: 200px;
                 border: red 1px solid;
             }
             .top {
                 width: 600px;
             }
            .bottom {
                 width: 600px;
                 clear: both;
                 /* margin: 0 auto; 上下0, 左右距离⾃动调整(居中) */
                 margin: 0 auto;
             }
             .box {
                 float: left;
             }
             /* css盒⼦模型框模型 (Box Model) 多属性值使⽤ */
             .box_model {
                 float: left;
                 /* margin: 50px; 上下左右 */
                 /* margin: 10px 50px; 上下 10 , 左右50 */
                 /* margin: 10px 20px 30px; 上10 ,左右20, 下30 */
                 /* margin: 10px 20px 30px 40px; 顺时针 上 右 下 左 */
             }
 
         </style>
     </head>
     <body>
         <div class="top">上边div</div>
         <div class="box">左边div</div>
         <div class="box_model"><img src="img/btn.jpg"/></div>
         <div class="box">右边div</div>
         <div class="bottom">下边div</div>
     </body>
</html>

桂花很香,旭很美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门学习笔记02

css常用属性border ：设置边框的样式格式：宽度样式颜⾊例如：style=”border:1px solid #ff0000” ，1像素实边红⾊。样式取值：solid 实线，none ⽆边，double 双线等 width、height：⽤于设置标签的宽度、⾼度。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &lt
复制链接

扫一扫