一、css-引用样式
标签上设置style属性:
1 2第一层3第二层4第三层5
引用样式的三种方式:
第一种:在直接定义与引用样式
1aa
第二种: 在头部加上下面代码(类似全局变量),然后在引用:
1
第三种:将需要引用的样式存放在其它文件(eg:commons.css文件)中
然后在head头部导入样式: , 再在body调用样式:
关于优先级,第一种最高(在body直接定义引用样式),推存使用第三种。如果在head头部定义并且在body引用了两种样式,如下:
1 2 3Title 4 12 13 1415 AA1617
如果样式不冲突,则样式cc和ccc都应用,如果样式有冲突,那是优先应用cc还是ccc样式??
当引用了两种有冲突样式,两种样式都是在head定义的,head头部中后一种定义的样式会把前一种覆盖,故上面代码引用的是ccc样式!!就算把第14行改为 运行界面: 选择器(即寻找标签): class选择器、标签选择器、ID选择器(这三种是重点,推荐使用class选择器) 1、class选择器(推荐)
2、标签选择器
标签选择器,设置div样式,则body里所有的div标签内的内容都会应用此内容 3、id选择器
把样式写到head里面,以#开头命名,调用对应样式在div里用id属性指定相应的id名。 4、层级选择器
只让span里面的div标签应用样式,可多层嵌,类似于路径 5、组合选择器
P
表示a标签或者p标签可以引用定义的样式。逗号表示 或 运行界面: 6、属性选择器
1、border 边框其他样式
运行界面: 2、float CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
里面的div的宽度是以上一层div的宽度的标准的。 运行界面: 如果在父标签加上background-color:blue;会发现结果与上图一样,并没有显示出蓝色。 可以加上 运行界面: 3、display 块级标签和行内标签相互转换 运行界面: 注:display:inline 转换为行内标签;display:block转换为块级标签;另还有display:none不显示 行内标签:无法设置高度,宽度,padding margin 注:display:inline-block 既有inline的属性(默认自己有多少占多少)又有block的属性(可以设置高度、宽度、padding、margin) 运行界面: 4、margin,padding margin 外边距 margin-top:上边距 padding:20px 上下左右边距都是20px 运行示意图: 5、position fixed固定到浏览器界面某个位置 返回顶部按钮:好多页面都有返回顶部的按钮,随着你页面的下拉,按钮永远在页面的右下角,下面就来实现: View Code 实现动态效果,点击返回顶部:
固定菜单栏:
运行界面: relative+absolute(相对与relative固定路径) 加了position:relative; 则子标签的位置是相对父标签来定位的;如果去掉positon:relative;则子标签的位置是相对整个界面的定位的; 运行界面: 6、多层模态 用了position样式实现三层页面: 当页面整个浮动在上面的时候,如果想让页面整体覆盖底层页面,要用到top,right,left,bottom属性,而非margin-top、margin-left.... opacity:设置透明度(0~1之间) z-index:设置层级(z-index越大,越放在顶层)
运行界面(top: 50%;left: 50%;margin-left:-250px;margin-top:-250 px是对最顶层的div进行居中处理;): 7、hover 可以看一下抽屉网的顶部条栏,当鼠标移动到选项栏时,背景颜色会出现变化;下面就来试试搞一下这个
其中.pg-header .menu:hover{background-color: #BF1919}指定当鼠标滑过引用.menu字段时,字段样式变成新定义的样式 运行界面: 8、background background-p_w_picpath 之前一直在用backgroud样式基本上都是设置背景颜色什么,其实background还可以设置背景为图片. 默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
运行示意图(实际图片只有3 X 789): background-repeat background-repeat有四个属性repeat(默认,重复占满)、no-repeat(不重复)、repeat-x(只横着重复放)、repeat-y(只竖着重复放) 默认情况下 background-p_w_picpath 属性会在页面的水平与垂直方向平铺。一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示: View Code 运行示意图: 如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些: View Code 运行示意图: background-position-x、background-position-y 为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。可以利用 background-position 属性改变图像在背景中的位置: background-position-x表示看背景图片的窗口水平方向向右移动,background-position-y表示看背景图片的窗口垂直向下移动 CSS 背景属性总结二、css-选择器
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
三、css-应用样式
1 2
1 2
1 2
1
1 2
块级标签:可以设置高度,宽度,padding margin1 2 行内3
padding 内边距
margin:10px 20px 10px 10px 分别指上右下左
padding:10px 20px 指上下与左右)
margin: 同上1
1 2 3 4 5
1 2 3 4 5
1
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 4
Property
描述
background
简写属性,作用是将背景属性设置在一个声明中。
background-p_w_upload
背景图像是否固定或者随着页面的其余部分滚动。
background-color
设置元素的背景颜色。
background-p_w_picpath
把图像设置为背景。
background-position
设置背景图像的起始位置。
background-repeat
设置背景图像是否及如何重复。