css简介(一)

一、选择器

1.1什么是选择器

选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式

选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。

1.2基本选择器（上次讲过）

通用选择器

标签选择器

类选择器

 

ID选择器

1.3复合选择器

多元素选择器：

后代元素选择器：

子元素选择器：

相邻元素选择器：

 

 

 

 

 

 

1.4伪类选择器

什么是伪类选择器？`

         伪类选择器是用来给超级链接的不同状态来设置样式。

超级链接的不同状态

n  正常状态                   超级链接没有被访问   :link

n  访问过后状态         超级链接已经被访问   :visited

n  鼠标放上状态         鼠标放在超级链接上面，但是并没有将鼠标的左键按下去 :hover

n  激活状态                   鼠标左键已经按下去了，但是并没有将鼠标的左键弹出 :active

伪类选择器都是带有冒号“:”

:link

:visited

:hover

:active

注意：

         超级链接的不同状态它其实是有顺序。也就是说伪类选择器设置其实是有顺序。

         如果不按照伪类选择器的顺序，那么样式就会失效。

         顺序：要遵守“爱恨准则”要先有爱，才有恨。“Love Hate”

1.4.1超级链接的美化

我们通常会去掉超级链接的下划线，然后同时会给超级链接设置一个颜色。

一般情况下：

         正常状态与访问过后的状态的样式设置为一样

         当鼠标放上的时候给其设置另外一个颜色  激活状态一般不会设置  因为激活状态的时间太短 

举例：

         a:link,a:visited{去掉超级链接的下划线;设置一个颜色;}

         a:hover{设置另外一个颜色;增加一张下划线;}

1.5属性选择器

什么是属性选择器？

l  属性选择器它是与标签的属性名和属性值有关。

l  属性选择器是通过标签的属性名和属性值来匹配元素。

attr是英文单词“attribute”的简写，中文意思“属性”  属性名

val是英文单词“value”的简写，中文意思是“值”      属性值

l  [attr]  匹配指定的属性名的所有元素

l  [attr=val]  匹配属性等于指定值的所有元素

l  [attr^=”val”]    匹配属性以指定值开头的所有元素

l  [attr$=”val”]   匹配属性的值以指定值结束的所有元素

l  [attr*=”val”]    匹配属性中包含指定值的所有元素

二、列表样式属性

这里的列表指的是：无序列表和有序列表

因为在整个网页布局中无序列表是使用的最多的。

list-style-image：将列表前面的项目符号设置为一张图片   它的值是：url(图片的地址)

list-style：这个属性是一个简写属性 它集成了上面三个属性的功能。可以同时设置上面的三个属性。每一个属性值之前使用空格分隔！ 它的属性值可以有一个也可以有两个也可以三个。其属性值个数不定，位置也不定！

三、列表样式属性案例

CSS代码：

HTML代码：

效果图：

四、继承性

特点：

         1、外层元素身上的样式会被内层元素所继承。

2、如果内层元素与外层元素身上的样式相同时，外层元素的样式会被内层元素所覆盖。

 

问：是不是所有的样式都能够被继承呢？

答：并不是所有的样式都能够被继承。只有文本与字体样式属性能够被继承。其它的样式属性都不可以被继承。

 

注意：

         在实际工作中，我们往往会给body标签设置字体大小以及字体颜色。因为body标签是最外层的元素，内层的元素会继承外层的元素的样式。

五、优先级

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

一般而言，选择器指向的越准确，优先级就会越高。通常我们会用1来表示标签选择器的优先级，用10来表示类选择器的优先级，用100来表示ID选择器的优先级，用1000来表示行内样式。

 

标签选择器              1

类选择器                   10

ID选择器                  100

行内样式                   1000

 

值越大表示其优先级越高。

不管是单个选择器还是多个选择器组合它们之前的优先级都可以通过上面这个公式来进行计算。我们将其值称之为权重值。权重值越大就表示其优先级越高。

六、!important属性

6.1什么是important

         important在英文中含义是“重要的”意思

6.2!important在CSS中的作用

         它主要是用来提升属性的权重。其属性的权重值无穷大

6.3语法格式

属性:值 !important;

 

一定要注意!important的语法规则：

Ø  正确的写法

n  属性:值 !important;

Ø  错误的写法

n  属性:值;!important;   不能将!important写在分号的外面  一定要写在分号的里面

n  属性:值 important;   不能将!给忘记了。

 

 

使用!important一定要注意以下几点：

1、!important它是提升的属性的权重，而不是提升选择器的权重！

上图的效果：文本的颜色是听加了!important的属性，文本的大小是听ID选择器的 因为!important它只提升了属性的权重并没有提升选择器的优先级。

2、!important它不能提升继承过来的权重！

七、一个标签内可以携带多个类名

类名：指的是class的属性值

一个标签内可以携带多个类名，指的是class的属性值可以有多个，每一个属性值之间使用空格分隔。

举例：

         <标签名  class=”值1  值2   值3”></标签名>

 

多个类名的优点：

1.        减少CSS的代码量

2.        多个类名的样式会叠加到当前元素上面

 

注意：

         如果说一个标签内的多个类名，它们设置的样式是一样的话，就会存在样式的冲突！

八、背景样式属性

注意：

l  background-color：用于给元素设置背景颜色  但是前提这个元素要么有内容，要么有宽度和高度才可以

l  background-image  用于给元素设置背景图片  图片的地址一定放在url(图片的地址)   但是前提这个元素要么有内容，要么有宽度和高度才可以  背景图片默认是平铺的

 

l background-repeat是用于设置背景图片是否平铺    repeat(是平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)、no-repeat(不平铺)

 

l  background-position 用于设置背景图片的位置  如果要设置背景图片的位置 这个属性就会有两个值 

l  background-position:水平位置 垂直位置  这两个位置的表示方式有三种  英文单词固定值 百分比   这三种方式可以混合使用可以同时使用英文单词或者是固定值或者是百分比

n  英文单词的表示方式

u  水平位置：left(居左)、center(居中)、right(居右)

u  垂直位置：top(居上)、center(居中)、bottom(居下)

n  固定值的表示方式

n  百分比的表示方式

l background:简写属性 它可以同时设置多个样式  比如背景颜色、背景图片、背景图片是否平铺  水平位置 垂直位置  

l background：简写属性 其值的个数不定 顺序也不定 每一个值之前使用空格分隔

九、背景样式属性综合案例