注释的写法
直接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 ;