font属性+ul列表+table属性+border属性

Posted 2020-10-11 凯迪威

1. font-family   定义文本的字体系列

   
   如：div{ font-family:"黑体";}  /*可以添加样式*/

2. 文本字体大写字母
   

   font-variant 属性可以设定小型大写字母
   如：hello==》      HELLO   

    

3. 文本字体粗细

   font-weight 属性设置文本的粗细。
   bold-文本字体加粗
   lighter-文本字体变细
   数值：100—900是由细变粗

   4.文本字体风格

   font-style  定义字体的风格(最常用于规定斜体文本)。
     该属性有三个值：
       normal - 文本正常显示
       italic - 文本斜体显示
       oblique - 文本倾斜显示
     通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

    

   5.font-size 属性设置文本的大小

      
      注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素       
              (16px=1em)。
      可以使用下面这个公式将像素转换为 em：pixels/16=em
       （注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公 
          式  需 改为：pixels/20=em）
       注意：通过像素设置文本大小，可以对文本大小进行完全控制

    

    6.ul列表

  list-style        简写属性。用于把所有用于列表的属性设置于一个声明中。
  list-style-image     将图象设置为列表项标志。
  list-style-position     设置列表中列表项标志的位置。   
  list-style-type      设置列表项标志的类型
   ul {list-style-type : square}
   ul li {list-style-image : url(xxx.gif)}
   上面的可写成下面这种：
   li{list-style : url(example.gif) square inside}

 

7.table表格

表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
   如果需要把表格显示为单线条边框，请使用 border-collapse 属性
       border-collapse 属性设置为将表格边框折叠为单一边框.
格式如下：
 table
  {
   border-collapse:collapse;
   }

 table,th, td
  {
  border: 1px solid black;
 border-collapse     设置是否把表格边框合并为单一的边框。
 border-spacing     设置分隔单元格边框的距离。
 caption-side     设置表格标题的位置。
 empty-cells     设置是否显示表格中的空单元格。
 table-layout     设置显示单元、行和列的算法。
 th
  {
  background-color:green;
  color:white;
  } 
 /*单元格th整个填充为green，里面的字体是白色*/

 outline     在一个声明中设置所有的轮廓属性。     
 outline-color     设置轮廓的颜色。 
 outline-style     设置轮廓的样式。
 outline-width     设置轮廓的宽度。

 

8.border 属性

border     简写属性，用于把针对四个边的属性设置在一个声明。
border-style     用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width     简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color     简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom     简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color     设置元素的下边框的颜色。
border-bottom-style     设置元素的下边框的样式。
border-bottom-width     设置元素的下边框的宽度。
border-left     简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color     设置元素的左边框的颜色。
border-left-style     设置元素的左边框的样式。
border-left-width     设置元素的左边框的宽度。
border-right     简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color     设置元素的右边框的颜色。
border-right-style     设置元素的右边框的样式。
border-right-width     设置元素的右边框的宽度。
border-top     简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color     设置元素的上边框的颜色。
border-top-style     设置元素的上边框的样式。
border-top-width     设置元素的上边框的宽度。