回归css

css即层叠样式表

组成

选择器和声明

选择器就是应用css样式的元素

声明由属性和值组成

p {color:red;}

选择器：p

声明 :color:red

属性:color

值:red

Id和class选择器

用#定义一个id选择器     #id1{color:blue;}

用.定义一个class选择器     .class1{color:red;}

p.center {text-align:center;} 可以让声明只在<p>中应用,对<h>等没有影响

主意#和.的后面不能直接跟一个数字

背景图像

background-image:url('     .JPG');设置背景图像（同常会重复占满）

background-repeat:repeat-x; 设置只横向重复

                                     no-repeat;不重复

background-position:    调整位置

文本

可以通过text-decoration:none;来调整链接等的下划线

vertical-align:text-top;

                          text-bottom;调整图片与文本的相对位置

字体

font-family:      ,       ,      ;   中文或者超过一个单词的字体需要 ""例如"宋体"

链接

4种特殊的链接

a:link                               未访问过的链接

a:hover 鼠标移动到链接上

a:active 链接被点击的那一刻

a:visited 访问过的链接

设置时必需按顺序

link visited hover active

表格

ul{

list-style-image:url("");来设置表格的列表项标记为图像

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

<caption>标签设置 表格标题

caption {caption-side:bottom;}调整标题在表格下方

盒模型

border-right-style:   调整单个边界的样式

分组和嵌套

分组选择器：用逗号分开，同时对多个选择器进行声明

p,h1,h2{

color:blue;

}

嵌套选择器

对选择器内部的选择器作用

• 为所有class="marked"元素内的p元素指定一个样式

. marked p{

color:bliue;

}

display

改变元素的显示

display:block; 块状元素显示

         inline; 内联元素

display:none; 隐藏元素并不占用空间

visibility:hidden;隐藏元素并保持原来元素的空间

元素定位

元素重叠

设置z-index设置堆叠顺序

z-index:-1;

cursor:          ;能够改变光标

clip:rect(                         );进行元素的裁剪

对齐

块状元素可以通过

margin:auto; 来进行对齐

组合选择符

后代选择符

div p{

}

对div中的所有p进行声明

子元素选择器

div>p{

}

对div中的直接子元素进行声明

相邻兄弟选择器

div+p{

}

普通相邻兄弟选择器

div ~ p{

}

伪类/伪元素

CSS伪类用来添加一些选择器的特殊效果

伪类语法：选择器：伪类{ 属性：值； }

例如

a:hover{color:red;}

:first-child{} 定义某选择器的第一个子元素

：lang(){}   用于选取带有以指定值开头的 lang 属性的元素。

例: p:lang(ww){background-color:red;}

则<p lang="ww">1111111111</p>背景变为红色

导航栏

通常导航栏用链接列表做

一般可以做成横向和竖向

下拉菜单

.dropdown

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

通常使用<span> <button>来打开下拉菜单

用div来包裹元素，创建下拉菜单的内容

图片透明度

图片的透明度可以用  Opacity属性来设置

img{opacity:  :}

opacity的值可以在0到1.0之间调整  值越小越透明

通常透明度常和：hover一起使用，能使图片在鼠标移动上去后不透明，移开后恢复半透明

img{ opacity:0.4; }

img :hover { opacity: 1.0 ; }

媒体类型

@media 属性可以针对不同的媒体进行不同的显示

比如在网页上显示时的字体大小和打印出来的字体大小不同

属性选择器

[    ]使用属性选择器