CSS常用样式（二）
一、边框样式
1、border:复合属性。设置对象边框的特性。
取值：
border-width: 设置或检索对象边框宽度。
border-style: 设置或检索对象边框样式。
border-color: 设置或检索对象边框颜色。
#border4
{
width: 100px;
height: 100px;
border:1px solid #FF0000;
}
<div id="border4"></div>
2、border-width:设置对象的边框宽度。
取值：
meadium: 定义默认厚度的边框
thin: 定义比默认厚度细的边框。
thick: 定义比默认厚度粗的边框。
★ 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
也可以分别对四边设置边框：
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
<style>
#border1{
width:200px;
height:100px;
border:solid;
/*border-width: 5px;*/
border-width:2px 3px 4px 5px ;
}
</style>
<div id="border1"></div>
3、border-color：设置或检索对象的边框颜色
取值：
（1）英文单词的颜色，如“blue”、“red”
（2）十六进制值，如“#ffffff”、“#ff0000”
（3）rgba、rgb，如rgba（0,0,0，.5）、rgb（255,255,255）
<style>
#border2
{
width: 200px;
height: 100px;
border: solid;
border-color: #FF0000;
}
</style>
<body>
<div id="border2"></div>
</body>
4、border-style:设置对象的边框样式
取值：
none：无轮廓。border-color与border-width将被忽略
hidden：隐藏边框。IE7及以下尚不支持
dotted：点状轮廓。IE6下显示为dashed效果
dashed：虚线轮廓。
solid： 实线轮廓。
double：双线轮廓。两条单线与其间隔的和等于指定的border-width值
可以对四边分别设置其边框样式：
#border3
{
width: 200px;
height: 100px;
border: solid;
border-top-style:dotted ;
border-left-style:dashed ;
border-right-style: double;
border-bottom-style: solid;
}
<div id="border3"></div>
5、border-radius:设置对象使用圆角边框
- 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
- 如果只提供一个，将用于全部的于四个角。
- 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
- 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
取值
length：用长度值设置对象的圆角半径长度。不允许负值
- percentage：用百分比设置对象的圆角半径长度。不允许负值
CSS代码
#yj{
background-color:indianred ;
width: 100px;
height: 100px;
border-radius: 10px 10px 20px 20px; }
HTML代码：
<div id="yj"> </div>
二、段落样式
1、行高：
控制段落内每行高度
line-height：nornmal|length
CSS代码：
#duan1
{
border: 1px solid black;
width: 500px;
height:30px ;
line-height: 30px;
}
HTML代码：
<body>
<p id="duan1">CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。</p>
</body>
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。
2、段落缩进：
控制段落的首行缩进
text-indent:length
CSS代码：
#duan2
{
width: 200px;
text-indent: 2em;/*1em为16px。这里缩进2个字符*/
}
HTML代码：
<p id="duan2">CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。</p>
3、段落对齐：
控制段落对齐方式，不但是文本，对象中的其它inline或inline-block元素也能够被text- align进行对齐方式的设置。
取值：
text-align：left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
CSS代码：
#duan3
{
background-color: aquamarine;
width: 150px;
text-align: right;
}
HTML代码：
<p id="duan3">CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。</p>
效果：
4、文字间距：
控制段落的文字间的距离
letter-spacing : normal | length
CSS代码：
#duan4
{
width: 150px;
letter-spacing: 5px;
}
HTML代码：
<p id="duan4">CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。</p>
效果：
5、文字溢出：
控制文字内容溢出部分的样式
text-overflow：clip 将溢出部分裁切掉
ellipsis 将溢出部分替换为（...）
注： 但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
CSS代码：
#duan5
{
width: 50px;
height: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
HTML代码：
<p id="duan5">CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。</p>
效果：
6、段落换行：
控制内容超过容器的边界时是否断行。
word-wrap： normal 允许内容顶开或溢出指定的容器边界。
break-word 内容将在边界内换行。如果需要，单词内部允许断行。
CSS代码：
.test p{width:100px;border:1px solid #000;}
.normal p{word-wrap:normal;}
.break-word p{word-wrap:break-word;}
HTML代码：
<ul class="test">
<li class="normal">
<strong>normal：</strong>
<p>abcdefghijklmnopqrstuvwxyz</p>
</li>
<li class="break-word">
<strong>break-word：</strong>
<p>abcdefghijklmnopqrstuvwxyz</p>
</li>
</ul>
三、背景样式
1、背景颜色
background-color : transparent | color
例子：
body { background-color:#CCCCCC;}
h1 { background-color:#EDEDED;}
2、背景图片
background-image : none | url ( url ) url：图片保存的地址
CSS代码：
#bgimg
{
width: 200px;
height: 200px;
background-image: url(img/fenfjing.jpg);
}
HTML代码：
<div id="bgimg">这里加了背景图片！</div>
3、背景平铺方式
background-repeat : repeat | no-repeat | repeat-x | repeat-y
取值：
- repeat-x：
- 背景图像在横向上平铺
- repeat-y：
- 背景图像在纵向上平铺
- repeat：
- 背景图像在横向和纵向平铺
- no-repeat：
- 背景图像不平铺
- round：
- 背景图像自动缩放直到适应且填充满整个容器。（CSS3）
- space：
- 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
- CSS代码：
-
#bgimg
{
width: 400px;
height:200px;
background-image: url(img/fenfjing.jpg);
background-repeat: repeat;
} - HTML代码：
-
<div id="bgimg">这里背景图片平铺了！</div>
- 4、背景定位
-
background-position : 左对齐方式 上对齐方式 注：设置或检索对象的背景图像位置，必须先指定background-image属性。
取值：
- percentage：用百分比指定背景图像填充的位置。可以为负值。
- length：用长度值指定背景图像填充的位置。可以为负值。
- left：背景图像在横向上填充从左边开始。
- center：背景图像在横向上填充从中间开始。
- right：背景图像在横向上填充从右边开始。
- top：背景图像在纵向上填充从顶部开始。
- center：背景图像在纵向上填充从中间开始。
- bottom：背景图像在纵向上填充从底部开始。
- CSS代码：
#bgimg
{
width: 200px;
height:300px;
border: 1px solid black;
background-position: left top;
background-image: url(img/mine.png);
background-repeat: no-repeat;
}- HTML代码：
<div id="bgimg">为背景图片设置了位置</div>
5、背景原点
background-origin ： border-box | padding-box | content-box; 注：必须保证背景是background-repeat为no-repeat 此属性才会生效。
取值：
- padding-box：从padding区域（含padding）开始显示背景图像。
- border-box：从border区域（含border）开始显示背景图像。
- content-box：从content区域开始显示背景图像。
- CSS代码：
#bgorigin
{
width: 150px;
height: 100px;
border: 15px solid cornflowerblue;
background-image: url(img/mine.png);
background-repeat: no-repeat;
background-origin: border-box;
}- HTML代码：
<div id="bgorigin"></div>
6、背景的显示区域
设定背景图像向外裁剪的区域。
background-clip ： border-box | padding-box | content-box | text
取值：
padding-box：从padding区域（不含padding）开始向外裁剪背景。
border-box：从border区域（不含border）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
CSS代码：
#pclip{
width:200px;
height:200px;
margin:;
padding:20px;
border:10px dashed #666;
background:#aaa url(img/fenfjing.jpg) no-repeat; }HTML代码：
<ul class="test1">
<li class="border-box">
<p id="pclip">从border区域（不含border）开始向外裁剪背景</p>
</li>
</ul>
7、背景尺寸
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
length：用长度值指定背景图像大小。不允许负值。
<percentage>：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
CSS代码：
#bgimg
{
width: 200px;
height:100px;
border: 1px solid black;
background-image: url(img/mine.png);
background-repeat: no-repeat;
background-size: 100px 50px;
}HTML代码：
<div id="bgimg"></div>
8、背景样式缩写
背景样式多个属性的缩写
background: 背景色 背景图片 背景平铺方式 背景定位
例： body {
background-color:# EDEDED;
background-image:url(images/bg.png);
background-repeat:no-repeat;
background-position:50% 30px;
}
缩写后：
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}
9、多重背景
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
注：用逗号隔开每组 background 的缩写值； 如果有 size 值，需要紧跟 position 并且用 "/" 隔开； 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明 所有背景图片应用该属性值。 background-color 只能设置一个。
例：
CSS代码：
#mutilbg
{
width: 200px;
height: 200px;
background:url(img/mine.png) no-repeat 100px 100px,url(img/fenfjing.jpg) no-repeat 0px 0px;
}HTML代码：
<div id="mutilbg"></div>
CSS常用样式（二）的更多相关文章
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- CSS常用样式（四）之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
- css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- CSS常用样式整理
元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...
- #8.11.16总结#CSS常用样式总结（二）
border 边框 简写:border:1px solid #000; 等效于:border-width:1px;border-style:solid;border-color:#000; 顺序:b ...
随机推荐
- Yii2的深入学习--yii\base\Event 类
根据之前一篇文章,我们知道 Yii2 的事件分两类,一是类级别的事件,二是实例级别的事件.类级别的事件是基于 yii\base\Event 实现,实例级别的事件是基于 yii\base\Compone ...
- Android基于mAppWidget实现手绘地图（三）--环境搭建
首先,你在Eclispe开发环境中新建一个项目:然后,可以通过Eclispe项目管理工具把这个项目集成到你的app项目中.下面手册会手把手教你如何正确创建一个地图对象. 第一: 新建一个新的Anroi ...
- Gumby – 基于 Sass 的灵活的，响应式 CSS 框架
Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...
- Clank – 快速构建移动 APP 原型的 HTML/CSS 框架
Clank 是一个自由和开放源码的 HTML/CSS 框架,可以帮助你轻松创建本地手机或平板电脑应用程序的原型.它着重于提供一致的用户界面,不会刻意去模仿一个特定的 OS .该框架是基于组件的,这样我 ...
- JAVA之IO文件读写
IO概述: IO(Input output)流 作用:IO流用来处理设备之间的数据传输 ...
- Elasticsearch入门必备——ES中的字段类型以及常用属性
使用Elasticsearch时,了解字段的概念,是必不可少的.毕竟无论是es还是传统的数据库,都无法弱化字段的类型. 背景知识 在Es中,字段的类型很关键: 在索引的时候,如果字段第一次出现,会自动 ...
- Elasticsearch 文件目录解释
下载后解压的Elasticsearch中,有以下几个基本的目录: home---这是Elasticsearch解压的目录 bin---这里面是ES启动的脚本 conf---elasticsearch. ...
- 【Swift学习】Swift编程之旅---控制流（九）
Swift提供了类似C语言的流程控制结构,包括可以多次执行任务的for和while循环,基于特定条件选择执行不同代码分支的if和switch语句,还有控制流程跳转到其他代码的break和continu ...
- Mac下JDK安装配置
首先可以通过官网下载JDK:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html,至于下什么版本根 ...
- node.js下when.js(Promises/A)的实践
假设一个业务场景: 通过rss地址,获取rss并保存于文件,rss地址保存于文件中. 完成该场景的业务需要完成3个任务: 1.从文件中读取rss地址. 2.获取rss. 3.保存于文件. 最后将这三个 ...