CSS3-02 样式 1
概述
上一篇博客中,概述了如何在 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;
}
各个组件
- Margin:边框外部包裹的区域,完全透明
- Border:边框,会受到盒子的背景颜色的影响
- Padding:元素内容与边框之间填充的间距,会受到盒中填充的背景颜色的影响
- Content:盒子的内容,即元素的内容
注意
- 元素的高度计算公式
- 元素的总宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
- 元素的总高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
- 元素的高度计算公式
Margin
- 外边距的可能取值
- 可变外边距(不知这样说是否恰当)
- auto:基于浏览器自动调整外边距
- 固定外边距
- 使用 像素、pt、em
- 使用 百分比
- 可变外边距(不知这样说是否恰当)
- 设置外边距的方式
简写
一个参数
作用:设置四个方向上的外边距(四个方向上的外边距为同一个值)
代码
<!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
- Border 的可设置属性
样式(border-style)、颜色(border-color)、宽度(border-width)
border-style
|样式|含义|
|---|---|
|dotted|点线框|
|dashed|虚线框|
|solid|实线框|
|double|上边界,每个边界的宽度等于 border-width|
|groove|3D 沟槽边框|
|ridge|3D 脊边框|
|inset|3D的嵌入边框|
|outset|3D突出边框|border-color
- 边框颜色的取值
- name,颜色的名称,如:"red"
- RGB,RGB 值,如:rgb(255,0,0)
- Hex,16 进制值,如:"#ff000"
- 注意
- 必须首先设置 border-style 属性,border-color 属性的设置才会有效果
- 边框颜色的取值
border-width
- 边框宽度的取值
- 长度值,如:px、em 等
- 关键字,如:thin,medium、thick。
- 注意
- 表示宽度值得三个关键字,没有固定的宽度,由浏览器的设置属性决定。
- 边框宽度的取值
示例
代码
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;
}
效果
边框圆角(border-radius)
- 边框圆角的取值
- 长度值,如:px、em 等
- 设置圆角的值
普通写法
<!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)
语法
box-shadow: h-shadow v-shadow blur spread color inset;
各个属性的含义
可选 ow ow 糊距离 阴影的大小 阴影的颜色 从外层的阴影(开始时)改变阴影内侧阴影 示例
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-img)
语法
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;
}
效果
Padding
- 概述
- Padding 使用来设置 边框 与 内容 之间的填充区域。设置方式和规则与 Margin 相同,在此就不在赘述了。
领悟
由以上 Margin、Padding、Border 三个样式的介绍,你是否发现了某些相似的地方。他们都可以设置不同方向上(上下左右,)的属性值,在未指定特定方向的情况下,默认按照顺时针的方向匹配,且遵循中间对称原则(即简写时,若只有三个值,则中间的那个值表示 左右(或 右上,左下) 两个边框的属性值)。
你是否还发现他们有一些通用的属性,比如说:width、color;而且还有一些特有属性,比如说:border-style、border-image、border-radius。希望你对这些属性逐渐地敏感起来,从而可以推测出一些 HTML 元素所具有的属性(尽管你不确定)。比如说:对于文本(包含文本的 HTML 元素,比如:<p>),都具有 color、font-size、font-family 等属性。不要问我问什么,这是常识。
你是否感觉到 Margin、Padding、Border 这些样式其实是 HTML 元素额外的装饰品。盒模型的内容才是真正的 HTML 元素定义的内容。在下一篇博客中,会详述盒模型的内容,在那里你会看到更多关于盒模型的思考。
多思考,你会发现很多有趣的事情,比如说:天才和逗比真的可以是一个人(你的生活中遇到这样的人了吗?)。
CSS3-02 样式 1的更多相关文章
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- 炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
- css3-4 css3边框样式
css3-4 css3边框样式 一.总结 一句话总结: 二.css3边框样式 1.相关知识 边框属性:1.border-width2.border-style3.border-color 边框方位:1 ...
- css3-3 css3背景样式
css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
- 一些上流的CSS3图片样式
直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...
- css3常用样式集锦
控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; ...
- [CSS3] 学习笔记-CSS3盒子样式
1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- css3的样式讲解-css学习之旅(3)
css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:bac ...
随机推荐
- Git版本控制Windows版快速上手
说到版本控制,之前用过VSS,SVN,Git接触不久,感觉用着还行.写篇博文给大家分享一下使用Git的小经验,让大家对Git快速上手. 说白了Git就是一个控制版本的工具,其实没想象中的那么复杂,咱在 ...
- 关于java连接mysql数据库的几个问题的解决方法。
今天就为了连接下数据库获取信息来提供给ListView使用,搞了足足5小时. 出现的问题有: 第一个是,DriverManager.getConnection(url, user, pwd),这个函数 ...
- 制作动画或小游戏——CreateJS事件(二)
在Canvas中如果要添加事件,就需要计算坐标来模拟各种事件,而EaselJS中已经封装好了多个事件,只需调用即可. 一.事件 1)点击 事件是绑定在Shape类中的,click事件与DOM中的意思是 ...
- java多线程--线程池的使用
程序启动一个新线程的成本是很高的,因为涉及到要和操作系统进行交互,而使用线程池可以很好的提高性能,尤其是程序中当需要创建大量生存期很短的线程时,应该优先考虑使用线程池. 线程池的每一个线程执行完毕后, ...
- hibernate笔记--缓存机制之 一级缓存(session缓存)
一级缓存: 又称为session缓存,它和session生命周期相同,周期非常短.是事务级别的缓存: 还是以Book和Category这两个表为例,我们用代码观察一个缓存的存在: 假设现在我要去查询i ...
- Spring加载xsd引起的问题小记
前言 最近要把之前写好的监控系统加上报警功能,就是通过rpc调用发短信发邮件的服务发送报警信息.发短信发邮件的功能是通过dubbo管理提供的.自然使用这些服务就难免用到spring.而我这又是一个st ...
- Sql Server 覆盖索引
覆盖索引通常都是复合索引,即索引字段为多个.创建索引时应该注意索引排列顺序. Sql Server检索应用索引时,字段识别顺序为 从左到右. 例如如下索引的使用上 Create NONCLUSTERE ...
- vim使用心得(持续更新)
!统计符合条件的行数方法1 :g/<匹配条件>/d 查看影响行数,然后按u恢复. !统计符合条件的行数方法2 :let numb=0 :g/<匹配条件>/let numb+ ...
- jQuery手机菜单
效果展示 http://hovertree.com/texiao/nav/4/ 手机扫描二维码查看效果: 源码下载 http://hovertree.com/h/bjaf/kroft6c7.htm ...
- SQL Server 数据库分离与附加
一.概述 SQL Server提供了“分离/附加”数据库.“备份/还原”数据库.复制数据库等多种数据库的备份和恢复方法.这里介绍一种学习中常用的“分离/附加”方法,类似于大家熟悉的“文件拷贝”方法,即 ...