day03

今天学的内容

一、css 样式的讲解

1.1 css 背景

1.2 css 文本

1.3 css 字体

1.4 css 链接

1.5 css 样式列表

1.6 边框

1.7 表格

1.8 轮廓

1.1css背景

背景颜色 background-color:  ；
背景图片 background-image：url("images/01.jpg")；
背景重复 background-repeat： no-repeat|repeat-x|repeat-y；
背景位置 background-position-x:横坐标方向的位置；
        background-y:纵坐标方向的位置；
        简写：background-position：x y(横 纵坐标的位置)；
        传参 top,right,bottom,left,center
背景吸附 background-attachment：fixed|scroll；
背景简写 background：color image repeat position（颜色 路径 重复方式 图片位置）
背景大小 background-size：；
（cover全覆盖等价于100% 100%注：图片比例不变   x y  10px 10px 宽高大小 ）

1.2css文本

color:设置字体的颜色

颜色是通过CSS指定：
十六进制值 - 如: ＃FF0000(最常用)
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgba(255,0,0,0.4);}最后一个参数是透明度；

文本的对齐方式

text-align：center|right|left；

文本的修饰

text-decoration：underline|overline|line-through|none（去下划线的）

文本的缩进

text-indnet:20px;

文本的转换

text-transform:uppercase|lowercase|capitalize(大写 小写 首字母大写)

//lorem+tab 快速打一段废话

1.3 css字体

//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体

font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
font-size:12px；//最好不小于它
font-style：normal|italic；
font-weight:nomal|bold|bolder|lighter;
line-height:12px;//设置字体大小

1.4 css链接

//即针对<a href="网址"></a>标签

a:link{color:};//未访问时
a:visited{color:};//访问过后
a:hover{color:};//鼠标放在链接上时
a:active{color:};//链接被点击的瞬间

1.5 css列表样式（即针对对象为ul）

ul{list-style:none;}//列表项前什么都没
ul{list-style-type:disc|circle|square；}//列表项前默认为第一个实心圆点|空心圆点|实心正方形
ul{list-style-image:url("图片的相对路径")；}

1.6 边框

{
border-width：5px;//边框的宽度
border-style:solid;//边框的样式
border-color:red;//边框的颜色
p{border:1px solid #333;}//即可简写为border： width style color
}

1.7表格

<table>
<thead>
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<tr><td>Tmall</td><td>小米</td></tr>
</tboby>
</table>

border-collapse//属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse;}

//可以在th,td设置这个两个属性
colspan:value    //跨越的列
rowspan:value   //跨越的行