CSS课程

一、概述

1、如何定义样式：

      html标记的某些属性：border ="1"  width="" height=""

2、CSS的优点：

   html语言，为一些标记定义了一些用于定义样式的属性，不统一，也不通用。

   a、需要一种统一的定义所有元素的样式的方式——CSS

   b、内容和表现分离

3、CSS注释的方法

/*  注释内容 */

二、CSS的基础语法

1、内链方式：将样式定义写到元素的style中，style="属性名：值"

2、内部样式表：将样式定义到head里的style中   p{属性名：值；}

3、外部样式表：将样式定义到单独的文件里，后缀.css，添加样式定义，页面引入样式文件

<link href="url" type="text/css" ref="stylesheet" />

三、相关应用

1、优先使用外部样式表，内容和表现分离，提高可重用性和可维护性

2、重复定义：不冲突的取并集，冲突的按优先级

    优先级：内联>外部=内部

如果优先级相同，以后定义为准。

四、选择器——谁使用样式

 1、元素选择器：以html标签的名称     p/h1{   }

                                 input{   }

2、类选择器

       CSS中： .s1 { ....}

       html页面中：<元素  class="s1">

3、元素ID选择器 

      CSS中：         #aaa {.....}

       HTML页面中： <元素 id="aaa"  />

/*皮肤，内置好多套配色文件，选择某个CSS
a.css
b.css*/
/*只能包含CSS的样式定义*/
h2
{
	color:orange;
	font-size:30pt;
}
h3
{
	font-size:30pt;
	border:3px solid green;
}
h3
{
	border:1px solid green;
}
/*使用类选择器*/
.s1
{ 
	color:blue;  	
	font-size:20pt; 
}
/*元素ID选择器*/
#t
{
	color:purple;  font-size:40pt;  
}

4、分类选择器：同一标签中细分不同的样式

            CSS中：input.txt{.....}

                          input.btn{.......}

                          input.file{......}

          HTML页面中：              

<input type="text" class="txt" />

5、分组选择器：为各种不同的选择器定义他们相同的部分

Css中：   h1,h2,s1,#aaa,div,small{color:red;}

HTML中：h1、h2等皆使用样式

6、派生选择器：使用元素的父子关系

    Css中：   div a {......}

                     #navi a {....}

                     #navi ul li a {......}

                    table tr td a {    }

HTML页面中：  

<div>aa<a>ss</a>bb</div>

7、伪类选择器：不同状态下的样式

   :link 未访问过
   :active    激活
   :visited         访问过的
   :hover         悬浮--鼠标移入
   :focus         获得焦点

五、各种样式——应用角度

      尺寸的单位、颜色的单位

六、布局

1、尺寸
width/height
overflow：内容溢出包含框时
visible：默认取值，总是可见
hidden：隐藏
scroll：总是显示滚动条
auto：如果溢出，则显示滚动条
2、边框
border:width style red;--四个边
border-top/left/right/bottom--单边
如果这么写：
border-top-width:
border-bottom-style:
border-right-color:

3、box modal（框模型、盒子模型）
a、使用 padding 和 margin 定义内/外边距
padding:20px;--以左上角
padding-top/right/left/bottom：

b、占用的面积：


c、使用中：布局时，关注高度和宽度以外，关注边距


d、各种写法：
margin:10px;
margin:10px 20px 30px 40px;
    top    right  bottom  left
margin:10px   20px;
 top/bottom   left/right
margin:10px auto;
auto：自动计算左右外边距=(页面-div)/2
--实现框居中显示

七、背景

        background-color:red/#ccc/#f23d4a;
background-image: url(a.jpg) ;--默认情况下，双向平铺
background-repeat:repeat/no-repeat/repeat-x/repeat-y;
background-position:x/left y/top；
10px  20px;
20%   50%;
--背景图像的位置
background-attachment:scroll/fixed;
fixed：背景固定，实现水印的效果
--设置背景图像的附着方式

八、文本

                color:;--文本的颜色
font-size:;--字体的大小
font-family:;--字型
font-weight:normal/bold；--加粗显示
text-align:left/center/right;
text-decoration:none/underline;--是否显示下划线
text-indent：；---首行文本缩进
line-height:;---常用来设置文本在某行内垂直方向上居中

九、表格——表格所特有的样式属性

               border-collapse:separate/collapse;
vertical-align:top/middle/bottom;---单元格中垂直方向的对齐
border-spacing:;--单元格分开时，设置之间的距离