字体 ，文本，边框，列表，表格 的样式

字体样式
font-family  字体类型    字体类型只有一个英文单词无需加引号，如果是多个英文单词或是中文 则需要加上引号
                                        中文比较美观的字体 微软雅黑和宋体，英文有Times New Roman ,Arial，Verdana
                                       可以设置多种类型 p{font-family:Arial,Verdana,Goorgia;},
                                       这是因为每个人电脑安装的字体都不一样，字体以此类推 如果都没有设置的字体，就默认宋体字体显示

font-size      字体大小   font-size=像素值 ，属性取值有2种，关键字和像素值  ，在实际中关键字基本不会用，像素值常用
                                      px:像素是一张图片中最小的点，或是计算机屏幕中最小的点，如图表放大n倍后就会变成一个一个小方点
                                      一台计算机的分辨率是800px *600px 指的是计算机宽是800个小方点，高是600个小方点
                                      px是相对单位，因为屏幕分辨率的不同，1px的大小也是不同的, 如果不考虑分辨率，就可以把px看成是绝对单位
                                     初学：可把1px看成一个小点，多少px就可以看成由多少个小点组成


font-weight  字体粗细  bold值经常用到
font-style     字体风格  默认normal ，italic 和oblique 后面两个都是斜体，有的字体有斜体italic属性，有些字体没有斜体italic属性，没有斜体属性的可以用oblique来实现斜体效果
color            字体颜色 关键字，和16进制RGB值（用在线工具，调色板）  #FFFFFF 白色    #000000 黑色

浏览器解析css是有一定顺序的，在下面这个例子中 第二个p元素 一开始就使用元素选择器定义了一次color:red ,
然后用id选择器定义了一次color:blue ,后面的会覆盖前面的，最终显示蓝色

 <style>
        /* 元素选择器，定义所有的p元素 字体颜色为红色 */
        p{
            font-weight: bold;
            font-family: "微软雅黑";
            font-size: 14px;
            color:red;
        }

        /* id选择器，定义个别样式，字体变为蓝色，后面的蓝覆盖前面的红，其他不变 */
       #p2{color:blue;}

    </style>
    

    <p id="p1">HTML控制网页的结构</p>
    <p id="p2">CSS控制网页的外观</p>
    <p id="p3">JavaScript控制网页的行为</p>

 

 

css注释 和html一样，是为了提高代码的可读性和可维护性

---

文本样式
字体样式注重个体，文本样式注重整体

首行缩进   text-index ：像素值          
中文段落首行缩进需缩进2个字符，实现这效果text-indent值应该是font-size值的2倍


水平对齐   text-align：取值； left right  center   
实际中常会用到center
这个属性不仅对文本有效，对图片img也有效  图片的水平对齐


文本修饰 text-decoration:取值； 
none:去除所有的划线效果(默认值）
underline:下划线
line-through:中划线
实际中的用途
1, text-decoration:none   去除a元素的下划线
2，text-decoration:underline  ,下划线，强调文章中的重点
4，text-decoration:line-through  中划线，在电商网站 一般用于促销


大小写 text-transform：取值；
none:无转换（默认值）
uppercase  转为大写
lowercase   转为小写
capitalize   只把每个英文单词首字母转换为大写

行高line-height
控制每行文本的高度，（行高，顾名思义：一行的高度）而行间距指：两行文本之间的距离  这两个是完全不一样的概念


间距 letter-spacing  和 word-spacing  （一般这两个只会用于英文 网页）
letter-spacing :像素值   调整两个字之间的距离
注：每一个中文汉字都被当成一个 “字” ，而每一个英文字母也当做一个 "字"
word-spacing：像素值    定义两个单词之间的距离  
单词间距，这个属性只针对英文单词而言的

  <style>
        div{
           border:solid red 1px;
        }
        .p1,.p2{
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
        }
        .p1,.p2{
            text-indent: 36px;/* 首行缩进 */
            line-height: 28px;/* 行高 */
            letter-spacing:2px;/* 词间距 */
        }
        .p1 span{/* 给span里的元素,加上自重 下划线 */
            font-weight: bold;
            text-decoration: underline;
        }
       
       .p2{/* 英文字母全部转为大写 */
           text-transform: uppercase;
       }
    </style>
    

    <div>
          <p class="p1">
            上边这个定义中“形成或表达特定主题”这个修饰性成分绝不可省，因为它揭示了材料的自身
            规定性——与主题的相对性或相互依存关系。材料，<span>特定主题</span>的材料。换言之，只是在与
            特定主题的对立联系中，特定的“信息”（感知和理念）才称之为材料。因此，在此篇为材料者
            在彼篇可以是主题；在此篇为主题者，也可以是另一篇另一主题的 
           </p>
           <p class="p2">Remember:no pain ,no gain!</p>
    </div>

 

 

 

---

边框样式
border-width:1px;
border-style:solid;
border-color:red;
简写形式 :border:1px solid red;

边框局部设置样式
上边框：border-top
下边框：border-bottom
左边框:  border-left
右边框:  border-right
不管整体样式还是局部样式，都需要设置3个方面：边框宽度，边框外观，和边框颜色

把某一局部边框去除样式，如border-bottom:0px; 下边框就去除了
border-bottom:0px; border-bottom:0;  和border-bottom:none 这三个是等价的

div{
          width: 100px;
          height: 60px;
          border:solid red 2px;
          border-bottom:0px;
      }

   <div></div>

 

 

 

---

列表样式
不管是有序列表还是无序列表都是使用 list-style-type:取值；来定义列表项目符号
如无序列表的取值有，disc实心圆   circle空心圆    square正方形
记住：list-style-type:none；是去除列表项目符号，自带的丑或无需项目符号的 就去除掉

列表项图片 （来代替列表项目符号）
list-style-image:url(图片路径）；实际就是列表项目符号改为图片，
实际中不会用list-style-image 来实现，而是用字体图标技术来实现

---

表格样式
表格标题位置 caption-side:top / bottom  ,在table或caption这两个元素定义这个属性都是可以的，一般都在table里定义即可
表格边框合并 border-collapse:separate / collapse   边框分开有空隙 / 边框合并无空隙     这个属性也在table元素中定义
表格边框间距 border-spacing:像素值；这个属性也在table元素中定义

 <style>
        table{
            caption-side: bottom;
           border-collapse: collapse;/* 合并边框 */
           /*  border-spacing: 10px; *//* 设置边框间距 */
        }

        table,tr,td,th{
            border:solid red 2px;
        }
     
    </style>
    
</head>
<body>
    <table>
        <caption>成绩表</caption>
        <!--表头 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>总成绩</th>
            </tr>
        </thead>

        <!-- 表身 -->
        <tbody>
            <tr>
                <td>小小</td>
                <td>60</td>
                <td>60</td>
                <td>120</td>
            </tr>
            <tr>
                <td>小小</td>
                <td>60</td>
                <td>60</td>
                <td>120</td>
            </tr>
            <tr>
                <td>小小</td>
                <td>60</td>
                <td>60</td>
                <td>120</td>
            </tr>
        </tbody>
    </table>

 

 

 

---

图片样式

 

 

来源：https://www./content-4-806151.html