CSS基础知识
2015-11-30 09:07
836 查看
一、CSS 概述
[code]*.CSS : Cascading Style Sheet 层叠样式表 *.CSS 作用就是给HTML页面标签添加各种样式 *.为什么用CSS? HTML的缺陷: 1. 不能够适应多种设备 2. 要求浏览器必须智能化足够庞大 3. 数据和显示没有分开 4. 功能不够强大
CSS 优点:
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
二、CSS语法
[code]p{color:red;} 选择器{属性名:属性值 ;} 选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号 属性名和冒号之间最好不要有空格。
三、CSS和HTML的结合方式
[code]CSS代码理论上位置是任意的,但通常写在style标签里 CSS和HTML的结合方式有3种: a. 行级样式表:采用style属性,范围只针对此标签适用 <div style = "border:1px solid red ;">大家好</div> b. 内嵌样式表:采用<style>标签完成。范围针对此页面 c. 外部样式表: 采用建立样式表文件。针对多个页面. 引入样式表文件的方式: 1):采用<link>标签 eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link> 2):采用import,必须写在<style>标签中,并且必须是第一句 eg: @import url(a.css) ; 两种引入方式的区别: 外部样式表中不能写<link>标签,但是可以写import语句
四、CSS选择器
[code]选择器分为两大类: 1.基本选择器 a.标签选择器:指的就是选择器的名字代表html页面上的标签 p{ color:red ; border:1px dashed green; } b.类选择器:规定用圆点.来定义 优点:灵活 eg: .one{background-color:#ff0099; } c. ID选择器:规定用#来定义 eg: #one{cursor:hand; } 区别:标签选择器针对的是页面上的一类标签. 类选择器可以供多种标签使用. ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。 d:通用选择器: 用*定义,代表页面上的所有标签。 *{ font-size:30px; margin-left:0px; margin-top:0px; }
2.扩展选择器
[code] a. 组合选择器:采用逗号隔开 eg: p,h1,h2,.one,#two{color:red ; } b. 关联选择器(后代选择器): 采用空格隔开 eg: h4 span i{color:red ; } 表示h4标签中的span标签中的i标签的样式 h4和span和i标签不一定是紧挨着的。 c. 伪类选择器 1) :静态伪类:规定是用:来定义.只有两个.只能用于超链接. :link表示超链接点击之前的颜色 :visited表示链接点击之后的颜色 eg:a:link{color:red ;} a:visited{color:yellow;} 注意: a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚) a{}定义的样式针对所有的超链接(包括锚) 2) :动态伪类 : 针对所有的标签都适用 :hover : 是移动到某个标签上的时候 :focus : 是某个标签获得焦点的时候 :active : 点击某个标签没有放松鼠标时 eg: label:hover{color:#00ff00; } input:focus{ background-color:#ff9999; border:1px solid red; } a:active{ color:blue; }
五、CSS各种选择器的冲突
[code] CSS样式的冲突: 1.ID选择器 > 类选择器 > 标签选择器 2.行级样式表 > 内嵌样式表 > 外部样式表 外部样式表的ID选择器 > 内嵌样式表的标签选择器 原则: 就近原则
六、CSS的各种属性
CSS中尺度单位的介绍CSS的单位:
a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅,pc是派卡
b. 相对单位:px, em(印刷单位相当于12个点), %(相对周围的文字)
[code] *字体设置 p{ font-size:50px; /*字体大小*/ font-style:italic ; /*斜体*/ font-weight:bold; /*粗体*/ font-family:幼圆; /*字体类型*/ font-variant:small-caps; /*小写变大写*/ } *文本设置 p{ letter-spacing:0.5cm ; /*字母间距*/ word-spacing:1cm; /*单词间距*/ text-align:center; /*在所包含容器的中间*/ text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/ text-transform:lowercase; /*单词字体大小写*/ color:red ; } *背景设置 body{ background-color:#ff99ff ; /*背景颜色*/ background-image:url(images/2.gif) ; /*背景图片*/ background-repeat: no-repeat; /*no-repeat不要平铺,repeat-x,横向平铺,repeat-y 纵向平铺*/ background-position:center right; /*背景位置*/ background-attachment: scroll ; /*背景的移动 ,fixed跟着滚动条一起移动,scroll 不动*/ } *列表设置 ul li{ list-style:none; /*列表前样式*/ list-style-image:url(images/2.gif) ; /*列表项前图片*/ margin-left:80px; } *盒子模型(border margin padding) padding:是内容到边的距离 border: 是边的粗细 margin:是控件到控件的距离 *定位设置(position,float,clear,z-index) #d{ position: absolute; /* 1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流 2.相对定位: 相对的是自己在顺序流中原来的位置 */ left:100px; /*横坐标*/ top:100px; /*纵坐标*/ border:1px solid red ; width:100px; height:100px; background-color:#ff66ff; } #d1{ position: relative; /*相对位置*/ left:100px; top:100px; border:1px solid green ; width:100px; height:100px; background-color:#339900; } span{ position: relative; left:20px; top:20px; } z-index:值任意,值越大离我们越近 float : 浮动 overflow: 超出范围怎么办
鼠标样式设置(cursor)