码迷,mamicode.com
首页 > Web开发 > 详细

CSS层叠样式表篇

时间:2017-10-15 14:51:28      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:水平   height   垂直   优先级   :hover   weight   字符   实现   字体   

 1,css基本选择器:

在HTML文件中链接一个外部CSS文件时,需要的代码:<link href = "12-1.css" type="text/css" rel="styleshee"/>

(1)HTML基本选择器:设置页面中所有相同标记的统一格式。

(2)类选择器:对相同标记中某些个别标记做特殊效果,类名在HTML中可以重名。基本语法:.class{属性:属性值}

(3)ID选择器:在HTML页面中必须唯一。基本语法:#IDname{属性:属性值}

2.CSS复合选择器:

(1)属性选择器:对指定属性的HTML元素设置样式:[title ~=hello]{color:red;}

                                                                                    <head> <h2  title="hello world">Hello world</h2></head>

(2)交集选择器:标记选择器.类选择器/ID选择器。eg:h1.class{}

(3)并集选择器:所设置的样式对并集选择器中的各个选择器都有效。eg:h1,h2,class{ border-color: red;}

        通配符选择器:显示为一个星号(*),该选择器可以与任何元素匹配,就像是一个通配符。

(4)后代选择器:通过嵌套的方式对特殊位置的HTML标记进行声明。eg:div p{ border-color:red;}.......<body><div>后代选择器<p>效果</p></div></head>

(5)子代选择器:相对于后代选择器,缩小了范围。eg:h1>strong{ color:red;}.....<h1>this is<em>really<strong>very</strong></em></h1>不起作用,只有当strong为h1的直接元素时,选择器才起作用。

(6)相邻兄弟选择器:eg:h1+p{margin-top:50px;}会增加紧接在h1元素后出现的段落的上边距。

(7)伪类选择器:a:link 未访  a:visited  已访  a:hover  悬停   a:active  活动

3.CSS常用属性:

(1)字体属性:font-size:设置字体大小   font-family:设置字体类型     font-weight:(normal,lighter,bold,bolder)   font-style:(normal,italic,oblique)
(2)文本属性:text-indent:设置文字的首行缩进距离   line-height:定义行间距    letter-spacing:定义字符间距   text-decoration:(underline,overline,line-through,none)设置划线     text-align:(left,center,right,justify)设置内容对齐

(3)列表属性:

(4)颜色和背景属性:color,background-color,background-image,background-repeat(repeat-x,repeat-y,repeat,no-repeat)设置图像横纵向重复 background-position设置背景图像位置

(5)区块属性:width,height,float,clear(禁止浮动元素出现在所属对象旁边),padding,margin

(6)层属性:主要用于定位盒子。position,top,left,width,height,Z-index(决定先后层覆盖关系),clip,overflow

(7)鼠标属性:cursor:pointer设置鼠标为手形状

(8)滤镜属性

4.在HTML文档中应用CSS

(1)内联式:直接对HTML标记使用style属性,可修饰单独的标记符

(2)内嵌式:将CSS代码写在<head>标记之间,需用<style>标记进行声明。只能用于当前网页。

(3)链接式:实现CSS代码和HTML代码分离,可将一个CSS文件链接到不同的HTML网页中。<link href="14-1.css"  type="text/css"  rel="stylesheet">

(4)导入式:<style> <!--@import url(14-1.css)--></style>

5.css冲突问题

内联式>内嵌式>外部样式

在多个外部样式中,后出现的样式的优先级高于先出现的样式

在样式中,选择器的优先级:ID选择器>class样式>标记样式

6.盒子模型

(1)盒子border属性:border-color,border-width,border-style。对不同的边框设置不同的属性值,依次为上右下左,顺时针方向。

(2)盒子padding内边距:属性依次为上右下左,顺时针方向。

(3)盒子margin属性:外边距

7.盒子的浮动与定位

(1)标准流:块级元素和行内元素

(2)盒子的定位原则:1)行内元素之间的水平定位:两个行内元素之间的水平间距由左边元素的右外边距加右边元素的左外边距共同决定。

2)块级元素之间的垂直定位:两个块级元素之间的距离是两者中较大的。

3)嵌套盒子之间的定位

4)margin为负值时盒子之间的定位:使设为负值的块向反方向移动,甚至覆盖在另一个块上面。

8.盒子的浮动float:浮动的元素会尽量向上浮动,但不会浮到标准流中

9.盒子的定位:position属性定位:static(默认属性值,按照标准流进行布局),relative(使盒子相对于它在原本的标准位置偏移指定的距离),absolute(盒子位置以它的包含框为基准进行偏移),fixed(当拖动浏览器窗口的滚动条时,依然保持对象位置不变)

10.经典的div+CSS布局网页

 

CSS层叠样式表篇

标签:水平   height   垂直   优先级   :hover   weight   字符   实现   字体   

原文地址:http://www.cnblogs.com/yanmengdi/p/7668602.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!