初识CSS

第一   CSS简介

一、概括:
CSS是层叠样式表(Cascading Style Sheets)来定义网页的显示效果,可以解决html代码对样式样式定义的重复,提高了后期样式代码的可维护性,增强了网页的实现效果功能,简单一句话,CSS将网页内容和显示效果进行分离,提高了显示功能。

第二   CSS与HTML结合方式

一、style属性方式:
利用标签中style属性来改变每个标签的显示样式
例如:
<div style="color:#0033FF; background:#999999">
div演示区域一
</div>
该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改
二、style标签方式(内嵌方式)
在head标签中加入style标签,对多个标签进行统一修改
例如:
<head>
<style type="text/css">
div{
background-color:#000000;
color:#FFFFFF;
}
@import url(1.css);
</style>
</head>
该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。
三、导入方式:
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到,那么就用这种方式。
例如:
<head>
<style type="text/css">
@import url(1.css);
</style>
</head>
注:url括号后必须用分号结束,如果导入进来的样式与本页样式重复,以本页样式为主,这种方式提高了复用性,和维护性。
四、链接方式:
通过head标签中的link标签来实现,前提也是需要有一个已经定义好的CSS文件
例如:
<head>
<link rel="stylesheet" type="text/css" href="1.css" />
</head>
注:可以通过多个link标签链接进来多个CSS文件,重复样式以最后链接进来的样式为主

CSS格式

一、概述:
选择器名称{属性名:属性值; 属性名:属性值.................}
二、选择器(CSS核心):
就是指CSS要作用的标签,那个标签的名称就是选择器,意为:选择哪个容器。选择器共有三种:
1、html标签选择器,使用的就是html中的标签名
2、class选择器,其实使用的是标签中的class属性
3、id选择器,其实使用的是标签中的id属性
每一个标签都定义了class属性和id属性。用于给标签进行标识,方便对标签进行操作,在定义中,多个标签的class属性可以相同,而id值要唯一,因为javascript中经常使用。
三、class选择器:
在标签中定义class属性并赋值,通过表签名.class值,对该标签进行样式的设定
例如:
相同标签设置不一样属性的时候,用class进行区分
p.pclass1{color:#FFFFFF;}
p.pclass2{color:#FFF00F;}
<p class=pclass1 ></p>
<p class=pclass2 ></p>
不同标签进行相同设置的时候,用class进行统一定义
.classname{color:#FFF00F;}
<p class=classname>
<div class=classname>
四、id选择器:
与class选择器类似,但格式不同,选择器名称为#id值
例如:
#pid{color:#FFFFFF;}
<p id=pid>
注:多个标签同样可以定义相同的id,但是对于javascript对标签元素的获取就会出错,所以最好保证id的唯一性
五、扩展选择器:
1、关联选择器:
标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器
例如:
p{ color:#FFFFFF; }
p b{ color:#FF0FFF; }
<p>样式<b>shuxing</b></p>
<p>hikhikh</p>
2、组合选择器:
对多个不同选择器进行相同样式的设定的时候用这个选择器
p,div{ color:#FFFFFF; }
3、伪元素选择器:(很多标签都支持)
其实就在html中预先定义好的选择器,称为伪元素,这是CSS的术语。
格式:表签名:伪元素。类名     表签名。类名:伪元素
a:link 超链接未点击状态
a:visited 被访问后的状态
a:hover 光标移到超链接上的状态(未点击)
a:active 点击超链接时的状态
使用顺序:L--V--H--A

p:first-line 段落的第一行文本
p:first-letter 段落中的第一个字母
 :focus具有焦点的元素,有些浏览器不支持
a:link{
background:none;
color:#00CC00;
text-decoration:none;
}
a:visited{
background-color:#CC0000;
color:#FFFF00;
font-size:15px;
}
a:hover{
background-color:#00FF00;
color:#FF00FF;
font-size:24px;
}
a:active{
background-color:#FFFFFF;
color:#CC9900;}
<a href="http://www.hjk.com">点击我</a>


展开阅读全文

没有更多推荐了,返回首页