导航

关于CSS学习的第一章

Posted on 2016-10-22 22:16  杜飞不飞  阅读(170)  评论(1编辑  收藏  举报

1、CSS三种书写的方式:嵌入式、外链式、行内式

嵌入式就是将CSS写入在<style></style>

外链式将外面的CSS文件通过HTML中的标记链接过来:<link  rel=”stylesheet”  type=”text/css”  href=”外部CSS文件的地址” />

行内式:就是将CSS代码写在<标记  style=”CSS代码” />

2、CSS选择器:基本选择器、复合选择器、伪类选择器、属性选择器

  基本选择器又分为:通用选择器、标签选择器、ID选择器、类选择器

    通用选择器:*{声明语句;声明语句} 它给HTML中的所有的标记设置样式,会增加大型网站的负担,不建议使用。

    标签选择器标签名{声明语句; 声明语句;}  

    类选择器:.class的属性值{声明语句; 声明语句;} 常用

    ID选择器:#id的属性值{声明语句;}

  复合选择器又分为:组合选择器 :选择器1,选择器2,选择器3,选择器n{声明语句;声明语句}同时去给列表中的选择器来设置样式

           后代元素选择器:祖先元素  后代元素{语句1;语句2;}匹配祖元素下面的指定的所有的后代元素设置样式

           子元素选择器父元素 >  子元素{语句1;语句2;}匹配父元素下面的指定的子元素给其设置样式

           相邻元素选择器:E + F{格式声明语句;}匹配E元素下面的F元素,两个元素必须是紧挨着

  伪类选择器是用来给超级链接的不同状态来设置样式:a:link,a:visited{设置超级链接的颜色;去除下划线;} 设置访问前和访问后的状态

                          a:hover{设置超级链接的颜色;}设置鼠标放上的状态

3、列表样式属性:list-style-type  修饰列表前的项目复合 :none(无)、disc(实心圆)、circle(空心圆)、square(小方块)

        list-style-position 设置列表前符号的位置:inside(在里面)、outside(在外面,默认值)

        list-style-image 将列表前符号设为图片:list-style-image:url(图片路径)

        list-style   简写属性:list-style:none  url(图片路径)  inside

4、继承性和优先级:行内样式>ID选择器>类选择器>标签选择器

5、!important :提升属性的权重值无穷大    格式:属性:属性值 !important;     IE6浏览器不支持

6、背景样式属性:background-color设置背景颜色;background-image设置背景图;,background-repeat设置背景图片状态:no-repeat(不平铺)、repeat-x(水平方向平铺)、

         repeat-y(垂直方向平铺); background-position:水平位置或垂直位置(设置图片位置) 有3种表达方式:英文单词、固定值、百分比 ;

        background : 简写属性,可以有多个值,(要给一个元素设置背景颜色和背景图片 前提条件是这个元素要有高度和宽度或者是内容。