ASP.NET动态网站制作（2）--css（1）

前言：这节课主要讲关于css的相关内容。

重点：1.css（Cascading Style Sheet）叠层样式表，做网页的外观，是用来控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2.css的几种写法：

（1）行内样式：直接在html标签里写，在标签后面添加“style”。<div style="height：100px"></div>，其中，height为css的属性，100px为其属性值。

（2）内嵌样式：会涉及到选择器的概念，有三种选择器：标签选择器、class选择器、id选择器，下面分别介绍：

style样式写在title标签下面

<style type="text/css">

div{width:100px}

</style>

上面的例子中是对div进行样式设置，且所有的div都采用这一样式，被称为标签选择器。

还有一种选择器为class选择器，如

<style type="text/css">

.c1{color:#F00}

</style>

<div class="c1">你好</div>

class选择器的优先级高于标签选择器。

还有一种选择器叫id选择器，如

<style type = "text/css">

#d1{color:#F00}

</style>

<div id="d1">你好</div>

选择器的优先级高低排序：id选择器>class选择器>标签选择器。id是不能有多个或者重复的。

（3）链接样式：这是用的最多的一种样式，新建单独的css文件来单独表示样式，用的时候调用即可，创建一个css文件夹将不同的样式包含进来。不同的页面文件可以对应于不同的css文件，最好对应的起相同的名字，如a.html，a.css，公共样式可以命名为base.css，这样易于维护。体现了程序的低耦合性。

（4）导入样式：这种样式已经很少用了，是等整个html内容加载完了才开始加载样式表，效果不好。

<style>

@import url(1.css)

</style>

各种样式的选择采用就近原则，四种样式没有优先级关系。

3.css的注释方式：/*    */

4. css继承：子标签会继承父标签的所有样式，并可以自己修改而不影响父标签。

5.css文字效果：font-family(字体，需是电脑已安装的字体，微软雅黑效果不错)；font-size（字体大小）；color（字体颜色）；font-weight（字体粗细）；text-decoration:underline（下划线）；text-decoration:overline（顶划线）；text-decoration:line-through（删除线）；text-transform:capitalize（单词首字母大写）；text-transform:uppercase（单词全部大写）；text-transform:lowercase（单词全部小写）；letter-spacing（字母间距）；text-align（文本对齐，left，right，center）；line-height（垂直居中，让该属性值等于文本框高）。

6.取色实用工具：FSCapture。

7.第一次作业。

　　   8.图片效果：（1）图片边框border（border-style--dotted/dashed/solid、border-color/border-width）。

　　   9.设置网页背景：background-color（背景颜色）、background-image：url(xx.jpg，图片的相对路径)、background-repe（背景图片重复）、background-position（背景图片位置）、background-attachment:fixed（背景图片固定）。

后记：这一部分内容相对简单，但仍需练习。