web从入门开始（7）-----css

CSS的语法格式

l  一个CSS规则，有“选择器”和“格式声明语句”构成

l  选择器：就是选择HTML标记，换句话说就是给那个HTML标记加样式

l  格式声明语句：由{ }构成，{ }中是各种格式语句。

l  一条格式语句，由“属性名：属性值”构成。

l  每一条格式语句，必须用英文下的“；“构成

l  属性名，就是CSS中的各种属性，这些属性名都是固定的

l  属性值：一个属性名可以去不同的值，这个值是不加引号的。

l  CSS中的数字单位，都是PX，这个PX 不能省略。

选择器

1. 基本选择器

　　　　1） “*”选择器：通配符

　　　　　　l  描述：将匹配所有的HTML标记，所有的标记都会改变

　　　　　　l  语法：*{ color：red；}

　　　　　　l  注意：”*”尽量少用，因为IE6不支持

　　　　　　

　　　　2） 标签选择器

　　　　　　l  描述：将匹配指定的HTML标记

　　　　　　l  语法：匹配标记{ 属性 }

　　　　　　例如： p{ color:red ; } 所有的p标记会变

　　　　　　l  注意：CSS标签选择器，与HTML标记名称一样，但是不能加尖括号

　　　　3） class选择器（类选择器）

　　　　　　l  描述：给一类HTML标记加样式，这里所指的“一类”是：每一个HTML标记都有一个class属性，并且class的值都一样。Class属性是公共属性，每个HTML标记都有

　　　　　　l  语法：.class名称{属性}

　　　　　　例如：.myClass{ color：red；}

　　　　　　l  注意：类选择器的名称必须以”.”开头，后跟HTML标记的class属性的值，

　　　　　　l  HTML标记的class属性的值，不能以数字开头

给每个标记添加属性class并指定其名称，所有同名称class标记都会改变

　　　　4） Id选择器-----实际应用中，是基本不使用的

　　　　　　l  描述：是给指定id 的冤死添加样式的

　　　　　　l  注意：网页中，不能存在多个同名的id 属性，值必须是唯一的

　　　　　　Id属性也是公共属性，每个HTML标记都有一个公共属性

　　　　　　ID属性一般是给JS使用的，不是让你来加样式的clss属性只能给CSS用，不能给JS用

　　　　　　ID选择器的名称，必须以“#”开头，后跟HTML标记的ID 属性的值

1. 组合选择器

1） 多元素选择器

　　l  描述：给多个元素加同一个样式，多个选择器之间用“,”隔开。

　　l  举例：h1,p,div,body{ color:red;}

　　 H1,p, .class{color：red；}

2） 后代元素选择器

　　l  描述：给某个标签的某个后代元素加样式，选择器之间用“空格”隔开。

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

可以增加前缀 die h1.title{ color:red;}

后面的标记，必须存在于前面标记的里面

3） 子元素选择器

　　l  描述：只给某个标签的某个儿子元素加样式

　　l  举例：div>.title{ color: red;}

CSS注释

CSS注释：/*注释内容*/

HTML注释；<!-HTML注释-->

CSS尺寸属性

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

height：元素高度

margin：50px auto;    移动边框实现居中，50px代表上下的距离，auto为左右距离，表示左右居中

CSS字体属性

font – size:文字大小: 如：font – size :14px

font – family:字体: 如：font – family:黑体

font – style:斜体 取值：italic

font – weight: 粗体 取值bold 如：font- weight:bold

CSS文本属性

color :文本颜色

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

text – align:文本的对齐方式,取值:left,center,right

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

text – indent:首行缩进：

letter-spacing：字间距

CSS伪类选择器：给超链接加样式

一个超链接有4个状态：

正常状态(:linkl)：鼠标没放上之前

放上状态(:hover)：鼠标放到链接上时的样式

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

访问后状态(:visited)：链接被打开过后的状态

在平常生活中，会使用下面写法，给链接加不同的样式

//将正常状态和访问过状态合二为一；

CSS列表属性

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

CSS边框属性：每个元素都可以加边框线

border-left:左边框线。

格式 border-left: 粗细 线型 线的颜色

线型：none（无线），solid（实线），dashed（虚线），dotted（点状线）

border -right:右边框线

border -top:上边框线

border -bottom：下边框线

border：同时给所有边框加线

CSS内边距属性：边框线到内容间的距离

注意：平常我们所说的width和height属性，他们指的宽度和高度，不含内外边距，边框线

Padding-left

Padding-right

Padding-top

Padding-bottom

缩写形式：

Padding：10px     四个边的内填充分别为10px

Padding：10px 20px；表示上下为10px 左右为20px

Padding：5px 10px 20px；表示上为5px，左右10px，下为20px

Padding：5px 10px 15px 20px； 顺序为上右下左

CSS外边距属性：边线往外的距离---------margin

CCS背景属性

background-color：背景颜色

background-image：背景图片  例：background-image：src：图片地址

background-repeat：背景平铺方式  取值：no-repeat（不平铺）,repeat-x（水平平铺）,repeat-y(垂直平铺)

background-position：背景定位

l  格式：background-position:水平方向定位   垂直方向定位

l  Background-positio:50px  50px//背景距离容器地方左边50px，容器顶端50px

l  百分比定位：background-position:50% 50%

简写方式

background:背景色  背景图  平铺方式  定位方式

CSS浮动和清除

float:让元素浮动   取值：left(左浮动)，right（右浮动）

：清除浮动   取值：left（清除左浮动），right（右浮动）

意义：所谓浮动相当是把元素上升了一层空间，他不占用原来空间的位置

作用：浮动的所有元素是以单个的个体出现的

所以就解决了一个功能，就是把所有的块元素并列显示（正常下，一个块元素是占用一行的）

CSS继承性

外层元素的样式，会被内层元素尽心国际城。多个外层元素的样式，最终会叠加到内层上

CSS优先级

行内样式>ID选择器>class选择器>标签选择器