回归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 属性可以针对不同的媒体进行不同的显示
比如在网页上显示时的字体大小和打印出来的字体大小不同

属性选择器

[    ]使用属性选择器

;