CSS(三):基本属性二

  • border-width
  • border-color
  • border-style

border-width 简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none,边框宽度实际上会重置为 0。不允许指定负长度值。

border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

border-color 属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为 4 个边分别设置不同的颜色。

border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

只有当这个值不是 none 时边框才可能出现。

 1 /* 设置5px的灰色实线边框 */
 2 p{
 3     border-width: 5px 5px 5px 5px;
 4     border-color: #ccc;
 5     border-style: solid;
 6 }
 7
 8 <p>border-width: 5px 5px 5px 5px;
 9     border-color: #ccc;
10     border-style: solid;</p>
  • border

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性:

  • border-width
  • border-style
  • border-color

如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。

1 /* 设置5px的灰色实线边框 */
2 p{
3     border: 5px solid #ccc;
4 }
5
6 <p>border: 5px solid #ccc</p>
  • border-radius

border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性。

  • 语法

border-radius: 1-4 length|% / 1-4 length|%;

注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

1 /* 设置各半径为5px的圆角 */
2 p{
3     border-radius: 5px;
4 }
5
6 <p>border-radius: 5px</p>
  • border-image

border-image 属性是一个简写属性,用于设置以下属性:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

如果省略值,会设置其默认值。

1 /* 设置图像边框 */
2 p{
3     border-image: url(button.png) 0 14 0 14 stretch;
4 }
5
6 <p>border-image: url(button.png) 0 14 0 14 stretch</p>
  • box-shadow

box-shadow 属性向边框添加一个或多个阴影。

  • 语法
box-shadow: h-shadow v-shadow blur spread color inset;

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

1 /* 设置向下右偏移5px的黑色阴影 */
2 p{
3     box-shadow: 5px 5px 10px #000;
4 }
5
6 <p>box-shadow: 5px 5px 10px #000</p>
  • line-height

line-height 属性设置行间的距离(行高)。

注释:不允许使用负值。

  • 说明

该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。

1 /* 设置20px的行高 */
2 p{
3     line-height: 20px;
4 }
5
6 <p>line-height: 20px</p>
  • text-indent

text-indent 属性规定文本块中首行文本的缩进。允许使用负值。如果使用负值,那么首行会被缩进到左边。

1 /* 设置两字符宽的缩进 */
2 p{
3     text-indent: 2em;
4 }
5
6 <p>text-indent: 2em</p>
  • text-align

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。

1 /* 设置文字左对齐 */
2 p{
3     text-align: left;
4 }
5
6 <p>text-align: left</p>
  • letter-spacing

letter-spacing 属性增加或减少字符间的空白(字符间距)。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

1 /* 设置5px的字符间隔 */
2 p{
3     letter-spacing: 5px;
4 }
5
6 <p>letter-spacing: 5px</p>
  • text-overflow

控制文字内容溢出部分的样式。

text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

1 /* 设置当字符超出容器宽度时显示为省略号 */
2 p{
3     overflow: hidden;
4     white-space: nowrap;
5     text-overflow: ellipsis;
6 }
7
8 <p>overflow: hidden;white-space: nowrap;text-overflow: ellipsis;</p>
  • word-wrap

控制内容超过容器的边界时是否断行。值为normal时允许内容顶开或溢出指定的容器边界。值为break-word时内容将在边界内换行。如果需要,单词内部允许断行。

1 /* 设置自动换行 */
2 p{
3     word-wrap: break-word;
4 }
5
6 <p>word-wrap: break-word</p>
  • background-color

background-color 属性设置元素的背景颜色。

元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

1 /* 设置背景色为灰色 */
2 p{
3     background-color: #ccc;
4 }
5
6 <p>background-color: #ccc</p>
  • background-image

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

1 /* 设置背景图片 */
2 p{
3     background-image: url(bgimage.jpg);
4 }
5
6 <p>background-image: url(bgimage.jpg)</p>
  • background-repeat

设置如何平铺对象的 background-image 属性。

默认情况下,重复background-image的垂直和水平方向。

1 /* 设置x轴重复背景图片 */
2 p{
3     background-image: url(bgimage.jpg);
4     background-repeat: repeat-x;
5 }
6
7 <p>background-image: url(bgimage.jpg);background-repeat: repeat-x</p>
  • background-position

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

1 /* 设置背景图片起始位置为左上角 */
2 p{
3     background-image: url(bgimage.jpg);
4     background-position: left top;
5 }
6
7 <p>background-image: url(bgimage.jpg);background-position: left top</p>
  • background

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url(‘smiley.gif‘); 也是允许的。

通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

1 /* 简写设置背景图片 */
2 p{
3     background:url(bgimage.jpg) no-repeat left top;
4 }
5
6 <p>background:url(bgimage.jpg) no-repeat left top</p>
时间: 08-09

CSS(三):基本属性二的相关文章

CSS学习(二)—浮动

一. 定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 解决的问题:"如何在一行显示多个div元素" 二. 浮动与不浮动区别 图1 图2 区别 不浮动的框是由上往下独占一行的,而浮动的框是紧靠着排列的.图2中d1.d2.d3都是向左浮动的,所以先把d1放在紧靠着父框摆放,然后把d2紧靠着d1摆放,最后d3紧靠着d2摆放.向右浮动亦与之类似. 语法: float : none | left |right 参数: none : 对象不浮动 left :

第三天 二列和三列布局

http://www.aa25.cn/div_css/904.shtml 今天学习<十天学会web标准(div+css)>的二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一.两列自适应宽度 下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助c

第三百二十三节,web爬虫,scrapy模块以及相关依赖模块安装

第三百二十三节,web爬虫,scrapy模块以及相关依赖模块安装 当前环境python3.5 ,windows10系统 Linux系统安装 在线安装,会自动安装scrapy模块以及相关依赖模块 pip install Scrapy 手动源码安装,比较麻烦要自己手动安装scrapy模块以及依赖模块 安装以下模块 1.lxml-3.8.0.tar.gz (XML处理库) 2.Twisted-17.5.0.tar.bz2 (用Python编写的异步网络框架) 3.Scrapy-1.4.0.tar.gz

第三套二

#include <stdio.h> int fun(int *x,int y) { int t ; t = *x ; *x = y ; return(t) ; } main() { int a = 3, b = 8 ; printf("%d %d\n", a, b) ; b = fun(&a, b) ; printf("%d %d\n", a, b) ; } 第三套二,布布扣,bubuko.com

工作那些事(三十二)由孙悟空的两个故事谈个人与团队

故事一: 话说唐太宗为了节省开支,西天取经项目需要裁员,接到通知的唐僧骤然头大,不知如何是好. 有人说: 先把猴子开了,因为不服从管理,再把沙僧开了,因为没有主见,再把猪开了, 因为猪肉比较贵,直接杀了卖钱,再把自已开了,因为没本事去,小白龙留下,因为有后台. 但是: 猴子是不能开的,猴子是团队中的精英,也就是大牛. 小白龙是不能开的,他是唐僧的座驾,是他身份的象征. 猪也是不能开的,对团队的氛围有重要作用. 最后 只能开掉沙僧 虽然他做事很多. 重要的是四种人: 1 唐僧:钦定的项目经理,虽然

第三百二十四节,web爬虫,scrapy模块介绍与使用

第三百二十四节,web爬虫,scrapy模块介绍与使用 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以应用在获取API所返回的数据(例如 Amazon Associates Web Services ) 或者通用的网络爬虫.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. Scrapy 使用了 Twisted异步网络库来处理网络通讯.

CSS标签选择器(二)

一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标识. 只有匹配到具体的对象之后,浏览器才能根据CSS样式声明,决定渲染的效果,并及时呈现在页面中. 1.2.CSS选择类型 标签选择器 ID选择器 类选择器 特殊选择器 1.3.CSS基本语法 二.标签选择器 2.1标签选择器概述 以文档对象类型的元素作为选择器,如p.div,span等. 最常用的

马哥学习笔记三十二——计算机及操作系统原理

缓存方式: 直接映射 N路关联 缓存策略: write through:通写 write back:回写 进程类别: 交互式进程(IO密集型) 批处理进程(CPU密集型) 实时进程(Real-time) CPU: 时间片长,优先级低IO:时间片短,优先级高 Linux优先级:priority 实时优先级: 1-99,数字越小,优先级越低 静态优先级:100-139,数据越小,优先级越高 实时优先级比静态优先级高 nice值:调整静态优先级   -20,19:100,139   0:120 ps

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左

[原创]ActionScript3游戏中的图像编程(连载三十二)

2.2.5 投影距离的模拟 Photoshop投影样式面板的下一个属性是距离,它也存在于Flash的投影滤镜选项中.两者初始值一致,经笔者测试,两者在效果实现和数值意义方面基本一致.Flash不需要对默认参数进行更改. 下一项是扩展,乍一看,在Flash中并没有找到对应项.但仔细观察,在Photoshop投影样式的基础选项里,除了alpha以外,就只剩该属性用了百分比. [原创]ActionScript3游戏中的图像编程(连载三十二),布布扣,bubuko.com