css基础知识，圆角

css基础知识

标记：

• 单标记：某些标记称为"单标记"，因为它只需要单独使用就能完整地表达意思；
• 双标记：双标记由"始标记"和"尾标记"两部分构成，必须成对使用。

标记属性：

1. 许多单标记和双标记的始标记内可以包含一些属性
2. 语法如下：<标记名字 属性1 属性2 属性3……>
3. 各属性之间无先后次序，属性也可以省略。
4. 所有标签都具有id（唯一名）、class（类名）、title（标题）、style（行内样式）属性

引入方法：

1.嵌入式  <style type = “text/css”>要写的样式</style>

2.外联式  <link rel="stylesheet" type="text/css" href="css/common (2).css">

3.行内式(主要用于JS控制元素的样式)：style="color:red;"

文字样式：

• 文本缩进：text-indent:2em（em是使用当前元素父元素的字体大小（font-size）的倍数计算的单位，2em就是2倍父元素字体大小）
  
• 文本对齐方式：text-align（left（左）, right（右）, center（居中）, justify（两端对齐，一般英文较多使用））
  
• 字间距：letter-spacing:0.5em/2px，单词之间用空格分开，单词之间的间距 = word-spacing + 空格大小

• 文本转换：text-transform 文本转换用于处理英文的大小写转换(uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) )
• 文本装饰：text-decoration（underline（下划线）, overline（上划线）, line-through（线穿过/中划线））

首字缩进练习：

<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

div{
    width: 200px;
    border: 1px solid black;
    text-indent: 0.5em;
	color:#3FF
}
div:first-letter{
    font-size: 30px;
    float: left;
}  

圆角

border-radius：圆角
1-4个数字 / 1-4个数字：/前面是水平方向圆角，后面是垂直方向圆角，不加/指的两个方向圆角相同，如：

    border-radius: 10px/5px;

参数：各种长度单位都可以：px，%，…，%有时很方便，但宽高不一致时不太好
参数个数1：四个方向都一样，border-radius: 一样
参数个数2：对角，border-radius: 左上&右下 右上&左下
参数个数3：斜对角，border-radius: 左上 右上&左下 右下
参数个数4：全部，顺时针，border-radius: 左上 右上 右下 左

圆形的练习：

div{  
    width:50px;  
    height:50px;  
    background-color:#F9C;  
    border-radius:50%;  
}  

椭圆的练习：

div{  
    width:50px;  
    height:50px;  
    background-color:#F9C;  
    border-radius:50px 0px;  
}