首页 > 代码库 > CSS学习（一）

CSS学习（一）

2024-10-30 05:04:39   206人阅读

 

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

 

概念

样式表的插入方法

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

<head><link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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学习（一）


联系
我们