css

css : 层叠样式表
css的作用 : 给页面添加各种效果: 颜色, 背景, 字体, 布局, 过度效果, 动画...
css语法:

         选择器(1 . 标签选择器  2 . id选择器  3 . 类选择器   4 . 通配符)

         大括号将样式包裹起来

         样式声明可以有多条,  也可以重复,  取最后一个

         css属性 : css属性值

css引入方法 : 

          1 . 行内样式,  使用style属性写标签里面,  优先级最高,  复用性差

          2 . 内部样式,  style标签,  复用性好,  但不能跨页面

          3 . 外部样式,  link标签引入一个css文件,  复用性最好,  可以跨页面

css优先级 : 

         1.浏览器自带

         2.通配符选择器

         3.标签选择器

         4.类选择器

         5.id选择器

         6.行内样式

 

常用单位 :

     字体单位 : px      rem和htlm标签设置的字体大小成正比1rem=16px; 2rem=32px

          html{

                 font-size: 16px;

                 }

     颜色单位 : 1.使用颜色名 red  green  blue  255*255*255个

                       2.16进制表示颜色   #00-ff(红色)00-ff(绿色)00-ff(蓝色)

                       3.rgb(0-255,0-255,0-255)

字体 : font-family 防止字体失效,  设置多个字体,  逗号隔开

     字体斜体 : font-style   默认 : normal    斜体 : italic

     字体粗细 : font-weight  100-900  lighter   bold   bolder

          文本颜色:  color 

                     <h1 style="color: rgb(199,186,126)">一级标题</h1>

          文本居中：text-align left默认 center居中 right居右

          文本修饰：text-decoration underline overline line-through

          文本缩进：text-indent

          文本转换：针对英文字母text-transform

<style type="text/css">
            .font{
                font-family: '黑体';
                font-family: 'Calibri','Arial';
                font-style: italic;
                font-size: 2rem;  /*指48px*/
                font-weight: 200;
            }
                    .text{
                        color: hotpink;
                        color: orangered;
                        color: rgb(226,226,226);
                        /*text-align: center;*/
                        text-decoration: line-through;
                        font-size: 18px;
                        text-indent: 36px;   /*缩进两格18x2*/
                        text-transform: uppercase;  /*全部大写*/
                        /*text-transform: lowercase;   全部小写*/
                        /*text-transform: capitalize;  首字母大写*/
                        display: block;
                    }
</style>

 

背景background

       背景颜色 -- backgound-color : 

       背景图片 -- backgound-image : url(" ");

                背景重复 -- backgound-repeat : repeat;

                            no-repeat,  repeat-x,  repeat-y

                 背景尺寸 -- backgound-size  :100% 100%              

                             100%100%    over(水平适应)     contain(竖直适应)

 

边框border   (宽度,样式,颜色)         默认 : 宽度3px,  颜色黑色

               样式:solid实线   dotted圆点   double双实线   dashed长条虚线

                边框园角 :   border-radius : 50%;

    border : 14px  solid red;

    border-top : 14px  solid red;  (只设置上边框)

 

html元素分类

        1.块内元素  div  li  p  h1-h6     独占一行,  会自动换行,  可以设置高度和宽度

        2.行内元素   span  i  u   不会自动换行,  无法设置高度和宽度

      .box{display: display}设置为块内元素

      .box{display: block}设置为行内元素