CSS 1

当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

text-decoration属性主要是用来删除链接的下划线:

a {text-decoration:none;}  //删除连接的下划线

文本转换属性是用来指定在一个文本中的大写和小写字母。 

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

font-family 属性设置文本的字体系列。

font-size 属性设置文本的大小。

如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

在所有浏览器的解决方案中,设置 <body>元素的默认字体大小的是百分比: 

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

四个链接状态

  • a:link - 正常,未访问过的链接

  • a:visited - 用户已访问过的链接

  • a:hover - 当用户鼠标放在链接上时

  • a:active - 链接被点击的那一刻

  • a:hover 必须跟在 a:link 和 a:visited后面

  • a:active 必须跟在 a:hover后面

指定CSS表格边框,使用border属性。

table, th, td
{
border: 1px solid black;
}

text-align属性设置水平对齐方式,像左,右,或中心:

td
{
text-align:right;
}

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:

td
{
padding:15px;
}

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。


  • Margin - 清除边框区域。Margin没有背景颜色,它是完全透明

  • Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

  • Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响

  • Content - 盒子的内容,显示文本和图像

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

————————————————————————————————————

---border-style属性用来定义边框的样式

<style>

p.none {border-style:none;}

p.dotted {border-style:dotted;}

p.dashed {border-style:dashed;}

p.solid {border-style:solid;}

p.double {border-style:double;}

p.groove {border-style:groove;}

p.ridge {border-style:ridge;}

p.inset {border-style:inset;}

p.outset {border-style:outset;}

p.hidden {border-style:hidden;}

</style>

————————————————————————————————

通过 border-width 属性为边框指定宽度

border-style:solid;
border-width:5px;

border-color属性用于设置边框的颜色。可以设置的颜色:

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

border-style:solid;
border-color:#98bf21;

------------------

-dotted :有点的


------------------

border-style属性可以有1-4个值:

  • border-style:dotted solid double dashed;

    • 上边框是 dotted

    • 右边框是 solid

    • 底边框是 double

    • 左边框是 dashed

  • border-style:dotted solid double;

    • 上边框是 dotted

    • 右边框是 solid

    • 底边框是 double

  • border-style:dotted solid;

    • 上、底边框是 dotted

    • 右、左边框是 solid

  • border-style:dotted;

    • 四面边框是 dotted

不仅可以为div设置边框,也可以为元素设置边框

    border:5px solid red;

}

设置边框介绍 http://www.w3cschool.cc/css/css-border.html  

——————————————————————————————

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

——————————————————————————————————————

margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的

margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。

auto     设置浏览器边距。这样做的结果会依赖于浏览器

length  定义一个固定的margin(使用像素,pt,em等)

%         定义一个使用百分比的边距 

 Margin可以使用负值,重叠的内容。

bottom     Margin 底部


margin属性可以有一到四个值。/p>

  • margin:25px 50px 75px 100px;

    • 上边距为25px

    • 右边距为50px

    • 下边距为75px

    • 左边距为100px

  • margin:25px 50px 75px;

    • 上边距为25px

    • 左右边距为50px

    • 下边距为75px

  • margin:25px 50px;

    • 上下边距为25px

    • 左右边距为50px

  • margin:25px;

    • 所有的4个边距都是25px

当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。

length    定义一个固定的填充

%    使用百分比定义一个填充

Padding属性,可以有一到四个值。

  • 上填充为25px

  • 右填充为50px

  • 下填充为75px

  • 左填充为100px

  padding:25px 50px 75px;

  • 上填充为25px

  • 左右填充为50px

  • 下填充为75px

  padding:25px 50px;

  • 上下填充为25px

  • 左右填充为50px

  padding:25px;

  • 所有的填充都是25px

——————————————————————————————————

分组选择器  每个选择器用逗号分隔.

h1,h2,p{
color:green;
}

CSS 尺寸    http://www.w3cschool.cc/css/css-dimension.html

隐藏元素 - display:none或visibility:hidden

visibility:hidden可以让您隐藏某个元素,但它仍然需要像以前一样的空间。该元素将被隐藏,但仍然会影响布局。

display:没有隐藏的元素,它不会占用任何空间。元素将被隐藏,但页面会显示:


块元素是一个元素,占用了全部宽度,在前后都是换行符。

  • <h1>

  • <p>

  • <div>

内联元素只需要必要的宽度,不强制换行。

  • <span>

  • <a>

可以改变一个元素的显示 把内联元素变成块元素

Positioning(定位)

  • static 静态定位的元素不会受到top, bottom, left, right影响。

  • fixed 元素的位置相对于浏览器窗口是固定位置,即使窗口滚动他也不会移动 ( Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.)Fixed定     位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

  • relativ  相对定位元素的定位是相对其正常位置。

  • absolute 绝对定位的元素的位置相对于最近的已定位父元素。如果元素没有已定位的父元素,那么它的位置相对于<html>:

    • Absolutely定位使元素的位置与文档流无关,因此不占据空间。

    • Absolutely定位的元素和其他元素重叠。


overflow:scroll;  div 滚动条

CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动。

Float(浮动),往往是用于图像,但它在布局时一样非常有用。

元素的水平方向浮动,那就意味着元素只能向左或者向右移动/浮动

一个浮动元素会尽量向左或右。通常,这意味着尽所有的可能在所有包含元素的左侧或右侧的。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动,下面的文本流将环绕在它左边:

http://www.w3cschool.cc/css/css-float.html

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用clear属性

clear属性指定其他元素双方都不能使用元素的浮动功能。

http://www.w3cschool.cc/try/try.php?filename=trycss_float6

使用float创建一个网页页眉、页脚、左边的内容和主要内容。

_____________________________________________________________________________

margin-left:auto;
margin-right:auto;

在IE8中使用margin:auto属性无法正常工作,除非声明 !DOCTYPE
margin属性可任意拆分为左,右页边距设置自动指定,结果都是出现居中元素 

使用position 属性设置元素绝对对齐

注意:绝对定位与文档流无关,所以它们可以覆盖页面上的其它元素。

使用float属性设置元素的左右对齐


转载于:https://my.oschina.net/demoadmin/blog/364759

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值