CSS

网页建设三剑客:HTML (建模) CSS (贴图处理美化) javaScript(调动作)

1.CSS概述:

　　层叠样式表(CSS，Cascading Style Sheet)是一个很神奇的东西，设计者可以通过修改样式表的定义而使网页呈现完全不同的外观，而当网站拥有几十甚至上百个页面的时候，修改页面的样式表文件即可修改页面的外面，从而大大地减少工作量。

　　CSS(Cascading Style Sheet,层叠样式表)是一种标记性语言，与HTML是“表兄弟”。

　　样式表技术诞生于1996年，需要浏览器支持，现在大多数浏览器都支持CSS。

　　它允许在html文档中加入样式，如字体类型、颜色、大小等。

　　小结:对于设计者来说它是一个非常灵活的工具，可以将所有有关于文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供html调用而不必再把繁杂的样式定义编写在文档结构中

2.使用CSS优势：

　　可以实现网页结构与格式分离；

　　对网页布局、字体、背景和其它图文效果实现更加精确的控制；

　　更好的易用性和扩展性，可以单独以一个文件的形式出现。

　　小结:总之，CSS在当前的网页设计中已经成为不可缺少的技术，小至去除链接文字的下划线，大致实现复杂的视觉和动态效果，网络中有大量的CSS代码，初学者可多参考别人CSS实现网页样式的方法。

3.使用CSS的格式：

凡是.CSS的文件装的都是CSS代码

3.1 CSS语法

p{color：red;}

选择器{属性名：属性值 ;}

选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号

属性名和冒号之间最好不要有空格。

3.2 CSS和HTML的结合方式

CSS代码理论上位置是任意的，但通常写在style标签里

CSS和HTML的结合方式有3种：

a. 行级样式表:

采用style属性,范围只针对此标签适用

p标签段落内容。

</p>

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

b. 内嵌样式表:

采用<style>标签完成。范围针对此页面

<head>

p { color:#FF0000;}

</style>

</head>

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

c. 外部样式表:

采用建立样式表文件。针对多个页面.

通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。

例：<link rel="stylesheet" type="text/css" href="css_3.css" />

注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

引入样式表文件的方式:

1):采用<link>标签

eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

2):采用import，

必须写在<style>标签中，并且必须是第一句a.css为引入的已经完成的CSS(这种方式很少使用,因为引用数量小)

<head>

eg: @import url(a.css) ;

</style>

</head>

注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准

CSS样式优先级和代码规范

样式优先级

由上到下，由外到内。优先级由低到高。

代码规范

选择器名称 { 属性名：属性值；属性名：属性值；…….}

属性与属性之间用分号隔开属性与属性值直接按用冒号连接

如果一个属性有多个值的话，那么多个值用空格隔开

CSS选择器(掌握)

选择器分为两大类:

1.基本选择器

a.标签选择器:

指的就是选择器的名字代表html页面上的标签

color:red ;

border:1px dashed green;

}

b.类选择器：

规定用圆点.来定义

优点：灵活

eg: .one{ }

<class选择器。其实使用的标签中的class属性>

ID选择器：

规定用#来定义

eg: #one{cursor:hand; }

区别：标签选择器针对的是页面上的一类标签.

类选择器可以供多种标签使用.

ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。

d:通用选择器：用*定义,代表页面上的所有标签。

font-size:30px;

margin-left:0px;

margin-top:0px;

}

扩展选择器

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{

border:1px solid red;

}

a:active{

color:blue;

}

两种引入方式的区别：

外部样式表中不能写<link>标签,但是可以写import语句

CSS各种选择器的冲突(掌握)

CSS样式的冲突:

1.ID选择器 > 类选择器 > 标签选择器

2.行级样式表 > 内嵌样式表 > 外部样式表

外部样式表的ID选择器 > 内嵌样式表的标签选择器

原则：就近原则

CSS的各种属性(掌握)

CSS中尺度单位的介绍

CSS的单位:

a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡

b.相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字)

字体设置

font-size:50px; /*字体大小*/

font-style:italic ; /*斜体*/

font-weight:bold; /*粗体*/

font-family:幼圆; /*字体类型*/

font-variant:small-caps; /*小写变大写*/

}

文本设置

letter-spacing:0.5cm ; /*字母间距*/

word-spacing:1cm; /*单词间距*/

text-align:center; /*在所包含容器的中间*/

text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/

text-transform:lowercase; /*单词字体大小写*/

color:red ;

}

背景设置

body{

/*背景颜色*/

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)

盒子是相对而讲的对于body中的p标签,body就是p的盒子

padding:是内容到边的距离

border: 是边的粗细

margin:是控件到控件的距离

定位设置(position,float,clear,z-index)

#div{

position: absolute;

1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流

2.相对定位: 相对的是自己在顺序流中原来的位置

left:100px; /*横坐标*/

top:100px; /*纵坐标*/

border:1px solid red ; <1像素宽的红色实线边框>

100px;

height:100px;

}

#d1{

position: relative; /*相对位置*/

left:100px;

top:100px;

border:1px solid green ;

100px;

height:100px;

}

span{

position: relative;

left:20px;

top:20px;

}

z-index:值任意，值越大离我们越近

鼠标样式设置(cursor)

Opacity 取值0--1,0为透明,1为完全不透明

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3--overflow属性</title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            background-color:#ffccff;
            /*overflow:auto;*/
            /*overflow: scroll;*/
            overflow: hidden;

        }
    </style>
    <script type="text/javascript">
    /*这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
visible    默认值。内容不会被修剪，会呈现在元素框之外。
hidden    内容会被修剪，并且其余内容是不可见的。
scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit    规定应该从父元素继承 overflow 属性的值。
    */
    </script>
</head>
<body>
    <div>
        <p>大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好</P>
    </div>
</body>
</html>