Web基础 网页的血肉CSS

什么是CSS

层叠样式表:Cascading Style Sheets

这都不重要,重要的CSS决定了如何显示HTML元素

基本结构

选择器 + 样式(key:value)

p{

 color:red;

   font-size:20px;

}

使用CSS

     1.引入外部.css文件

     2.在head中定义css

     3.在元素中使用内联css

常用选择器

    .元素名

    .id

    .class

   .后代选择器

   .子元素选择器

   .相邻兄弟选择器,普通相邻兄弟选择器

   .伪类

常用样式

背景:backgrounp-color,backgrounp-image,backgrounp-repeat,background-size,backgrounp-attachment,backgrounp-position

大小:width,heigth

大小单位:px,%,em

文本:color,text-align,text-decoration,text-indent,line-height,font-size,font-family

留白:margin,padding

边框:border,border-radius,box-shadow

显示:display

定位:static,fixed,relative,absolute,float

CSS注释

/*这是一个注释*/

CSS3

新属性:渐变,tranform(translate,rotate,scale,skew,matrix),transition,animation(keyframes)

 

实例

美化一个button,添加hover动画效果

http://www.runoob.com/css/css-examples.html

相关文章