Maison >interface Web >tutoriel HTML >CSS3-02 样式 1_html/css_WEB-ITnose
概述
上一篇博客中,概述了如何在 HTML 文档中使用 CSS,以及如何选择 HTML 元素,并且在文档的最后以表格的形式给出了 CSS 中所有的属性。在接下来的这篇博客中,将阐述主要 HTML 元素的可控制 CSS 样式,并以示例的方式展示如何使用 CSS 设置 HTML 元素的样式。一个 HTML 元素,默认情况下是没有渲染效果的,通常需要借助 CSS 来赋予其华丽的样式。但是 CSS 的属性众多,如何去学习,并在实践中快速的运用这些属性显得尤为重要。接下来会对这些属性,按照自己的思维进行简单的梳理,希望可以抛砖引玉,启发大家的思维。大家可以思考一下:我们使用 CSS 来干什么?设置 HTML 元素的样式。在这里我觉得 HTML 元素是首要的核心,然而展示在 Web 页面上的 HTML 元素,是以一个个盒子的形式展示的。那么我们就首先来介绍一下盒模型,以此为基础逐渐地切入到 HTML 元素的样式。盒模型
如图
代码
HTML 文档
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 链接到外部样式表 --> <link rel="stylesheet" href="mystyle.css"> <title>CSS 样式(初级)</title></head><body> <!-- 盒模型 --> <div id="margin">Margin <div id="border">Border <div id="padding">padding <div id="content">Content </div> </div> </div> </div></body></html>
CSS 文件
#margin{ background-color: lightgray; width: 500px; height: 350px; margin: 100px; padding-top: 10px; padding-left: 25px;}#border{ background-color: blue; width: 450px; height: 300px; padding-top: 10px; padding-left: 25px; text-align: center;}#padding{ background-color: orange; width: 400px; height: 250px; padding-top: 10px; padding-left: 25px; text-align: right;}#content{ background-color: white; width: 350px; height: 200px; padding-top: 10px; padding-left: 25px; text-align: left;}
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 链接到外部样式表 --> <link rel="stylesheet" href="mystyle.css"> <title>CSS 样式(初级)</title></head><body> <div id="container"> <div id="content"> 注意 外边距的变化 </div> </div></body></html>
body{ background-color: lightgray;}#content{ width: 300px; height: 230px; /*指定四个方向的外边距都为 25px*/ margin: 25px; background-color: white;}
代码
#content{ width: 300px; height: 230px; margin: 25px 50px; background-color: white;}
三个参数
代码
#content{ width: 300px; height: 230px; margin: 25px 50px 100px; background-color: white;}
四个参数
代码
#content{ width: 300px; height: 230px; margin: 25px 50px 100px 125px; background-color: white;}
普通写法
#content{ width: 300px; height: 230px; margin-top: 50px; margin-left: 60px; background-color: white;}
border-style
dotted | 点线框 |
dashed | 虚线框 |
solid | 实线框 |
double | 上边界,每个边界的宽度等于 border-width |
groove | 3D 沟槽边框 |
ridge | 3D 脊边框 |
inset | 3D的嵌入边框 |
outset | 3D突出边框 |
HTML 文档
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 链接到外部样式表 --> <link rel="stylesheet" href="mystyle.css"> <title>CSS 样式(初级)</title></head><body> <div id="border1"></div> <br> <div id="border2"></div></body></html>
CSS 文件
#border1{ width: 100px; height: 80px; /*边框 普通写法*/ border-style: solid; border-width: 2.5px; border-color: red;}#border2{ width: 100px; height: 80px; /*边框 简写形式*/ border: solid 2.5px red;}
效果
普通写法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 链接到外部样式表 --> <link rel="stylesheet" href="mystyle.css"> <title>CSS 样式(初级)</title></head><body> <div id="border1"></div> <br> <div id="border2"></div> <br> <div id="border3"></div> <br> <div id="border4"></div></body></html>
简写(四个值分别对应与:左上、右上、右下、左下)
#border1{ width: 60px; height: 35px; /*边框 普通写法*/ border-style: solid; border-width: 2.5px; border-color: red; /*边框圆角*/ border-radius: 8px 3px 12px 20px;}#border2{ width: 60px; height: 35px; /*边框 简写形式*/ border: solid 2.5px red; /*边框圆角*/ border-radius: 8px 5px 20px;}#border3{ width: 60px; height: 35px; /*边框 简写形式*/ border: solid 2.5px red; /*边框圆角*/ border-radius: 8px 20px;}#border4{ width: 60px; height: 35px; /*边框 简写形式*/ border: solid 2.5px red; /*边框圆角*/ border-radius: 8px;}
效果
语法
box-shadow: h-shadow v-shadow blur spread color inset;
各个属性的含义
h-shadow | 水平阴影的位置(可以为负值) | 必需 |
v-shadow | 垂直阴影的位置(可以为负值) | 必需 |
blur | 模糊距离 | 可选 |
spread | 阴影的大小 | 可选 |
color | 阴影的颜色 | 阴影的颜色 |
inset | 从外层的阴影(开始时)改变阴影内侧阴影 | 可选 |
HTML 文档
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 链接到外部样式表 --> <link rel="stylesheet" href="mystyle.css"> <title>CSS 样式(初级)</title></head><body> <div id="border1"></div></body></html>
CSS 文件
#border1{ width: 60px; height: 35px; /*边框 普通写法*/ border-style: solid; border-width: 2.5px; border-color: red; /*边框圆角*/ border-radius: 8px 3px 12px 20px; box-shadow: 15px -8px 8px black;}
效果
语法
border-image: source slice width outset repeat;
各个属性的含义
source | 指定要用于绘制边框的图像的位置 |
slice | 图像边界向内偏移 |
width | 图像边界的宽度 |
outset | 指定在边框外部绘制 border-image-area 的量 |
repeat | 如何延展和铺排边框图像的边缘和中间部分 |
repeat 属性的取值
stretch | 拉伸图像来填充区域(默认值) |
repeat | 平铺图像来填充区域 |
round | 类似 repeat 值。如果无法完整平铺所有图像,则对图像进行缩放以适应区域 |
space | 类似 repeat 值。如果无法完整平铺所有图像,扩展空间会分布在图像周围 |
initial | 将此属性设置为默认值 |
inherit | 从父元素中继承该属性 |
HTML 文档
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 链接到外部样式表 --> <link rel="stylesheet" href="mystyle.css"> <title>CSS 样式(初级)</title></head><body> <div id="border2"></div> <br> <div id="border3"></div> <br> <div id="border4"></div></body></html>
CSS 文件
#border2{ width: 100px; height: 70px; border-width: 30px; border-image: url("border.png") 30 30 round;}#border3{ width: 100px; height: 70px; border-width: 30px; border-image: url("border.png") 30 30;}#border4{ width: 100px; height: 70px; border-width: 30px; border-image: url("border.png") 90 90;}
效果
由以上 Margin、Padding、Border 三个样式的介绍,你是否发现了某些相似的地方。他们都可以设置不同方向上(上下左右,)的属性值,在未指定特定方向的情况下,默认按照顺时针的方向匹配,且遵循中间对称原则(即简写时,若只有三个值,则中间的那个值表示 左右(或 右上,左下) 两个边框的属性值)。你是否还发现他们有一些通用的属性,比如说:width、color;而且还有一些特有属性,比如说:border-style、border-image、border-radius。希望你对这些属性逐渐地敏感起来,从而可以推测出一些 HTML 元素所具有的属性(尽管你不确定)。比如说:对于文本(包含文本的 HTML 元素,比如:<p>),都具有 color、font-size、font-family 等属性。不要问我问什么,这是常识。你是否感觉到 Margin、Padding、Border 这些样式其实是 HTML 元素额外的装饰品。盒模型的内容才是真正的 HTML 元素定义的内容。在下一篇博客中,会详述盒模型的内容,在那里你会看到更多关于盒模型的思考。多思考,你会发现很多有趣的事情,比如说:天才和逗比真的可以是一个人(你的生活中遇到这样的人了吗?)。