Css基础知识

来源：互联网发布：央视网络电视打不开编辑：程序博客网时间：2024/06/05 01:16

1.CSS是(Cascading Style Sheets)层叠样式表或者级联样式表的缩写。格式为：h1 {color:red;font-size:14px}，选择器，声明。

2.CSS语法

一个CSS样式表代码由一个或多个CSS规则组成；
CSS样式规则由选择器和格式声明语句组成；
选择器通常是您需要改变样式的 HTML 元素；
格式声明语句放在{ }内；
每一条格式声明语句由“属性名:属性值”对组成，属性名和属性值间以冒号隔开，每条声明语句以分号“;”结束。
CSS对大小写不敏感。

3.属性

在格式声明语句中，属性名称与属性值之间以冒号“：”隔开，属性值不需要使用引号括起来，除非属性值是由多个单词组成。
有的属性可以指定多个属性值，多个属性值间以“,”隔开。
当定义多个值时，浏览器按照从前向后顺序选择属性值。如果第1个值有效，则尝试使用，如果第1个无效，则使用第2个，依次类推。

4.CSS选择器分类——基本选择器

1.通用选择器：*{margin:0px;}。通用选择器将匹配任何元素，不建议使用，IE6不支持通配符，大网站会增加客户端的负担，统一修改需要花费大量时间。
2.标签选择器：匹配所有HTML标签元素，p{font-size:14px;}。
3.类选择器：类选择器以“.”来定义，匹配html中class属性。.box{width:80px;}。
4.Id选择器：以“#”来定义，匹配html中Id属性。#title{font-size:14px;}。

5.CSS选择器——组合选择器

6.CSS选择器——属性选择器

7.CSS选择器——伪类选择器

8.浮动和清除

CSS要点：字体文本、背景、盒子模型(尺寸、边框、内填充、外边距)、浮动和清除、定位

浮动的元素向左或向右浮动(漂浮)，浮动到包围元素的边上或者上一个浮动元素的边上。

浮动的元素将脱离普通文档流，层级要高于普通文档元素，并且在普通文档中不再占空间。

浮动元素一定是“块元素”，不管原来是什么元素(行内元素)。通过浮动“行内元素”可以转成“块元素”。

块元素：单独占一行，可以设置宽和高。
行内元素：多个行内元素排在同一行，width和height对行内元素来说不起作用。

清除：从清除元素开始(以下)的元素，将恢复默认排版。从视觉上可以让包围元素包住浮动元素。

一般是在父元素的最下面来一个清除操作。
有浮动，就必须有清除。先浮动，后清除。

9.display显示属性

display：显示属性，规则元素该如何显示。取值：none(隐藏)、block(块元素)、inline(行内元素)

10.overflow溢出属性

overflow：超出的内容如何显示，取值：visible(可见)、scroll(滚动条)、hidden(隐藏)、auto

11.定位属性position

static：不定位(默认)

fixed：固定定位，相对于浏览器窗口进行的定位。

relative：相对定位，相对于原来的自己进行的定位。

absolute：绝对定位，相对于祖先定位元素进行的定位。

12.定位坐标：定位属性和定位坐标配合使用

left：定位元素距离左边(浏览器窗口、原来的自己、祖先元素)的那个距离

top：定位元素距离上边的那个距离。

right：定位元素距离右边的那个距离。

bottom：定位元素距离下边的那个距离。

13.固定定位position:fixed

固定位定位：是相对于浏览器窗口来进行的定位。

浏览器窗口永远不变，大小固定。

固定定位元素，将脱离普通文档流，层级要高于普通元素，并且不再占空间。

固定定位元素，在没有指定定位坐标之前，该元素的位置原地不动。

.qq{width:100px;height:200px;background-color:#FFCC00;position:fixed; /*固定定位*/right:50px; /*距离浏览器窗口右边的距离*/top:250px;  /*距离浏览器窗口上边的距离*/}

14.相对定位：position:relative

相对定位：是相对于原来的自己进行的定位。

相对定位元素将脱离普通文档流，层级高于普通元素，但依然占空间。

相对定位元素，在没有设置定位坐标之前，该元素原地不动。

定位坐标的值：往内走时，坐标值为正；往外走时，坐标值为负。

15.绝对定位：position:absolute

绝对定位：是相对于祖先定位元素(相对定位或绝对定位)，来进行的定位。一直往上找定位元素，如果没有找到，则会相对于网页(<body>)来定位。

绝对定位元素将脱离普通文档流，层级要高于普通元素，并且不再占空间。

绝对定位元素，在没有设置定位坐标之前，该元素原地不动。

绝对定位一般要和相对定位配合使用，例如京东的限时抢：每个商品是一张图片，图片放在li中，以float显示，如果要添加一张限时抢的图片在它的右上角，那么这张抢的图片必须使用绝对定位（相对于祖先中有定位的元素来定位），那么它的祖先里要保留原来的定位而且有个定位格式，这时就要使用relative，相对自己定位，而且占空间。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body,ul,li,p,img{margin:0px;padding:0px;}ul,li{list-style:none;}body{font-size:12px;color:#444;background-color:#ccc;}.shopping{width:780px;margin:20px auto;padding:0px 10px;border:1px solid #006600;background-color:#fff;}.shopping .title{height:47px;line-height:47px;color:#FF6600;font-size:24px;font-family:微软雅黑;border-bottom:2px solid #FF9900;}.shopping .content{padding:10px 0px;}.shopping .content li{float:left;padding:10px 20px;<span style="color:#ff0000;">position:relative;</span>}.shopping .content > img{width:150px;height:150px;}.shopping .content p{line-height:21px;}.shopping .content .span1{color:#FF6600;}.shopping .content .span2{font-weight:bold;color:#990000;}.shopping .content .span3{color:#CCCCCC;text-decoration:line-through;padding-left:20px;}.shopping .content li div{width:54px;height:54px;<span style="color:#ff0000;">position:absolute;top:-8px;right:-8px;</span>}</style></head><body><div class="shopping"><div class="title">今日闪价</div><div class="content"><ul><li><img src="images/01.jpg" /><p>[特价款]雷朋板材光学镜架<br /><span class="span1">年终盛典 满128减30元</span><br /><span class="span2">¥476.00</span> <span class="span3">¥1360</span></p><div><img src="images/xsq.png" /></div></li><li><img src="images/02.jpg" /><p>[特价款]雷朋板材光学镜架<br /><span class="span1">年终盛典 满128减30元</span><br /><span class="span2">¥476.00</span> <span class="span3">¥1360</span></p><div><img src="images/xsq.png" /></div></li><li><img src="images/03.jpg" /><p>[特价款]雷朋板材光学镜架<br /><span class="span1">年终盛典 满128减30元</span><br /><span class="span2">¥476.00</span> <span class="span3">¥1360</span></p><div><img src="images/xsq.png" /></div></li><li><img src="images/04.jpg" /><p>[特价款]雷朋板材光学镜架<br /><span class="span1">年终盛典 满128减30元</span><br /><span class="span2">¥476.00</span> <span class="span3">¥1360</span></p><div><img src="images/xsq.png" /></div></li><li><img src="images/05.jpg" /><p>[特价款]雷朋板材光学镜架<br /><span class="span1">年终盛典 满128减30元</span><br /><span class="span2">¥476.00</span> <span class="span3">¥1360</span></p><div><img src="images/xsq.png" /></div></li><li><img src="images/06.jpg" /><p>[特价款]雷朋板材光学镜架<br /><span class="span1">年终盛典 满128减30元</span><br /><span class="span2">¥476.00</span> <span class="span3">¥1360</span></p><div><img src="images/xsq.png" /></div></li><li><img src="images/07.jpg" /><p>[特价款]雷朋板材光学镜架<br /><span class="span1">年终盛典 满128减30元</span><br /><span class="span2">¥476.00</span> <span class="span3">¥1360</span></p><div><img src="images/xsq.png" /></div></li><li><img src="images/08.jpg" /><p>[特价款]雷朋板材光学镜架<br /><span class="span1">年终盛典 满128减30元</span><br /><span class="span2">¥476.00</span> <span class="span3">¥1360</span></p><div><img src="images/xsq.png" /></div></li></ul><div style="clear:both;"></div></div></div></body></html>

0 0