这篇写的是今天的学习到的属性,一共20个。

属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用。

样式属性

1、border

CSS边框属性允许你指定一个元素边框的样式和颜色。

边框样式border-style

属性用来定义边框的样式

none: 默认无边框

dotted: dotted:定义一个点线框

dashed: 定义一个虚线框

solid: 定义实线边界

double: 定义两个边界。 两个边界的宽度和border-width的值相同

groove: 定义3D沟槽边界。效果取决于边界的颜色值

ridge: 定义3D脊边界。效果取决于边界的颜色值

inset:定义一个3D的嵌入边框。效果取决于边界的颜色值

outset: 定义一个3D突出边框。 效果取决于边界的颜色值

例子:

border-style: solid;

边框宽度 border-width

border-width:5px;

边框颜色border-color

可以设置的颜色:

  • name - 指定颜色的名称,如 "red"
  • RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
  • Hex - 指定16进制值, 如 "#ff0000"

您还可以设置边框的颜色为"transparent"。

注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。

border-color:#98bf21;

边框-单独设置各边

例子:

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;

边框-简写属性

border:5px solid red;

border-radius

向元素添加圆角边框。

半圆例子:

div{
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
background: red;
} <div></div>

四个半径值分别是左上角、右上角、右下角和左下角,顺时针

置每个角的垂直半径和水平半径,用斜杠隔开,第一个参数表示左上角开始顺时针的水平半径,第二个参数表示左上角开始顺时针的垂直半径

这个圆角使盒模型丰富起来,之前只有矩形这个形状,现在多了有弧度的形状。

border-image

边框样式使用图像来填充。

border-image:url(图片地址);

box-shadow

向盒子添加阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;

line-height

控制段落内每行高度

line-height:25px;

行高之所以会居中,是因为它有自己计算方式,首先它会获取font-size的大小,然后使用里line-height减去font-size

(line-height  -  font-size)得到值除以一半分配到字体的上和下,来实现居中,不过line-height小于font-size是不会

影响到字体的大小的。

text-indent

控制段落的首行缩进

p { text-indent:2em;}

text-align

控制段落对齐方式,不但是文本,对象中的其它inline或inline-block元素也能够被text- align进行对齐方式的设置。

text-align : left | right | center | justify

p { text-align:center;}

letter-spacing

控制段落的文字间的距离

p { letter-spacing:5px;}

text-overflow

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

text-overflow:clip | ellipsis

clip          当内联内容溢出块容器时,将溢出部分裁切掉。

ellipsis     当内联内容溢出块容器时,将溢出部分替换为(...)。

但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,

还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),

只有这样才能实现溢出文本显示省略号的效果。

white-space

规定段落中的文本不进行换行

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符

nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

例子:

div,input{
overflow: hidden; /*条件1:超出部分隐藏*/
white-space: nowrap;/*条件2:强制在同一行内显示所有文本*/
text-overflow: ellipsis;/*超出部分显示。。。*/
}

word-wrap

控制内容超过容器的边界时是否断行

normal           允许内容顶开或溢出指定的容器边界。

break-word    内容将在边界内换行。如果需要,单词内部允许断行。

word-wrap: break-word;

background-color

背景颜色

background-color : transparent | color 

body { background-color:#CCCCCC;}

RGBA

color:rgba(R,G,B,A)以上R、G、B三个参数,正整数值的取值范围为:0 - 255。

百分数值的 取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。

并非所有浏览 器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。

border-color:rgba(255 , 0 , 0 , .7);

linear-gradient

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,

这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经

得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

第一个参数表示线性渐变的方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从

左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参

数,表示多种颜色的渐变。

background-image:linear-gradient(to left, red 30%,blue);

background-image

背景图片

background-image : none | url ( url ) 

body { background-image:url(images/bg.gif);}

background-repeat

背景平铺方式

background-repeat : repeat | no-repeat | repeat-x | repeat-y

body { background-repeat:repeat-x;}    

background-position

背景定位

background-position : 左对齐方式  上对齐方式

 body { background-position:left bottom;}

背景样式缩写

background: 背景色 背景图片 背景平铺方式 背景定位

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

知识扩展:

w3c 里有外边距的合并

http://www.w3school.com.cn/css/css_margin_collapsing.asp

标准流就是指在不使用其他的与排列和定位相关的特殊css规则时,各种元素的排列规则。

行内元素和块级元素在DOM树中都是一个节点。从DOM的角度来看,块级元素和行内元素

是没有区别的,都是树上的一个节点;而从css的角度,二者有很大的区别,块级元素拥有

自己的区域,行内元素则没有。

再继续昨天margin为负值的问题:

效果图:

代码:

#div1{
width: 50px;
height: 100px;
border:2px solid #000; }
.div2{
width: 30px;
height: 30px;
border: 2px solid #333;
margin-left:-10px;
} <div id="div1">
<div class="div2"></div>
</div>

从代码可以看去它们是父子,但子级就是出了父级的范围,在我们印象中应该只有position这个

属性可以做到这样,但margin也能做到,这个就和上篇写公式有关,因为在数学上它是合理的,

所以它不算违规。

css之属性部分的更多相关文章

  1. CSS will-change 属性

    介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...

  2. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  3. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  4. css z-index属性使用过程中遇到的问题

    z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...

  5. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

  6. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  7. CSS3 border-radius 属性和CSS outline 属性

    CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...

  8. Normalize.css:优化重置CSS默认属性

    Normalize.css:优化重置CSS默认属性 官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necol ...

  9. CSS边框属性一---border-radius

    1.CSS outline 属性 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. p { outline:#00FF00 dotted thick; } ...

随机推荐

  1. ini_set 设置php配置项 在windows和linux下的不同

    在win下,当你要include多个路径的话,你要用“:”隔开,但在linux下就使用":"隔开的.. if (substr(php_uname(), 0, 7) == " ...

  2. [linux] 更改目录显示颜色

    第一.创建配置文件 $dircolors -p>~/.dircolors 第二.编辑配置文件 打开文件: $vi ~/.dircolors 找到这一行: DIR ; # directory #可 ...

  3. js 判断字符为空

    function checkIsNull(value){ if(typeof value=='undefined'){ return true; } if(value==null){ return t ...

  4. wpf中button的无边框实现

    设置button的样式为:Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}";即可

  5. JAVA基础之两种核心机制

    突然之间需要学习Java,学校里学的东西早就忘记了,得用最短的时间把Java知识理顺,重点还是J2EE,毕竟所有的ava项目中95%都是J2EE,还是先从基础的J2SE学起吧....... 首先是了解 ...

  6. windows server 2008 - 创建域和本机用户

    /* * ===================================================================================== * Filenam ...

  7. 浅谈Android 6.0之Runtime Permissions

    前言 Android6.0发布后,其一系列新特新足够让我们这些Android程序员兴奋一段时间了.首先我们先看看具体有哪些新特性: -锁频下语音搜索 -指纹识别 -更完整的应用权限管理 -Doze电量 ...

  8. Uploadify 上传文件插件详解

    Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...

  9. JavaScript-遍历数组

    遍历数组:依次访问数组中每个元素 for(var i=0; i<arr.length;i++){ arr[i] //当前数组 } <!DOCTYPE html> <html&g ...

  10. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...