css常用样式

字体样式


字体大小:font-size:25px

字体加粗:font-weight:normal(正常400)   bold(加粗700)

字体倾斜:font-style :normal 正常(默认值)   italic 倾斜


字体样式:font-family

常见取值: 具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列具体字体:“Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等......字体系列: sans-serif、serif、monospace等......


属性名: font (复合属性)取值:  font : style weight size family;





文本样式

1.文本缩进:text-indent:12px  | 1em

2.文本水平对齐方式:text-align:left  |  center  |   right    如果需要让文本水平居中,text-align属性给文本所在标签 (文本的父元素)设置


text-align:center 能让哪些元素水平居中

1.文本

2.span标签、a标签3. input标签、img标签




3.文本修饰: text-decoration


属性值

underline 下划线(常用)

line-through 删除线(不常用)

overline 上划线(几乎不用)

none 无装饰线(常用)

开发中会使用 text-decoration:none;清除a标签默认的下划线








 line-height行高

line-height:25px | 1em


颜色取值

1.png



2.png




css选择器


1、复合选择器

        后代选择器    用空格隔开、儿子、孙子、重孙

        子代选择       用 >符号隔开    只能选择儿子

2、并集选择器      同时选择多组标签,设置相同的样式  用,符号隔开

3、交集选择器      同时满足多个交集条件、例如 p.box{}   选择p标签、并且class属性为box的

4、hover伪类选择器

  例如 鼠标悬停 a:hover{

         }

任何一个标签都可以添加伪类选择器

1.png



2.png


背景

      /**背景颜色 */

    background-color: #fff;

    background-color: rgba(red, green, blue, alpha);


    /** 背景图片 */

    background-image: url('');




        /**

            repeat (默认值)水平和垂直方向都平铺

            no-repeat 不平铺

            repeat-x 沿着水平方向(x轴)平铺

            repeat-y  沿着垂直方向(y轴)平铺

        */

    background-repeat: no-repeat;



    /**

        水平方向  left  center  right

        垂直方法  top   center bottom

        或者数字、x  y  

        */

    background-position:  50px 25px;



    /**复合属性

        推荐顺序: background: color image repeat position

        不分先后顺序

    */

    background: #000 url('') no-repeat 50px 25px ;



        /**


        1、块级元素  div、p、h系列、ul、li、dl、dt、 dd、 form、header、 nav、 footer.....  

        显示特点

            1.独占一行(一行只能显示一个)

            2.宽度默认是父元素的宽度,高度默认由内容撑开

            3.可以设置宽高




       

        2、行内元素   a、span 、b、u、i、s、strong、ins、em、del.....

        显示特点

            1.一行可以显示多个

            2.宽度和高度默认由内容撑开

            3.不可以设置宽高




        3、行内块元素    input、 textarea、button、 select......特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline

        显示特点:

            1.一行可以显示多个

            2.可以设置宽高

               



        4、元素显示模式转换    改变元素默认的显示特点,让元素符合布局要求

            display: block 转换成块级元素 较多

            display:inline-block 转换成行内块元素 较多

            display:inline 转换成行内元素 极少

        */




        /**

        继承性的介绍

            特性:子元素有默认继承父元素样式的特点(子承父业)可以继承的常见属性(文字控制属性都可以继承)

            color  font-style、 font-weight、 font-size、 font-family3. text-indent、text-align4. line-height ...

            注意点 可以通过调试工具判断样式是否可以继承





        (拓展)继承失效的特殊情况

            如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式

                a标签的color会继承失效

                h系列标签的font-size会继承失效

        */






*变成CSS3的盒子模型,好处: 加了border和padding不需要手动减法 *

box-sizing: border-box;






6.png