共计 3684 个字符，预计需要花费 10 分钟才能阅读完成。
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo18-CSS 款式 - 边框 </title>
</head>
<body>
<!--
属性 border-style 值
- none 默认无边框
- dotted 点线边框
- dashed 虚线边框
- solid 实线边框
- double 两个边框, 两个边框间宽度和 border-width 的值雷同
属性 border-width: 设置线条的粗细
属性 border-color: 设置线条色彩
需要: 创立 5 个 p 标签
1. 第一个 p 标签设置线条为 点状线条, 宽度为 1px, 色彩为红色
2. 第二个 p 标签设置线条为 虚线, 宽度为 2px, 色彩为蓝色
3. 第三个 p 标签设置线条为 单实线, 宽度为 3px, 色彩为黄色
4. 第四个 p 标签设置线条为 双实线, 宽度为 4px, 色彩为粉色
5. 采纳简化写法设置边框 1px 单实线 金色
-->
<p style="border-style:dotted; border-width:1px; border-color:red;"> 我是第一个 p 标签 </p>
<p style="border-style:dashed; border-width:2px; border-color:blue;"> 我是第二个 p 标签 <br/> 我又换行啦 </p>
<p style="border-style:solid; border-width:3px; border-color:yellow;"> 我是第四个 p 标签 </p>
<p style="border-style:double; border-width:4px; border-color:pink;"> 我是第四个 p 标签 </p>
<p style="border:1px solid gold"> 我要用简化写法 </p>
</body>
</html>
<!--
* 我的项目形容: 学习 CSS 之 CSS 款式 - 边框
* 作 者: chain.xx.wdm
-->
尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo19-CSS 款式 - 尺寸 </title>
<style>
div {
border: 1px dashed red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div> 我看看尺寸 </div>
</body>
</html>
<!--
* 我的项目形容: 学习 CSS 之 CSS 款式 - 尺寸
* 作 者: chain.xx.wdm
* 备 注:
-->
转换: display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo20-CSS 款式 - 转换 </title>
<style>
div {border: 2px dotted pink;}
span {border: 5px solid black;}
</style>
</head>
<body>
<!--
属性 display 用于行级元素与行内元素间转换
1. 将行级元素转换为行内元素 div => span 属性值: inline
2. 将行内元素转换为行级元素 span => div 属性值: block
3. 将指定的元素隐没 属性值: none 地位也隐没
4. 将指定的元素暗藏 属性 visibility- 属性值 hidden 地位不隐没
-->
<div id="one" class="mystyle" style="display:inline;"> 第一个 div</div>
<span id="two" class="mystyle" style="display:block;"> 惟一的 span</span>
<div id="three" class="mystyle" style="display:none;"> 第二个 div</div>
<div id="four" class="mystyle" style="visibility:hidden;"> 第三个 div</div>
<div id="five" class="mystyle"> 第四个 div</div>
</body>
</html>
<!--
* 我的项目形容: 学习 CSS 之 CSS 款式 - 转换
* 作 者: chain.xx.wdm
-->
字体: color, font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo21-CSS 款式 - 字体 </title>
</head>
<body>
<a href="#" style="color:red;"> 第一个超链接 </a><br/>
<a href="#" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">Number Two</a><br/>
<a href="#" style="font-size:30px"> 第三个超链接 </a><br/>
<a href="#" style="text-decoration:none;"> 第四个超链接 </a><br/>
</body>
</html>
<!--
* 我的项目形容: 学习 CSS 之 CSS 款式 - 字体
* 作 者: chain.xx.wdm
* 备 注:
-->
背景色: background-color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo23-CSS 款式 - 背景色及背景图片 </title>
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px dashed red;
background-color: grey;
}
#div2 {
width: 200px;
height: 200px;
border: 1px dotted black;
background-image: url(img/xi.jpg); /* 须要加 url() */}
</style>
</head>
<body>
<div id="div1"></div>
<hr/>
<div id="div2"></div>
</body>
</html>
<!--
* 我的项目形容: 学习 CSS 之 CSS 款式 - 背景色及背景图片
* 作 者: chain.xx.wdm
* 备 注:
-->
布局: float, clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo23-CSS 款式 - 浮动 </title>
<style>
/* div1 设置款式 50 50 red */
#div1 {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
/* div2 设置款式 100 100 blue */
#div2 {
width: 100px;
height: 100px;
background-color: blue;
float: right;
}
/* div3 设置款式 150 150 green */
#div3 {
width: 150px
height: 150px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<!--
1. 筹备工作
div1 设置款式 50 50 red
div2 设置款式 100 100 blue
div3 设置款式 150 150 green
2. 设置浮动
a. div1 左浮动
b. div2, div3 左浮动
c. div2 右浮动, div1 和 div2 不浮动
d. div2 右浮动, div1 和 div3 左浮动
--
<div id="div1" class="mystyle"></div>
<div id="div2" class="mystyle"></div>
<div id="div3" class="mystyle"></div>
</body>
</html>
<!--
* 我的项目形容: 学习 CSS 之 CSS 款式 - 浮动
* 作 者: chain.xx.wdm
* 备 注:
-->
正文完