css样式，文本属性，列表属性，背景属性（学习笔记

文本属性

字体，大小

  .p1{

            /* font-size: 16px;浏览器默认字体大小 */

            font-size: 16px;

        }

        .p2{

            /* font-family:;字体必须浏览器支持才能使用 */

            font-family: monospace;

        }

颜色

  /* .p1{

            color:aqua;

            基础写法

        } */

        .p1{

            color:rgb(0, 255, 0)

            /* rgb写法 */

        }

        .p1{

            /* 十六进制写法 */

            color: #000ff0;

        }

加粗，倾斜

 .p1{

            /* 100 细体   light

            400 正常      normal

            700 加粗      bold

            900 更粗体    bolder*/

            font-weight: 700;

            /* 加粗 */

            font-style: italic;

            /* italic 倾斜

            oblique 更倾斜

            normal  正常 */

        }

水平垂直，居中

 /* left,center,right */

            text-align : center ;

  text-align: justify;

            /* 两端对齐,多行文本用 */

  line-height: 500px;

           /*line-height = height

            字体高度和行高设置一样大就会居中显示 */

               text-align: center;

            width:500px;

文本间距

 /* 文本间距：词间距，字符间距 */

        .p1{

            letter-spacing: 10px;

            /* 字符间距：（文字的间距） */

         word-spacing: 10px;

            /* 词间距

            取负值往左边走，会重合*/

        }

首行缩进（css）

  1，font-size: 20px;

            /* text-indent: 40px; */

          2，  text-indent: 2em;

            /* 2em == 此时字体单位*2，

            只对首行生效 */

文本修饰

   /* text-decoration:文本修饰 */

            text-decoration: underline;

            /* 下划线 */

            text-decoration: line-through;

            /* 中划线 */

            text-decoration: overline;

            /* 上划线 */

            /* 显示多个要用空格隔开，不然只显示最后一个

            text-decoration: underline line-through overline; */

            text-decoration: none;

            /* 可以在取消a标签里面的下划线

            没有线 */

检索字母大小写：text-transform

  /* 检索大小写：text-transform */

            /* text-transform: capitalize; */

            /* 单词首字母大写 */

            /* text-transform: lowercase; */

            /* 全字母小写 */

            text-transform: uppercase;

            /* 全字母大写 */

            /* text-transform: none; */

            /* 没有任何效果 */

文本属性简写

 font:    italic        bold        20px/1em                微软雅黑 ;

font:  font-style   font-weight   font-size/line-height   font-family ;

            /* font标签的顺序不能变

            必须同时指定 font-size和font-family 该font属性才起作用*/

列表属性

 list-style-type: disc;

            /* 控制列表前面的样式 */

            /* disc 实心圆

            circle 空心圆

            square  实心方块

            none 不显示东西 */

  list-style-image: url(img/梅琳娜.png);

            /* 用图片代替原本的样式

            不一样的图片要用选择器链接 */

            list-style-position: outside;

                /* 列表标记的放置位置

            outside 外面

            inside 里面  */

背景属性

   background-image:url(从雨.jpg);

            /* 背景图片 */

            background-repeat:no-repeat;

            /* repaet 默认平铺

                repaet x轴平铺

                none repeat 不平铺*/

                background-position: center center;

                /* 图片位置 */

                background-size: cover;

                /* {

                    背景图片大小

                    1 1600px 900px

                    2 100% 100&

                    3 cover 等比放大 ,使背景图覆盖背景区域，可能会裁掉一部分

                    4 contain 图像图形夸大至最大尺寸，

                    使其高度和宽度完全适应内容区域，铺不满留白

                } */

                background-attachment: fixed;

                /*  fixed 固定背景图片

                    scroll 滚动（默认）

                固定之后相当于浏览器窗口，固定在浏览器窗口里面 */