CSS学习笔记汇总

CSS语法格式:一个css规则,由一个选择器和一个格式声明语句构成    例如:h1{color:red; font-size:14px;}

CSS选择器:

1.基本选择器

1)* 号选择器:通配符,将匹配所有的HTML标记,所有的标记都会改变

语法格式:*{color:red;}

2)标签选择器:将匹配指定的标记

语法格式:h1{color:red;}

注意:CSS标签选择器,与HTML标记的名称一样,但不能加尖括号

3)class选择器(类选择器):给一类HTML标记加样式

这里的一类是每个HTML标记都有一个class属性,且class的值一样,class是公共属性,每个HTML标记都有

类选择器必须以    "."    开头

<style type="text/css">
.myClass{
    color:red;
    background-color:yellow;
}
</style>
h1 class="myClass">标题</h1>
<p class="myClass">段落</p>

4)id选择器:给指定id元素添加样式

注意:标记的id值,必须唯一

每一个HTML标记都有一个id属性

id选择器的名称前以"#"开头,后跟HTML中id的值

id属性一般给js使用,不是用来加样式的    class只能给css用,不能给js用

2.组合选择器

1)多元素选择器

给多个元素加同一个样式,多个选择器之间用","隔开

举例:h1,p,div,.myClass{color:red;}

2)后代元素选择器

给某个标签的后一代元素加样式,选择器之间用空格隔开

举例:div .title{color:red;}

3)子元素选择器

描述:给某个元素的子元素添加样式

举例:div > h1.title{}

CSS注释:

/*CSS注释内容*/

CSS尺寸属性:

width:元素宽度,一定要加px单位

height:同理

CSS字体属性;

font-size 字体大小    例如:font-size:14px;

font-family 字体

font-style: 斜体    取值:italic

font-weight 粗体    取值:bold

CSS文本属性:

color 文本颜色

text-decoration:文本修饰线    取值:none(无) underline(下划线) overline(上划线) line-through(删除线)

text-align 文本水平对齐方式    取值:left center right

line-height:行高    可以用固定值,也可以用百分比

text-indent:首行缩进

letter-spacing:字间距

CSS伪类选择器:(给超链接的不同状态加链接)

正常    (:link)    鼠标没放上之前的链接的样式

放上    (:hover)    鼠标放上后的样式

激活    (:active)    鼠标左键按住不松开的样式

访问过    (:visited)    按下左键,并抬起后的样式

CSS列表属性

list-style:列表样式     取值:none    去掉项目符号前的符号

CSS边框属性;

border-left:(左边框线)    粗细,线型,颜色

线型:none(无线) solid(实线) dashed(虚线) dotted(点状线)

border:同时给四个边加边框线

注意:行内元素<span>没有width和height,也就是说只有块元素才有width和height

CSS内外边距:

内边距:padding

外边距:margin

CSS背景颜色:

background-color    背景颜色

background-image    背景图片地址    例如:background-image:url(images/bg.gif)

background-repeat    背景平铺方式    取值:no-peat(不平铺),repeat-x(水平方向),repeat-y(垂直方向))  background

background-position    背景定位    水平方向定位,垂直方向定位

用英文单词定位:left|center|right    top|center|bottom

用固定值定位:50px 50px    距离左边,距离上边

用百分比定位:50% 50%    水平居中    垂直居中

混合定位:10% 10px    靠左边对齐    距离容器顶端10px

全局CSS设置:

1.去除所有标记内外边距    body,h1,p{margin:0;padding:0;}

2.去除项目符号的修饰符号    ul,li,ol{list-style:none;}

3.初始化链接状态颜色    a:link,a:visited{color:blue;text-decoration:none;}

a:hover{color:red;}

4.整个网页    body{font-size:12px;color:#444;}

CSS浮动和清除

float:让元素浮动    取值:left,right

clear:清除浮动    取值:left,right,both(左右都清除)

　　CSS浮动:

浮动的元素:将向左或向右浮动,浮动到包围元素的边上,或上一个浮动元素的边上为止

浮动的元素不再占据空间了,并且浮动元素的层级要高于普通元素

浮动的元素一定是块元素,不管它原来是什么元素

如果浮动的元素没有指定宽度的话,它将尽可能变窄,因此浮动元素一般要定宽和高

一行内的元素,要浮动一起浮动

浮动的功能,可以实现将多个块元素并列排版

如何让包围元素包住浮动元素,使用清除操作

clear:both    要在浮动元素下面使用清除操作

　　CSS清除浮动:

　CSS清除浮动的功能有两种:

1.可以使包围元素从视觉上包住浮动元素

2.清除之下的其他元素恢复默认排版

3.有浮动,就要有清除

4.如果包围元素指定了高度,可以不用清除

CSS的继承性和优先级

CSS属性继承:外层元素的样式,会被内层元素进行继承,多个外层元素的样式,最终会叠加到内层元素上

什么样的CSS属性会被继承呢?

CSS文本属性都会被继承

    CSS优先级:

1.单个选择器的优先级:    行内样式>id选择器>class选择器>标签选择器

2.多个选择器的优先级:    一般情况下,指向越准确,优先级越高

特殊情况下:需要假设一些值: 有几个指向就将它们的值加起来计算,值大的优先级高

标签选择器    1

类选择器    10

id选择器    100

行内样式    1000

display属性  

功能:规定网页元素如何显示的问题

取值:none(隐藏),block(以块元素显示),inline(以行内元素显示)

overflow属性:

当内容溢出时该如何显示,取值:visible(可见),hidden(隐藏),scroll(出现滚动条),auto(自动)

cursor光标类型

cursor:网页中的光标的类型    取值:text,help,wait,pointer(手型)

CSS定位

position:定位方式:    取值:static,fixed,relative,absolute

static:静态定位(默认状态,不定位):

fixed:固定定位

relative：相对定位

absolute：绝对定位

定位方式，要与定位属性配合使用

定位坐标：指定定位的元素，偏移目标元素多远的距离

left：定位元素，距离目标元素左边的距离

right：

top：

bottom：

1.固定定位：position：fixed

是相对于浏览器窗口来进行的定位

不占空间，层级要高于普通元素

如果不指定定位坐标的话，固定定位的元素在原地不动

固定定位元素，一定是块元素，不管它原来是什么元素

2.相对定位：position：relative

是相对于原来的自己进行定位

依然占空间，层级高于普通元素

如果不指定定位坐标的话，相对定位元素的位置在原地不动

相对定位元素原来是什么元素，就是什么元素

提示：相对定位和绝对定位一般配合使用

3.绝对定位：position：absolute

是相对于祖先定位元素，来进行的定位

依然占空间，层级高于普通元素

如果不指定定位坐标的话，绝对定位元素的位置在原地不动

绝对定位元素是一个块元素

HTML引入CSS的方法

1.嵌入式

通过style标记，来引入CSS样式

语法格式：<style type="text/css"><style>

提示：style中的样式只能给当前网页用

同一个网页中style样式可以出现多次

2.外联式

通过<link>标记，来引入一个外部的CSS的文件，这样可以实现CSS代码被多个网页共享

<link rel="stylesheet" type="text/css" href="css/public.css" />

link标记常用属性:

rel:也就是说引入什么样类型的文件    取值:stylesheet

type:内容类型

href:引入的CSS文件地址

提示:link标记放在head标记中

同一个网页可以使用多个link来链入多个外部样式文件

3.行内式

每一个HTML标记都有一些公共的属性:class,id,title,style