CSS层叠样式表的学习

能通过<div id="" class="">布局
控制样式漂亮的排版方式——css

---

重要的 point

1. <div>是块级元素，一个<div>就是一行
2. <span>是行内元素，每个<span>中间空一格

---

内联样式

div：
    style:
        color:
        border-style:`solid实现` `dashed虚线`
        border-color:
    >>>精简：宽度 线体样式 颜色
        border：1px dashed skyblue;

外部引用

demo.html:
    html>head:
        link:
            rel:"stylesheet"
            href:"demo.css"

内部样式表

demo.html:
    html>head>style:
<!--常见标签选择器-->
        #divid{
   border：1px dashed skyblue;}`id选择器`
        div{}`标签选择器`
        .divclass{}`类选择器`
        #divid span{color:red;}
        #divid .inner-span{
   color:yellow;} 中间有空格
        p.con{
   }交集选择器 中间没有空格
        a,#id{
   }b并集选择器 用，
        *{
   }通配符选择器 一般用于全局去边距
        a:hover{
   }伪类选择器 鼠标放上去才有反应
<!--常见文字属性-->
        .font-size{
            font-style:italic
            font-weight:`字体粗度区间100-900`默认值：400 bold 700 
            font-size:16px 最小12px
            font-family:"新宋体"
    >>>精简： {font-style} {
   font-weight} font-size font-family
            font: 600 20px "新宋体"

            text-align:right; 文本对齐
            text-indent:2em; 首行缩进