CSS入门

一、div和span

1.div和span没有任何效果
2.divhe span可以嵌套学过的任何标签
3.一般在工作中div和span配合css设置样式使用

4.div和span区别

div是行级别，一个div占用一行
span是块级别，行内标签

<div>div<br>div</div>
    <div>div</div>
    <div>div</div>

    <span>span</span>
    <span>span</span>
    <span>span</span>

二、css写法分类

1、行内样式

<标签 style="css属性名字: 属性的值; css属性名字: 属性的值;"></标签>

<div style="width: 100%; height: 50px; background-color: blue;">太阳娱乐城开业啦</div>

2 内嵌样式

写在标签内

 <style>
        div{
            width: 100%;
            height: 50px;
            background-color: red;
        }

    </style>
</head>
<body>
    <div>旭日初升</div>

三 css选择器

用来确定css样式覆盖的范围使用

1.Id选择器
禁用，id有一个特性（有唯一性）,以后是给js使用

用法：#id值{
                  样式属性
              }

例子

    #mydiv{
           width: 100%;
           height: 50px;
           background-color: rgb(48, 54, 49);
       }

   </style>
</head>
<body>
   <div id="mydiv">茕茕孑立</div>

2、类选择器

2.1 class属性是CSS中的通用属性，给标签定义class属性，类选择器再使用class属性值；
2.2 选择器器名前面有一个点【.】；
2.3 不同标签可以采用相同的class值；

用法：

    .class值{
                    样式属性    
                }

例子：

 .mydiv{
           width: 100%;
           height: 50px;
           background-color: rgb(30, 230, 63);
       }

   </style>
</head>
<body>
   <div class="mydiv">长风破浪</div>

3标签选择器

    标签名{
                    样式属性 
                }

##4 通用选择器

可以选择到所有的标签元素，使用*作为选择器名称，语法：

    *{
                    样式属性 
                }

四、字体样式

属性名字	效果	取值与单位
font-size	字体大小	数字+px（谷歌浏览器默认文字大小是16px）
font-weight	字体粗细	100~900整百数/关键字（normal-正常对应400 bold-加粗对应700）
font-style	字体样式	normal-正常 italic-倾斜
font-family	字体类型	微软雅黑, 黑体, sans-serif，或者其他字体系列
font属性连写	字体类型	font : style weight size family;只能省略前两个，如果省略了相当于设置了默认值

     <style>
        .class值{
            /*字体大小  */
            font-size: 40px;
            /* 字体粗细 */
            font-weight:900;
            /* 字体倾斜 */
            font-style: normal;
            font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;;
        }

        .class值{
            /* 完整写法 */
            /* font:normal 700 25px Microsoft YaHei ; */
            /* 简写 省略 倾斜与 加粗效果 */
            font:16px Microsoft YaHei ; 
        }
    </style>

五文本样式

属性名字	效果	取值与单位
text-indent	字体缩进	数字+px/数字+em（推荐：1em = 当前标签的font-size的大小）
text-align	水平对齐方式	对内容位置调整，进行居中center，靠左left和靠右right展示
text-decoration	文本修饰	underline下划线/line-through删除线/overline上划线/none无
line-height	设置字体的行高	取值为px

1.字数缩进
例子：

    <style>
       p{
           text-indent: 2em;
       }

   </style>
</head>
<body>
   <h>英国公</h>
  <p>正德十六年</p>

2.行高

<style>
        p{
           line-height: 50px;
        }

    </style>
</head>
<body>
    <p>英国公张甫死于土木堡</p>
   <p>正德十六年</p>

3、添加删除线

        <style>
     .price{
        text-decoration: line-through;
     }
    </style>
</head>
<body>
   <div class="price">
    原价1999
   </div>

4.字体居中

     <style>
     .price{
        text-align: center;
        width: 200px;
        height: 100px;
        background-color: #21be2e;
     }
    </style>
</head>
<body>
   <div class="price">
    原价1999
   </div>

##六、背景相关样式

标题	效果	取值与单位
background-color	背景颜色	rgb,十六进制
background-image	背景图片	url(图片地址)
background-size	背景的缩放模式	cover:图片放大填充整个盒子，可能看不到部分图片 contaion:图片放大填充整个盒子，宽高一边填充结束，可能留白
background-position	图片的位置	left/right/center/top/bottom或者也可以通过数字+ 像素默认例如：background-position: 0,0;
background-repeat	背景平铺	repeat:平铺，默认；no-repeat：不平铺，留空；repeat-x：水平平铺；repeat-y：垂直平铺
bakeground-attachment	背景图片固定	fixed

03day-css入门