笔记5--CSS基础知识

上接笔记4-Css基础知识

1.3尺寸大小

cm：厘米

mm：毫米

in：英寸（inch）

px：像素（pixel）

%：百分比

em:<em> 标签告诉浏览器把其中的文本表示为强调的内容。

vw和vb:vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。

1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。

px：绝对单位，%相对尺寸单位。

哪些是绝对单位，那些是相对单位？

绝对单位：用基本量(例如长度、时间、质量及电荷或电流)的单位所规定的单位,称为绝对单位。这些单位在任何时刻、任何地点都取固定的数值。

相对单位：以基本量作为参考值，根据这个参考值来使用单位，称为绝对单位。

 

2基础属性

属性名：属性值：

background-color：red

p{

background-color：red；

font-size：24px；

}

 

2.1字体属性

font-family：字体名称

font-size：字体大小

font-style：字形(斜体等)

font-variant：字体变化（如大写）

font-weight:字体粗细

<style type="text/css">
    td{
        font-size:60px;
        width:300px;
        height:200px;
        text-align:justify;
        vertical-align:middle;
    }
</style>

 

可以简写：

Font-style font-variant font-weight font-size font-family

前面三个可省略，使用默认值，font-size和font-family必须指定值。

这种书写方式更加简洁

P{

font:60px宋体;

}

2.2文本相关属性

文本相关属性主要包括颜色、对齐方式，修饰效果等。

color：设置文本的颜色

 

text-decoration：

默认值：none，没有装饰效果

下划线：underline

overline：上划线

line-through：删除线

text-shadow：增加阴影

例如：

text-shadow:5px10px gray;

这条代码的含义是：定义一个灰色的背景，其水平方向向上左移5px，垂直向上上移10px。

第一个参数定义水平方向，第二个定义垂直方向。

正负值方向相反。

direction： rtl从左到右

                      ltr从右到左

text-align： right右对齐

     left左对齐

     center居中

     justify两端对齐

 

 

 

vertical-align：文本垂直对齐方式： top靠上对齐

     bottom靠下对齐

     middle垂直居中对齐

    text-indent：文本缩进

    lettrt-spacing:字符之间的距离

    word-spacing:单词(字）之间的距离

 

   line-leight：设置行高，实际上是调整行间距