来源:自学PHP网 时间:2015-04-14 14:50 作者: 阅读:次
[导读] 一、概念:级联样式表(Cascading Style Sheet)简称CSS,通常又称为风格样式表(Style Sheet),它是用来进行网页风格设计的二、常见用法1. 可给页面中所有同一标签元素进行加样式如:di...
一、概念:
级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的 二、常见用法 1. 可给页面中所有同一标签元素进行加样式如: <div>div区域1</div> <div>div区域1</div> 姓名:<input type="text" />成绩:<input type="text" /> 可在此页面的 head标签中,加入标签 <style type="text/css"> div{ border:#F90 dashed 2px; height:200px; width:400px; } input { border:none; border-bottom:#000 1px solid; } .haha{ /* 样式名前加了一个点.号, 代表这个样式是给网页中特定的元素 元素是定义是 class属性, class="haha" */ border:none; } #userBirth{ /* 样式名前加了一个井#号,代表这个样式是给页面中特定的元素 元素是定义了id属性,且id="userBirth" 一样这种用法比较少,因id给js用的多。没必要一个id就是一个样式的,很多多情况下用class,多个标签一起用一个样式, 扩展性高。修改方便。 */ border:none; border-bottom:#000 1px solid; } </style> 二、css文件可以,单独写到一个普通文本文件保证起来,用到时可在<head>标签中加载出来如: <head> <style type="text/css"> <link rel="stylesheet" href="1.css" type="text/css" /> /* 还可以通过link标签,直接将外部的css导入进来 */ @import import url(2.css); /* 将外边的2.css文本导入进来 */ </style> </head> 三、超链接的几种样式 超链接有四种状态可指定,分别是a:link(未访问前)、a:hover(鼠标放入未点击前)、a:active(鼠标放入点击中未松开鼠标)、a:visited(访问后)四种。 其中一般是建议 a:link与a:active是一组,用一个样式。a:hover,a:active是一组用另一个样式。如: a:link{ background-color:#06F; color:#FFF; text-decoration:none; /* text-decoration 为none 下划线没了 */ font-size:18px; } a:hover{ background-color:#FFF; color:#F00; font-size:24px; } ...等等。 四、标签 css中的优先级 可以为标签div ,指定一个ID,Class,或直接用style来搞,如下面: <div class="haha" id="qq">这是一个div区域2</div> 那么优先顺序是什么呢::标签选择器<类选择器<id选择器<style属性 五、简单div样式介绍 #div_1{ /*border-bottom:#F60 2px dashed;*/ /* border-botton,可以对div的下边框单据进行设置样式,一般是颜色、字体大小(如2px 2个像素)、边框线形(如 dashed 虚线吧) */ background-color:#F90; /*padding:20px 100px 200px 300px;上 右 下 左 margin:0px;*/ /* padding 内容与边框距离, margin此边框与外面的div或body的距离 */ float:left; /* float是浮动着,原位置移动后,下面的标签会顶过来。如这个float:left,将把标签内部浮动在左边,那原来的下面的文本可直接流向右边了,下面的div会挤进来. position 是定位,可绝对来定位掉,定位后原来的位置会被其它的标签占用掉,因为一旦被position了那就被从文本流中拉出去了,不属于普通文本流不占用普通文档流的位置。 */ } 图文混排,就用要到css 样式中的 float:left,这样原本图片下面的文本,就自动流向了图片右边了。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com