CSS练习手册

注释的写法

	直接ctrl + / 

css三种写法

1.写在标签里头

特点：

• 添加style属性
• 属性值为一个个样式键值对， 中间： 结尾；

<div style="width: 100px;height: 100px;background: red;">div1</div>

2. style标签对，（内部共用）同页面

特点：

• style标签对放在 head里
• 要用css选择器，选择给哪些标签添加style，后面用 {}，中间写 样式键值对

<style>  
        div{
            width:100px;
            height:100px;
            background: pink;
        }
    </style>

3.（外部共用）多个页面

特点：

• 把样式写到单独的文件， .css文件
• 写法 div{ xxxx } p{xxxxxx} 可以写多种样式
• 引入css文件 < link rel=“stylesheet” href=“xxx.css” /> 它是单标签
• 写在head里面 < link rel=“stylesheet” href=“index.css”>
  

常见样式

border

复合设置

border: 2px dotted  rgba(9, 255, 0,0.5);  /*复合样式*/

单独设置

并可以单独设置 某个方向的 （有4个值 和两个值，和一个值的情况）

/*单一样式*/   
（放4个，上 右  下  左）
（放2个， 上下， 左右）
（放3个，上， 左右，下   ）
border-width: 20px  10px;						 /*也可以设置4个*/
border-style: solid;
border-color: red green blue  black;

• 边框的粗细
  • 1px
• 边框的样子
  • solid 实线
  • dashed 虚线
  • dotted 点划线（不同的浏览器显示的是不一样的）
• 边框颜色
  • red 英文单词
  • #f00
  • rgb(255,0,0）
  • rgba(255,0,0,0.5） a表示透明度，是js3的东西

单独边框的设置

top right bottom left

如上边框的设置如下：
border-top 上边框复合设置
border-top-width 上边框单独设置

  background: yellow;
  border: 1px solid  red;
  border-right: 10px solid  blueviolet;
  border-top-width: 20px ;
  border-top-color:  green ;

边框的特征 —未完待续