这篇让我们继续上篇CSS之旅吧~~~上货~
一.CSS样式
1.边框属性
border:边框
width:宽度
height:高度
background-color:背景颜色
- 举例使用:
<style>
#dd{
/*
border:边框粗细 边框线类型 边框线颜色
*/
border:1px solid blue;
/*
宽度、高度 : px 百分比
*/
width:300px;
height: 300px;
/*
颜色:颜色单词
颜色编码
*/
background-color: bisque;
}
#dl{
width:300px;
height: 300px;
background-image: url("../img/xxx.png");
}
</style>
</head>
<body>
<div id="dd">今天周日了,明天你是否要继续跟煌sir一起学习呢</div>
<div id="dl">今天周日了,明天你是否要继续跟煌sir一起学习呢</div>
</body>
2.布局
格式:
选择器{float:属性值;}
常用属性值:
none:元素不浮动(默认值)
left:元素向左浮动
right:元素向右浮动
- 格式:选择器{
clear:属性值;
}
常用属性值:
left:不允许该元素左侧有浮动元素(清除左侧浮动的影响)
right:不允许该元素右侧有浮动元素(清除右侧浮动的影响)
both:同时清除左右两侧浮动的影响(一般用both)
- 举例使用:
<style>
#d1{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
#d2{
background-color: green;
width: 110px;
height: 110px;
float: left;
/*clear:both;*/
}
#d3{
background-color: blue;
width: 120px;
height: 120px;
float: left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
3.转换
块元素:会自动换行
行内元素:不会自动换行
- 常用的属性值:
block:此元素将显为块元素(块元素默认的display属性值)
inline:此元素将显示为行内元素(行内元素默认的display属性值)
none:此元素将被隐藏,不显示,也不占用页面空间。
4.字体
<style>
span{
font-size:120px;
color:red;
}
</style>
</head>
<body>
<span>xxxxx</span>
</body>
二.CSS盒子模型
1.简述
2.边框(border)
- 举例使用:
-
<style> div{ width: 300px; height: 300px; border-top:3px double blue; border-right:3px double red; border-bottom:3px double yellow; border-left:3px double green; /* 一次性设置四个边框 border:3px double green; */ } </style> </head> <body> <div></div> </body>
3.内边距(padding)
内边距:HTML元素里的内容体 到 HTML元素边框 的距离
- 举例使用:
<style>
div{
width: 300px;
height: 300px;
border:3px solid red;
padding-top: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<div>这是我的测试内容</div>
</body>
4.外边距(margin)
<style>
div{
width: 300px;
height: 300px;
border:3px solid red;
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
三.引入CSS样式
1.内部样式(写在某个HTML页面上)
修改某一个标签的样式:
<html标签 style=”css样式代码” />
修改某个页面上的标签样式:
格式:
<style>
css样式代码
</style>
2.外部样式
1、创建css文件 (.css)
2、为HTML引入css文件
格式:
<link rel="stylesheet" type="text/css" href="css文件路径"/>
- rel="stylesheet" ,固定值,表示样式表
- type="text/css",固定值,表示css类型
- href ,表示css文件位置
举例:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="demo.css"/>
</head>
看完恭喜你,又知道了一点点!!!
你知道的越多,不知道的越多!
~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!