基础知识:
- css
样式表的定义
- css
:(Cascading Style Sheets)层叠样式表;
- css
内的注释:/
- css
注释内容
- *
/
- *
样式表的语法
- css
,
- aqua
,
- black
,
- blue
,
- fuchsia
,
- gray
,
- green
,
- lime
,
- maroon
,
- navy
,
- olive
- orange,
,
- purple
,
- red
,
- silver
,
- teal
, and
- white
- yellow
或者
- #FF0000
- #F00
- rgb(255,255,0)
, 色调 0 代表红色,
- hsl(120,100%,100%)
代表绿色,
- 120
代表
- 240
函数表示
- rgba(r,g,b,a)
表示的是改颜色的透明度,取值范围是
- a
,其中
- 0~1
代表完全透明
- 0
- <div style="position:absolute;top:0px">
- <div style="background-color:gray;">
- background-color:gray
- </div>
- <div style="background-color:#F00;">
- background-color:#F00
- </div>
- <div style="background-color:#ffff00;">
- background-color:#ffff00
- </div>
- <div style="background-color:rgb(255,0,255);">
- background-color:rgb(255,0,255)
- </div>
- <div style="background-color:hsl(120,80%,50%);">
- background-color:hsl(120,80%,50%)
- </div>
- <div style="background-color:rgba(255,0,255,0.5);">
- background-color:rgba(255,0,255,0.5)
- </div>
- <div style="background-color:hsla(120,80%,50%,0.5);">
- background-color:hsla(120,80%,50%,0.5)
- </div>
- </div>
内部样式表
文件,然后引用到我们的页面中。
- css
样式表式:
- Link
- <link rel="stylesheet" type="text/css" href="my.css"(href表示路径)>
式:
- Html
- <style type="text/css">@import url("css.css");></style>
样式的,哪种样式权值高就使用哪种样式
- css
<
- 浏览器缺省
<
- 外部样式表
<
- 内部样式表
- 内联样式
<
- 类选择器
<
- 类派生选择器
<
- ID选择器
- ID派生选择器
<
- 浏览器缺省
<
- 外部样式表
<
- 外部样式表类选择器
<
- 外部样式表类派生选择器
<
- 外部样式表ID选择器
<
- 外部样式表ID派生选择器
<
- 内部样式表
<
- 内部样式表类选择器
<
- 内部样式表类派生选择器
<
- 内部样式表ID选择器
<
- 内部样式表ID派生选择器
... 共
- 内联样式
个优先级
- 12
定义了多个并以空格分开,其优先级顺序为:
- Class
,后定义的优先(即近者优先),加上
- class
者最优先!
- !important
选择器:
- css
类选择器可以重复利用
- class
选择器唯一
- id
- {属性:值;属性:值;}
选择器
- ID
命名的元素 以
- id
开头
- #
- #p1{color:#0f0;}
选择器,选择
- class
命名的元素 以
- clas
开头
- .
- .first{color:#00f;}
代码写完后上线前要经过压缩处理
- css
版本(备份)
- css
- #main,.first,span,a,h1{color:red;}
- p
- span{color:red;}
- >
选择器子类选择器:只选择子元素(只选择儿子)(相当于包含元素)
- +
- p > span{color:red;}
- p + span{color:red;}
/ 键盘输入焦点 /
- input:focus{color:red;}
/
- p:first-child{color:red;}
/
- * 第一个p *
在元素之前添加内容。
- :before
在元素之后添加内容。
- :after
背景属性:
- background:red;
- backgronnd-color:red;
- background:url("images/1.jpg");
- backgronnd-image:url("images/1.jpg");
- background-repeat:no-repeat;
- background-repeat:repeat-x;
- background-repeat:repeat-y;
来实现
- background-position
的取值可为英文单词或者数值和百分值。
- background-position
的英文单词取值
- background-positon
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- ottom right
的数值取值
- background-positon
- background-position:x y;
的百分值取值
- positon
- background-position:x% y%;
来设置
- background-size
的取值可为数值和百分值。
- background-size
的数值取值
- background-size
- background-size:x y;
的数值取值
- background-size
- background-size:x% y%;
设置
- background-attachment
固定,不随内容的滚动而滚动
- background-attachment:fixed;
滚动,随内容的滚动而滚动
- background-attachment:scroll;
文字文本属性:
- css
文字颜色
- color:red;
; 文字大小
- font-size:12px
文字粗细 (
- font-weight:"bold"
)
- bold/normal
文字字体
- font-family:"宋体"
小写字母以大写字母显示
- font-variant:small-caps
文本对齐 (
- text-align:center;
/
- right
/
- left
)
- center
行间距 (可通过它实现文本的垂直居中)
- line-height:10px;
首行缩进
- text-indent:20px;
- text-decoration:none;
/
- none
/
- underline
/
- overline
)
- line-through
: 字间距
- letter-spacing
、h
- width
宽高
- eight
- padding
边框线
- border
外边距
- margin
边框
- border
- border:1px solid #f00;
:
- border-width
- border-style:
点状虚线
- dotted
(虚线)
- dashed
(实线)
- solid
(双实线)
- double
(颜色)
- border-color
内边距
- padding
/
- 像素
等长度单位、百分比
- 厘米
上下左右
- padding:10px;
上下 左右
- padding:10px 10px;
上 左右 下
- padding:10px 10px 10px;
上 右 下 左(设置 4 个点 --> 顺时针方向)
- padding:10px 10px 10px 10px;
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
和
- width
减小
- height
相同
- padding
相同
- padding
补充盒子模型内容
标准盒子模型
中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是
- css
盒子模型和标准
- ie
盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型
- w3c
从上图可以看到标准
盒子模型的范围包括
- w3c
、
- margin
、
- border
、
- padding
,并且
- content
部分不包含其他部分
- content
盒子模型的范围也包括
- ie
、
- margin
、
- border
、
- padding
- content
盒子模型不同的是:
- w3c
盒子模型的
- ie
部分包含了
- content
和
- border
- padding
盒子模型
- IE
=
- width
+
- padding
+
- border
- 内容
+
- border
)
- padding
为 20px,
- margin
为 1px,
- border
为 10px,
- padding
的宽为 200px、高为 50px,假如用标准
- content
盒子模型解释,那么这个盒子需要占据的位置为:宽
- w3c
、高
- 20*2+1*2+10*2+200=262px
,盒子的实际大小为:宽
- 20*2+1*2*10*2+50=112px
、高
- 1*2+10*2+200=222px
;假如用 ie 盒子模型,那么这个盒子需要占据的位置为:宽
- 1*2+10*2+50=72px
、高
- 20*2+200=240px
,盒子的实际大小为:宽
- 20*2+50=70px
、高
- 200px
- 50px
盒子模型 "了。怎么样才算是选择了" 标准
- w3c
盒子模型 " 呢?很简单,就是在网页的顶部加上
- w3c
声明。
- doctype
声明,那么各个浏览器会根据自己的行为去理解网页,即
- doctype
浏览器会采用
- ie
盒子模型去解释你的盒子,而
- ie
会采用标准
- ff
盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。
- w3c
声明,那么所有浏览器都会采用标准
- doctype
盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。
- w3c
做的例子来证实一下
- jquery
- <html>
- <head>
- <title>
- 你用的盒子模型是?
- </title>
- <script language="javascript" src="jquery.min.js">
- </script>
- <script language="javascript">
- var sbox = $.boxmodel ? "标准w3c": "ie";
- document.write("您的页面目前支持:" + sbox + "盒子模型");
- </script>
- </head>
- <body>
- </body>
- </html>
上面的代码没有加上
声明,在
- doctype
浏览器中显示
- ie
盒子模型,在 ff 浏览器中显示 " 标准
- ie
盒子模型 "。
- w3c
- <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>
- 你用的盒子模型是标准w3c盒子模型
- </title>
- <script language="javascript" src="jquery.min.js">
- </script>
- <script language="javascript">
- var sbox = $.boxmodel ? "标准w3c": "ie";
- document.write("您的页面目前支持:" + sbox + "盒子模型");
- </script>
- </head>
- <body>
- </body>
- </html>
声明。在所有浏览器中都显示 " 标准
- doctype
盒子模型 "
- w3c
盒子模型
- w3c
; 不显示
- display:none
; 变成块级元素
- display:block
; 变成行级元素
- display:inline
; 以块级元素样式展示,以行级元素样式排列
- display:inline-block
; 溢出隐藏
- overflow:hidden
; 内容会被修剪,浏览器会显示滚动条
- overflow:scroll
; 如果内容被修剪,则产生滚动条
- overflow:auto
;
- white-space:nowrap
;
- word-wrap:break-word
静态定位(不对它的位置进行改变,在哪里就在那里)
- static
,
- top
- bottom,
或者
- left, right
声明)。
- z-index
固定定位(参照物 -- 浏览器窗口)--- 做 弹窗广告用到
- fixed
,
- "left"
,
- "top"
以及
- "right"
属性进行规定。
- "bottom"
(相对定位 )(参照物以他本身)
- relative
(绝对定位)(除了
- absolute
都可以,找到参照物 --> 与它最近的已经有定位的父元素进行定位)
- static
定位以外的第一个父元素进行定位。
- static
,
- left"
,
- "top"
以及
- "right"
属性进行规定
- "bottom"
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- z-index
、
- div
或
- h1
元素 即:显示为一块内容称之为 "块框" ;
- p
,
- span
,
- strong
等元素 即:内容显示在行中称 "行内框";
- a
; 让行内元素设置为块级元素,
- display:block
没有框
- display:none;
- .adv_relative { position: relative; left: 30px; top: 20px; }
- .adv_absolute { position: absolute; left: 30px; top: 20px; }
框架:
- frameset
、
- rows
属性
- cols
定义行表示框架有多少行(取值
- rows
/
- px
/
- %
)
- *
定义列表示框架有多少列(取值
- cols
/
- px
/
- %
)
- *
显示的网页的路径
- src
框架名
- name
边框线(取值 0 / 1)
- frameborder
> 属性
- noframes
- <frameset>
- <frame src="" />
- <frame src="" />
- <frame src="" />
- <noframes>
- <body>
- 内容
- </body>
- </noframes>
- </frameset>
内联框架
- <iframe>
元素会创建包含另外一个文档的内联框架(即行内框架)
- iframe
一起使用
- body
宽(取值 px / %)
- width
高(取值 px / %)
- height
框架名
- name
边框线(取值 0 / 1)
- frameborder
显示的网页的路径
- src
透明属性
- opacity
- opacity
,使用
- IE6/7/
) 值为
- filter:alpha(opacity:值;
- 0-100
,
- Webkit
,
- Opera
,
- Firefox
,使用
- IE9+
: 值; 值为
- opacity
- 0-1
: 值; 值为
- -moz-opacity
- 0-1
- {
- opacity: 0.5;
- filter: alpha(opacity:50);
- /*0-100*/
- - moz - opacity: 0.5;
- /*取值0-1*/
- -->针对早起版本的火狐兼容问题的解决
- }
内容区
- /* Footer */
- /* End Footer */
id 的命名:
- container
- header
/
- content
- container
- main
- footer
- nav
- sidebar
- column
- wrapper
- left
- right
- center
导航
- nav
- mainbav
- subnav
- topnav
- sidebar
- leftsidebar
- rightsidebar
- menu
- submenu
- title
- summary
- width
- height
- margin
- padding
- border
- background
- color
- font
- text-decoration
- text-align
- vertical-align
- white-space
- other text
- content
- a {
- display: block;
- width: 200px;
- height: 65px;
- line - height: 65px;
- /*定义状态*/
- text - indent: -2015px;
- /*隐藏文字*/
- background - image: url(button.png);
- /*定义背景图片*/
- background - position: 0 0;
- /*定义链接的普通状态,此时图像显示的是顶上的部分*/
- }
- a: hover {
- background - position: 0 - 66px;
- /*定义链接的滑过状态,此时显示的为中间部分,向下取负值*/
- }
- a: active {
- background - position: 0 - 132px;
- /*定 义链接的普通状态,此时显示的是底部的部分,向下取负值*/
- }
更多的
雪碧,图片更复杂,背景定位更精确。可能会用到大量的数值
- CSS
; 来达到更精确的定位
- background:url(nav.png) -180px 24pxno-repeat
技术的其中一个好处是图片的加载时间 (在有许多
- sprite
时,单张图片的加载时间)。由所需图片拼成的一张
- sprite
图片的尺寸会明显小于所有图片拼合前的大小。单张的
- GIF
只有相关的一个色表,而单独分割的每一张
- GIF
都有自己的一个色表,这就增加了总体的大小。因此,单独的一张
- GIF
或者
- JPEG
- PNG
在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
- sprite
- bug
不会主动预加载鼠标滑过即
- IE6
中的背景图片,所以,如果使用多张图片,鼠标滑过会出现闪白的现象。使用
- a:hover
雪碧,由于一张图片即可,所以不会出现这种现象。
- CSS
雪碧的最大问题是内存使用
- CSS
的编写变得困难
- CSS
雪碧调用的图片不能被打印
- CSS
影响可访问性
- Sprites
来源: http://www.cnblogs.com/Abner5/p/5877068.html