css之属性部分

这篇写的是今天的学习到的属性,一共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也能做到,这个就和上篇写公式有关,因为在数学上它是合理的,

所以它不算违规。

时间: 2024-10-10 17:12:52

css之属性部分的相关文章

CSS position 属性

实例 定位 h2 元素: h2 { position:absolute; left:100px; top:150px; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有主流浏览器都支持 position 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.

CSS z-index 属性的使用方法和层级树的概念

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 顺序规则 如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点. 定位规则 如果将 positio

#学习记录#——CSS content 属性

CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </h1> <h2>给末尾不添加内容. </h2> css: <style> h1:after{ content: “hello world!!” } h2:after{ content: none } </style> 所要添加的内容用双引号引起来,若不添加

CSS重要属性之float学习心得

我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定 6.4:智能布局 1:float属性 float,顾名思义是漂浮,

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

文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 这个星期我们团队做了一次内部的技术分享

css float 属性解析

  float 属性的定义:使元素在哪个方向浮动   默认值为:none 注意:浮动元素会生成一个块级框,而不论它本身是何种元素 HTML代码: <body> <div class="main"> <div class="d" id="d1">框1</div> <div class="d" id="d2">框2</div> <di

CSS float 属性

Float定义: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 注释: 假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为

快速记住CSS样式属性单词及输入HTML+CSS的方法

快速记住CSS样式属性单词及输入HTML+CSS的方法,DIVCSS5介绍一种快速输入HTML代码.快速输入CSS样式英文单词与样式值输入方法.降低英文单词代码输入错误概率,提升输入代码速度.DW软件输入CSS和HTML的终极用法(非面板输入法). DIVCSS5教大家一种快速记住CSS样式属性单词及用法的方法,告别死记硬背才是硬道理. CSS样式布局中使用的CSS样式英文单词,不需要死记硬背,会使用认识,知道长什么样即可.在DIV CSS布局开发中对于是否会拼写CSS属性单词关系不大,会使用.

#3 CSS常用属性

CSS里面的样式非常多,但是常用的样式并不是很多. 下面主要是以下常用的,当然这个没涉及到考虑兼容性的问题.兼容性的主要还是要了解不懂浏览器之间的差异,具体我也半桶水,在努力学习中,等学会了,在总结一下分享给大家. -------2014.07.29 这个上课主要讲的布局,就是关于页面的布局,现在90%的网站都是用DIV+CSS布局的.所以应该好好掌握这次课的知识. 在学习DIV之前,我们还要熟悉一些常见的CSS样式. CSS的常用样式 字体: 1,line-height:50px