day03

作者: 消暑绿豆汤 | 来源:发表于2018-07-12 20:49 被阅读0次

今天学的内容

一、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   //跨越的行

相关文章

网友评论

      本文标题:day03

      本文链接:https://www.haomeiwen.com/subject/dlgrpftx.html