您的位置：首页 > Web前端 > CSS

CSS样式详解(二)

2020-07-01 16:30 99 查看

钉钉、微博极速扩容黑科技，点击观看阿里云弹性计算年度发布会！>>>

这篇让我们继续上篇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文件

格式：

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>

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多!

~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航