一、边框样式

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-colorborder-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常用样式(二)的更多相关文章

  1. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  2. CSS常用样式(四)之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  3. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  4. css常用样式对文本的处理演练

    CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...

  5. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  6. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  7. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  8. CSS常用样式整理

    元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...

  9. #8.11.16总结#CSS常用样式总结(二)

    border  边框 简写:border:1px solid #000; 等效于:border-width:1px;border-style:solid;border-color:#000; 顺序:b ...

随机推荐

  1. 让Team Foundation Server/TFS自动记住用户名密码解决方案

    在使用Team Foundation Server(以下简称TFS) 的时候,在每次打开Visual Studio TFS时候,需要输入用户名和秘密,比较麻烦.现提供一种方法可以解决这个问题: 依次执 ...

  2. PHP的学习--可变变量

    可变变量 有时候使用可变变量名是很方便的.就是说,一个变量的变量名可以动态的设置和使用.一个普通的变量通过声明来设置,例如: <?php $a = 'hello'; ?> 一个可变变量获取 ...

  3. eclipse使用tomcat进行部署时编译代码不一致的处理

    操作步骤: 1. 先add and remove 去除项目 2. clean 完成清除工程在tomcat的目录 3. project-->clean 4. add adn remove 重新添加 ...

  4. Testing - 测试基础 - 探索

    定义 探索性测试(Exploratory Testing)是一种自由的软件测试风格,强调测试人员同时展开测试学习,测试设计,测试执行和测试结果评估等活动,以持续优化测试工作. 其特征有:即兴发挥,快速 ...

  5. WTF Forms – 使用 CSS 实现用户体验更好的表单

    WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...

  6. c#实现查询程序运行线程数

    class Program { static void Main(string[] args) { List<Thread> list = new List<Thread>() ...

  7. Visual Studio 技能GET

    常用快捷键 自动生成头部注释 代码片段 NuGet Team Foundation 常用的VS快捷键 查看与设置快捷键 一般在菜单里面我们直接就可以看到一些功能的快捷键.另外,可以依次通过 菜单栏-工 ...

  8. C#控件绑定数据源方式

    1:控件数据源绑定泛型Dictionary<string,string> ): Dictionart<string,string> D=new Dictionary(strin ...

  9. 【iOS】关联属性存取数据

    有时候我们需要在现有的类存放一些额外的信息,通常的做法是继承一个子类,然后定义新增加的属性,然而如果我们为每个需要的类都添加一个类显得太麻烦了,objc提供了一个关联属性的特性,可以给一个对象关联一个 ...

  10. 编写高性能SQL

    前言:系统优化中一个很重要的方面就是SQL语句的优化.对于海量数据,劣质SQL语句和优质SQL语句之间的速度差别可达到上百倍,可见对于一个系统不是简单的能实现其功能就可以了,而是要写出高质量的SQL语 ...