css基础精解和实例分析

最新推荐文章于 2024-10-05 12:07:53 发布

kanshangren

最新推荐文章于 2024-10-05 12:07:53 发布

阅读量1.5k

点赞数

分类专栏： WEB编程文章标签： css stylesheet div class url border

WEB编程专栏收录该内容

7 篇文章 1 订阅

订阅专栏

css就是cascading style sheets层叠样式表
　　一、基本语法
　　1、选择符
　　selector {proper: value}
　　选择符 {属性：值}
　　如：body {color: black}
　　（body页面主体部分，color控制的文字颜色属性，black属性的值，此例的效果是页面文字为黑色。）
　　
　　如果属性的值由多个单词组成，必须加引号，如
　　p {font-family: “sans serif“}
　　
　　如果一个选择符指定多个属性时，用分号分开，如
　　p {text-align: center; color: black}
　　为了便于阅读，分行书写
　　p {text-align: center;
　　 color: black;
　　 font-family: arial}
　　（段落居中排列，段落中文字为黑色，字体为arial）
　　
　　2、选择符组
　　把相同属性和值的选择符组合起来，用逗号分开，如
　　h1,h2,h3,h4,h5,h6 {color: green}
　　（以上所有标题的颜色为绿色）
　　p,table {font-size: 9pt}
　　（段落和表格了的文字尺寸为9号字）
　　等价于p {font-size: 9pt}
　　 table {font-size: 9pt}
　　
　　3、类选择符
　　如你想要两个不同的段落，一个向右对齐，一个居中，你可以先定义两个类
　　p.right {text-align: right}
　　p.center {text-align: center}
　　然后用在不同的段落里，只要在HTML标记里加入你定义的class参数：
　　<p class=“right“>段落向右对齐</p>
　　<p class=“center“>段落居中对齐</p>
　　类的名称可以为任何英文单词或英文开头与数字的组合
　　
　　类选择符的另一个用法是在选择符中省略html标记名，这样可以把几个不同的元素定义成相同的样式：
　　.center {text-align: center}（定义.center为文字居中排列）
　　这样的类可以应用到任何元素，如：
　　<h1 class=“center“>这个标题居中排列</h1>
　　<p class=“center“>这个段落居中排列</p>
　　
　　4、ID选择符
　　定义ID选择符要在ID名称前加一“#”号，黑类选择符一样也有两个方法。
　　下面的例子只匹配id=“intro“的段落元素：
　　p#intro
　　{
　　font-size: 100%;
　　font-weight: bold;
　　color: #0000ff
　　background-color: transparent
　　}
　　（该段落的字体尺寸为默认尺寸的110%；粗体；兰色，背景颜色透明）
　　下面的例子，id属性匹配所有的id=“intro“的元素：
　　#intro
　　{
　　font-size: 100%;
　　font-weight: bold;
　　color: #0000ff
　　background-color: transparent
　　}
　　
　　5、包含选择符
　　可以对某元素包含关系定义，元素1包含元素2，这种方式对元素1里的元素2定义，对元素1或元素2没有定义，如：
　　table a
　　{
　　font-size: 12px
　　}
　　在表格内的链接文字为12像素，而表格外的链接文字仍为默认大小。
　　
　　6、样式表的层跌性
　　层跌性就是继承性，例如在div标记中嵌套p标记：
　　div {color: red; font-size:9pt}
　　...
　　<div>
　　<p>
　　这个段落的文字为红色9号字
　　</p>
　　</div>
　　（p元素的内容继承div定义的属性）
　　当样式表的继承有冲突时，以最后定义的为准，如：
　　div {color: red; font-size:9pt}
　　p {color: blue}
　　...
　　<div>
　　<p>
　　这个段落的文字为蓝色9号字
　　</p>
　　段落里的文字继承了div属性，而color属性依照最后的定义。
　　
　　优先级!important > id选择符 > 类选择符 > 选择符，如：
　　p. {color: #FF0000 !important}
　　.blue {color: #0000FF}
　　#id1 {color: #FFFF00}
　　我们同时对一个段落加上这个3个样式，它最后会依照!important申明为红色文字，如果去掉!important则依照优先权id选择符为黄色文字。
　　
　　7、注释
　　注释便于阅读，不会在浏览器中显示，如
　　/* 定义段落样式 */
　　p
　　{
　　text-align: center; /* 文本居中排列 */
　　color: black /* 文字为黑色 */
　　font-family: /*字体为arial */
　　}
　　
　　二、伪类——动态链接
　　1、语法
　　selector:pseudo-class {property: value}
　　选择符：伪类{属性：值}
　　
　　类选择符及其他选择符可以和伪类混用
　　selector.class:pseudo-class {property: value}
　　选择符.类：伪类{属性：值}
　　
　　2、锚的伪类
　　最常用的4中a(锚)元素的伪类
　　a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
　　a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
　　a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
　　a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
　　上面的例子中，这个链接位访问为红色无下划线，访问时为绿色无下划线，激活时为蓝色有下划线，鼠标在链接上时为紫色有下划线。
　　
　　3、伪类和类选择符的组合
　　我们定义一组连接为红色，访问后为兰色，另一组为绿色，访问后为黄色
　　a.red:link {color: #FF0000}
　　a.red:visited {color: #0000FF}
　　a.blue:link {color: #00FF00}
　　a.blue:visited {color: #FF0000}
　　应用
　　<a class=“red“ href=“...“>第一组连接</a>
　　<a class=“blue“ href=“...“>第二组连接</a>
　　
　　4、其他伪类
　　首字和首行（frist-letter和frist-line），ie5.5以上支持。
　　<style type=“text/css“>
　　p:frist-letter {font-size: 300%}
　　</style>
　　...
　　<p>
　　这个段落的首字为默认的300%
　　</p>
　　---------------
　　<style type=“text/css“>
　　div:first-line {color: red}
　　</style>
　　...
　　<div>
　　<p>
　　这个段落第一行
　　第二行
　　第三行
　　</p>
　　</div>
　　（段落第一行为红色，第2，3行为默认颜色）
　　
　　三、如何在网页中插入css
　　1、链入外部样式表，如
　　<head>
　　...
　　<link rel=“stylesheet“ type=“text/cs“ href=“mystyle.css“>
　　...
　　</head>
　　表示从mystyle.css文件中读出定义的样式表，rel=“stylesheet“ 指页面中使用的是外部样式表，type=“text/cs“指文件的类型为样式表文本
　　
　　。 href=“mystyle.css“是文件所在的位置。一个外部样式表可以应用多个页面，样式表文件可以用记事本编辑，扩展名为css。
　　
　　2、内部样式表
　　<head>
　　<style type=“text/css“>
　　
　　</style>
　　</head>
　　
　　3、导入外部样式表
　　<head>
　　<style type=“text/css“>
　　
　　</style>
　　</head>
　　导入外部样式表必须在其他内部样式表的上面
　　
　　4、内嵌样式
　　<p style=“color: sienna; margin-left:20px“>
　　...
　　</p>
　　这个段落颜色为土黄，左边距为20像素
　　
　　5、多重样式表叠加
　　优先级
　　内嵌样式〉内部样式（链入外部样式表，二者按最后定义确定优先级〉导入外部样式表
　　
　　四，实例分析
　　1、某index.css源码分析
　　<style type=“text/css“>
　　
　　</style>
　　
　　2、某style.css源码分析
　　A
　　{
　　TEXT-DECORATION: none;
　　}
　　A:hover
　　{
　　COLOR: #0099FF;
　　}
　　A:link {
　　color: #205064;
　　}
　　A:visited {
　　color: #006699;
　　}
　　/* 定义4个常用锚 */
　　BODY
　　{
　　FONT-FAMILY: 宋体;
　　FONT-SIZE: 9pt;
　　text-decoration: none;
　　line-height: 150%;
　　background-color: #FBFDFF;
　　}
　　TD
　　{
　　FONT-FAMILY:宋体;
　　FONT-SIZE: 9pt;
　　}
　　Input
　　{
　　FONT-SIZE: 9pt;
　　HEIGHT: 20px;
　　}
　　/* 定义输入框 */
　　Button
　　{
　　FONT-SIZE: 9pt;
　　HEIGHT: 20px;
　　}
　　/* 定义按钮 */
　　Select
　　{
　　FONT-SIZE: 9pt;
　　HEIGHT: 20px;
　　}
　　/* 定义选择框 */
　　.border
　　{
　　border: 1px solid #CCCCCC;
　　}
　　/* 定义边界类 */
　　.border2
　　{
　　background:#fef8ed;
　　BORDER-RIGHT: #999999 1px solid;
　　BORDER-LEFT: #999999 1px solid
　　}
　　.title
　　{
　　 background:#f6f6f6;
　　
　　}
　　/* 定义标题类 */
　　.title_left
　　{
　　background:url(images/left_bg.gif);
　　}
　　.title_right
　　{
　　background:url(images/right_bg.gif);
　　}
　　/* 定义标题类的背景图片 */
　　.title_main
　　{
　　background:url(Images/jiaodian_bg.gif);
　　}
　　.tdbg{
　　background:#FFFFFF;
　　line-height: 120%;
　　}
　　/* 定义td标记类的 */
　　.tdbg_left{
　　background:#fef8ed;
　　line-height: 150%;
　　}
　　.tdbg_right{
　　background:#EAF1FB;
　　line-height: 150%;
　　}
　　.tdbg_main{
　　background:#ffffff;
　　line-height: 150%;
　　}
　　.topborder
　　{
　　border-right: 1px solid #6687BA;
　　border-left: 1px solid #6687BA;
　　border-bottom: 1px solid #6595D6;
　　width: 760px;
　　}
　　.nav_top
　　{
　　background-image: url(Skin/1/topbg.gif);
　　}
　　.nav_bottom
　　{
　　background-image: url(Skin/1/bottombg.gif);
　　}
　　.nav_menu
　　{
　　background:url(Skin/1/topBar_bg.gif);
　　}
　　.menu
　　{
　　background-color: #F0F9FF;
　　width:97%;
　　border: 1px;
　　}
　　/* 定义菜单类 */
　　td.MenuBody
　　{
　　background-color: #F0F9FF;
　　}
　　这个其实大都是他根据自己具体情况定义的类选择符，注释倒成了画蛇添足，如果要更改某一种样式可以根据他定义的类选择符到标记中更改
　　
　　相关的类选择符的属性值。
　　<!--
　　青风剑客制作整理，保留所有权利。
　　原创新动力网 http://www.jalihh.com
　　e-mail:jalihh@21cn.com
　　--〉
　　
　　这个是我根据以前的笔记一个字一个字敲的，不可谓不经典，希望对大家有点帮助，如果你掌握了这些知识，别人的ccs文件大都能被你看穿和利用：）
　　
再结合苏沈小雨的css中文手册，css就没有什么了。
我上传了供大家下载，地址： http://www.jagl.com.cn/soft/css2.0.chm

这个我常用的一个很好的编辑器TopStyle Lite2.10,附带了几个不错英文注释的css例子。
　　我上传了供大家下载，地址： http://www.jagl.com.cn/soft/TopStyle2.rar