CSS基础知识总结

CSS（Cascading Style Sheet）：层叠样式表
作用：CSS 作用就是给HTML页面标签添加各种样式

基本语法

选择器{属性名：属性值 ;}
例子：p{color：red;}
选择器后一定是大括号，属性名后必须用冒号隔开，属性值后用分号，属性名和冒号之间最好不要有空格。

CSS和HTML的结合方式

CSS和HTML的结合方式有3种：

1. 行级样式表

   采用style属性,范围只针对当前标签

<div style = "border:1px solid red ;">大家好</div>

1. 内嵌样式表
   采用<style>标签完成，其范围针对此页面

2. 外部样式表
   采用建立样式表文件，其范围针对的是多个页面
   引入样式表文件的多种方式：

   a、采用<link>标签

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

   b、采用import，必须写在<style>标签中，并且必须是第一

   @import url(a.css) ;

外部样式表中不能写标签,但是可以写import语句。

CSS选择器

1、基本选择器

a.标签选择器:指的就是选择器的名字代表html页面上的标签

        p{            color:red ;            border:1px dashed green;        }

b.类选择器：规定用圆点.来定义，其优点是灵活

     .one{background-color:#ff0099; }

c. ID选择器：规定用#来定义

          #one{cursor:hand; }               

区别：标签选择器针对的是页面上的一类标签，类选择器可以供多种标签使用，ID选择器是值供特定的标签(一个).，并且ID是此标签在此页面上的唯一标识。

d:通用选择器： 用*定义,代表页面上的所有标签。

        *{                font-size:30px;                margin-left:0px;                margin-top:0px;        }

2.扩展选择器

a. 组合选择器:采用逗号隔开

p,h1,h2,.one,#two{color:red ; }

b. 关联选择器(后代选择器): 采用空格隔开，表示h4标签中的span标签中的i标签的样式，h4和span和i标签不一定是紧挨着的。

h4 span i{color:red ; } 

c. 伪类选择器

1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接。
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色。

a:link{color:red ;}a:visited{color:yellow;}

注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)。

2) :动态伪类 : 针对所有的标签都适用
:hover : 是移动到某个标签上的时候
:focus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时

label:hover{color:#00ff00; }input:focus{               background-color:#ff9999;               border:1px solid red;            }    a:active{                color:blue;            }

CSS各种选择器的冲突

CSS不同层级的样式表相互冲突的时候，遵循下面的规则：

1.ID选择器 > 类选择器 > 标签选择器

2.行级样式表 > 内嵌样式表 > 外部样式表

3.样式表的ID选择器 > 内嵌样式表的标签选择器

原则： 就近原则。

CSS的各种属性

CSS的单位:
a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡
b. 相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字)

字体设置

     p{        font-size:50px;    /*字体大小*/        font-style:italic ;  /*斜体*/        font-weight:bold;  /*粗体*/        font-family:幼圆;  /*字体类型*/        font-variant:small-caps;  /*小写变大写*/      }

文本设置

    p{         letter-spacing:0.5cm ; /*字母间距*/        word-spacing:1cm;   /*单词间距*/        text-align:center;   /*在所包含容器的中间*/        text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/        text-transform:lowercase;  /*单词字体大小写*/        color:red ;    }

背景设置

body{        background-color:#ff99ff ;  /*背景颜色*/        background-image:url(images/2.gif) ; /*背景图片*/        background-repeat: no-repeat;  /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/        background-position:center right; /*背景位置*/        background-attachment: scroll ;           /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/    }

列表设置

ul li{        list-style:none;    /*列表前样式*/        list-style-image:url(images/2.gif) ;  /*列表项前图片*/        margin-left:80px;       }

盒子模型(border margin padding)

         padding:是内容到边的距离         border: 是边的粗细         margin:是控件到控件的距离

定位设置(position,float,clear,z-index)

    #d{        position: absolute;            /*        1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流        2.相对定位: 相对的是自己在顺序流中原来的位置        */        left:100px;    /*横坐标*/        top:100px;     /*纵坐标*/        border:1px solid red ;          width:100px;        height:100px;        background-color:#ff66ff;      }    #d1{        position: relative;    /*相对位置*/        left:100px;        top:100px;        border:1px solid green ;        width:100px;        height:100px;        background-color:#339900;      }    span{        position: relative;        left:20px;        top:20px;      }

以上只是基本介绍，还有很多深入的内容需要大家通过学习去掌握，CSS是网页设计的基本功，尽管作为后端开发人员，对网页相关的知识要求不高，但是基本的知识还是要牢牢掌握的，希望这便简单的文章能使大家对CSS有基本的理解。感谢阅读！！