码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习(一)

时间:2017-07-18 23:05:05      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:bsp   声明   方向   外边距   使用   nsf   背景图像   调整   family   

 

学习的资源 http://www.runoob.com/

 

概念

样式表的插入方法

(1)外部样式表(External style sheet)

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 

(2)内部样式表(Internal style sheet)

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

 

(3)内联样式(Inline style)

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

选择器的优先级

下列是一份优先级逐级增加的选择器列表:

  • 通用选择器(*)
  • 元素(类型)选择器
  • 类选择器
  • 属性选择器
  • 伪类
  • ID 选择器
  • 内联样式

CSS 背景属性

Property描述
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

 

文本

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

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

 

文本缩进

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

p {text-indent:50px;}

 

所有CSS文本属性。

属性描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写 
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

 

字体

用em来设置字体大小

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

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

 

所有CSS字体属性

Property描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

 

CSS学习(一)

标签:bsp   声明   方向   外边距   使用   nsf   背景图像   调整   family   

原文地址:http://www.cnblogs.com/arxive/p/7203114.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!