为文档添加样式的三种方法
行内样式
行内样式是写在HTML
标签的style
属性里的,比如:
<p style="font-size: 12px;font-weight: 200;color: #333333">Hello Everyone!</p>
行内样式会覆盖嵌入样式和链接样式。
嵌入样式
嵌入的css
样式是放在HTML
文档的head
元素中的,这点想必大家都知道,这里就不赘述了。
链接样式
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
链接样式的作用范围可以是整个网站。只要使用<link>标签把样式表链接到每个页面,相应的页面就可以使用其中的样式,除了link
方法外,还可以使用@import
指令
@import url(css/style.css);
@import
指令必须出现在样式表中其他样式之前,否则该链接的文件不会被加载
不要乱用类
不要像使用ID
一样,为每个类都指定一个不同的类名,然后再为每个类编写规则。如果你有这种随意使用类的习惯的话,那么,你还不了解继承和上下文选择符的作用。继承和上下文选择符(后代选择器)能让不同的标签共享样式,从而降低你需要编写和维护的css
量。
使用继承方式降低你的css
代码量:
所有元素可继承:visibility和cursor
内联元素和块元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承:text-indent和text-align
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
表格元素可继承:border-collapse
不可继承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
盒子边框
每一个元素都会在页面上生成一个盒子,因此,HTML
页面实际上就上由一堆盒子组成的。默认情况下,每个盒子的边框是不可见的,背景也是透明的。
边框(border
)有如下3个相关属性:
1. 宽度(border-width):可以使用`thin、medium`和`thick`等文本值,也可以使用除百分比和负值之外的任何绝对值
2. 样式(border-style):有none、hidden、dotted、dashed、double、groove、ridge、inset和outset等
3. 颜色(border-color):可以使用任意颜色值,包括RGB、HSL、十六进制颜色值和颜色关键字
叠加外边距
垂直方向上的外边距会叠加,假设有3个段落,前后相接,而且都应用以下规则:
<style type="text/css">
p{
color: black;
background: #ccc;
margin-top: 50px;
margin-bottom: 30px;
height: 50px;
border: 1px solid red;
}
</style>
第一段的下外边距与第二段的上外边距相邻,你可能认为它们之间的外边距是80px,但实际的间距却是50px。像这样的上下外边距相遇时,它们就会相互重叠,直至一个外边距碰到另一个元素的边框。因此,在这里,第二段较宽的上外边距就会碰到第一段的边框。也就是说,较宽的外边距决定两个元素最终离多远。这个过程就是外边距叠加
。
盒子有多大
设定width属性的盒子
盒模型结论一:
为设定了宽度的盒子添加边框、内间距和外边距,会导致盒子扩展得更宽。实际上,盒子的width属性设定的只是内容区的宽度,而非盒子要占据的水平宽度
没有设定width属性的盒子
从现在开始,“元素”和“盒子”从现在起代表了同一个意思。如果我们不设置块级元素的width
属性,那么这个属性的默认值是auto
,结果会让元素的宽度扩展到与父元素等宽。
盒模型结论二:
没有设定width属性的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距,会导致内容宽度减少,减少的量 等于 水平边框、内边框和外边距的和
看实例的话大家也比较烦,就拿着这个结论自己去验证下吧。
布局的基本概念
多栏布局有三种基本的实现方案:固定宽度、流动、弹性。
- 固定宽度布局的大小不会随着用户调整浏览器窗口大小而变化,一般是900到1350px像素宽。其中960像素最常见,因为这个宽度适合所有现代显示器,而且能被16,12,10,8,6,5,4和3整除,容易计算等宽分栏。
- 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能更好地适应大屏幕,但同时也意味着放弃会页面某些方面的控制,比如随着页面宽度变化,文本行的长度和页面元素之间的位置关系都可能变化。
- 弹性布局是在浏览器窗口变宽时,不仅布局变宽,而且所有内容元素的大小也会变化,不过这种布局太过复杂,不好实现。
行内(inline)元素的一些属性
并不是所有的属性对行内元素都能够生效
行内元素不会应用width属性,其长度是由内容撑开的
行内元素不会应用height属性,其高度也是由内容撑开的,但是高度可以通过line-height调节
行内元素的padding属性只用padding-left和padding-right生效,padding-top和padding-bottom会改变元素范围,但不会对其它元素造成影响
行内元素的margin属性只有margin-left和margin-right有效,margin-top和margin-bottom无效
行内元素的overflow属性无效
行内元素的vertical-align属性无效(height属性无效)
使用CSS sprites
CSS sprites
是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image、background-position
显示图片特定部分达到和分散的一张张小图片一样的效果。
使用CSS sprites
,会将所有的小图片整合到一张图片中,网页加载只需要对一张图片进行请求,CSS
再通过坐标的形式定位每一个小图片显示出来。这样做的好处是,大大减少http
请求数,提高网页加载速度。
css sprites工具推荐:http://cn.spritegen.website-p...
隐藏文本
隐藏网页元素的方法有很多,比如设置display:none
,或是使用全透明(opacity
)。在设置文本的时候,有时并不希望文本丢失,而通常是把文字转移到屏幕外面,浏览器是可以检测到的。
有如下两种隐藏文本的方式:
1. 使用text-indent隐藏:图片替换文本、搜索引擎优化
2. 使用position进行定位隐藏:利于屏幕讲述工具的阅读
使用text-indent
在h1
上设置logo
为背景并设置居中来做SEO
:
h1{
text-indent: -9999px;/*缩进*/
margin: 0 auto;width: 100px;height: 100px;/*居中*/
background: url("img/sf.jpg") no-repeat;
}
使用定位
p{
position: absolute;
top: -9999px;
left: -9999px;
}
rgba和opacity
rgba()
和opacity
都能实现透明效果,但最大的不同是opacity
作用于元素,以及元素内的所有内容的透明度,
而rgba()
只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
ou和ul的列表缩进
IE使用margin-left
来缩进列表,而Safari
和Firefox使用padding-left
。
ol, ul { padding-left:40px; }
而IE的默认样式是:
ol, ul { margin-left:30px; }
去除li的左边距,比如:
ol, ul { padding-left:0px; }
或者也可以只针对IE
进行修复:
ol, ul { _padding-left:0; }
css选择符思维导图
css工具推荐
不写具体介绍啦 截个图给你们吧 说再多都比不上一张图呢
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。