一 选择符
1
通配:*{}
所有元素
类:p{}
如 p 标签等相应元素
ID:#id{}
使用相应 id 属性的元素样式
类:.类名{} 使用相应 class 属性的元素样式
包含:div p{} 被某些元素包含的子元素的样式
选择符分组: #content2 , .STYLE{} 一次定义几个选择符的样式
2
行内样式表:<p style=””>(CSS 里间隔是冒号、分号;HTML 里是等号、空格)
内部样式表:<style type=”text/css”> </style>
外部样式表:<link href=”skin.css” rel=”stylesheet” type=”text/css”>
二 CSS 字体属性
font: font-family font-size font-style font-weight font-variant(转换大小写)
三 CSS 文本属性
color text-decoration text-align vertical-align direction text-indent(文本缩进属性) line-height white-space(文本空白显示效果 nowrap 强制同行)
四 CSS 背景属性
background: background-color background-img(url()) background-repeat background-attachment(滚动方式) background-position(背景图片位置属性,两个取值——前为水平方向、后为垂直方向;
注意:先定义一个相框,原点在相框,移动的是图片。
实例如下:
.pic{width:28px;height:28px;background:url(../images/icon.gif) no-repeat;} .pic2{background-position:-40px 0px;} .pic3{background-position:-80px 0px;} .pic4{background-position:-120px 0px;} -------样式与内容的分割线----------- <li class="pic pic1"></li> (类名写前面,表示后面的类继承了前面类的属性, 省重写了) <li class="txt"><a href="buy.htm" target="_parent">购物车</a></li> <li class="pic pic2"></li> <li class="txt"><a href="help.htm" target="_parent">帮助中心</a></li> <li class="pic pic3"></li> <li class="txt"><a href="JavaScript:void(0);" onclick="addFav();"> 加 入 收 藏 </a></li> <li class="pic pic4"></li> )
五 CSS 边框属性
border: border-style border-width border-color
六 CSS 边距属性
padding 内边距:内容与边框之间的宽度
margin 外边距:元素周围的边界宽度
七 CSS 链接属性
例:<a class=”a1” href=””></a>
.a1:link{} (这是伪类)
未访问链接:link
已访问链接:visited
悬停链接:hover
激活链接:active
八 CSS 布局属性
定位属性 position
位置属性 top、right、bottom、left
层叠顺序属性 z-index 默认为 1,值越大越在顶
透明度属性 opacity 1 为饱和,值越小越透明
超出内容属性 overflow
显示属性 visibility
浮动属性 float(只有左、右;默认的文档流是向下排列,使用 float 可以让他们挨个往左上方排列;比如布局时前面两个是文档流排列,第三个写了 float,那么从第四个开始,才是横向排列的,所以 float 是给它后面的元素看的)
清除浮动属性 clear(不想继续往左上排了,就 clear 左)
九 DIV+CSS 布局
宗旨:内容与样式分离
优点:灵活
核心:用 DIV 时,把所有元素都当成一个方块,给它精确的宽高,再 float 它!
十 课堂笔记
1 css 通配符 "*" 可以消除浏览器的默认属性,比如:
*{margin:0;padding:0;}
推荐这样 html,body,div,span,applet,object,iframe,h1,h2,p,a{margin:0;padding:0;}
而不是 *{margin:0;padding:0;}
因为 css 通配符 “*”会将网站内所有元素的默认值重设,这在大型网站会加重客户端的负担,浏览器运行速度变慢。但如果开发的是小型站点或企业网站,页面元素不是很多,使用 CSS 通配符造成的性能影响可以忽略。
2 display :inline块拥有行属性;block行拥有块属性。
3
弹幕般滚动<marquee behavior=””direction=””scrollamout=”数值越大滚得越快”onmouseover=””onmouseout=””> 此为块级元素,用时要加宽高。
4
盒子属性:margin padding border
CSS难点总结
n 盒子模型
ü margin(外边距)
ü padding(内边距)
n 居中
ü 块级元素的位置居中:Margin作为盒子间的距离,在布局中,扮演着较为重要的角色。典型的应用为布局块级元素的水平居中,如:“margin:0 auto;”
ü 文字内容的水平居中:文字内容水平居中:例如段落<p>内的文字对齐等设置,则设置块级元素的 “text-align:center”,实现文字水平居中;
ü 垂直居中:常见的是单行文字垂直居中问题,可以设置文字所在的行的高度 height 与文字行高属性 line-height 一致,使用“vertical-align:middle;”实现垂直居中。
n 布局属性
ü position(定位)
Ø static
默认属性,按照常规文档流(从上到下,从左到右)进行定位,不能使用 top、left 等类似其他属性定位,如需要使用以上属性,必须使用除了static以外的三种定位方式。
Ø absolute(绝对定位)
指定某元素是相对于它包含的元素进行定位,绝对定位的元素是独立定位的,脱离了静态定位元素中文档流的一部分,它的定位要么是相对最近的定位祖先元素,要么是相对于文档本身。
Ø fixed(固定定位)
相对于浏览器窗口进行定位
Ø relative(相对定位)
当 position 属性设置为 relative,元素按照常规文档流进行布局,它的定位相对于它文档流中的位置进行调整。系统保留着元素在常规文档流中的空间,不会因为要填充空间而将其各边合拢,也不会将元素从新的位置“推开”。
Ø z-index
设置元素的堆叠顺序,拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素前面,z-index可以拥有负数值,且仅能在定位元素上奏效(例如 position:absolute;)
Ø display
规定元素应该生成的框的类型,常用属性值有 none,block,inline等
Ø none
此元素不被显示;
Ø block
让元素按块级元素显示,前后带换行符,自己占一行,可以用在行级元素上使其拥有块级元素的特点;
Ø inline
让元素按照行级元素(内联元素)显示,一个挨一个,可以用在块级元素上,使其拥有行级元素的特点;
Ø overflow
规定当内容溢出元素框时发生的事情;
默认值:visible(内容不会被修剪,如果超出会呈现在元素框之外),还有 hidden(内容会被修剪,并且其余内容是不可见的),scroll(超出内容会被修剪,但是可以通过滚动条来查看超出的部分)
Ø visibility
设置元素是否可见,visible为可见;hidden为不可见,不同于“display:none;”的是“visibility:hidden;”的元素虽然不可见但是也会占据页面上的空间,前者则不会。(通俗讲,用 display会被挤。所以 display常用于多级菜单显示隐藏)
Ø opacity(透明度)
CSS3的属性,可以代替了之前 CSS中的滤镜属性,可以使用 value直接表示元素的透明度,0.0为完全透明到 1.0为完全不透明,例如:opacity:0.5;