知识点三
2017-07-31 本文已影响0人
陈梦晴
1、css基本样式
1.1css背景
背景颜色:background-color
背景图片:backgorund-image
背景重复:background-repeat
背景位置:background-position: x y
//背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
//参数可以传递left|right|top|bottom|center
以上可以简写为：
background: color image repeat position
//HTML
<div>hello world</div>
//css
<style>
div{
width：500px;
height:100px;
background:pink url(images/logo.png) no-repeat 100px 50px;
}
</style>
背景吸附:background-attachment:fixed | scroll
背景图片大小:
background-size: x y;
//x表示宽度，y表示高度
background-size:cover;
//此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
1.2css文本
color:设置字体的颜色
body {color:red;}
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
h1 {color:#00ff00;}
一个RGB值 - 如: RGB(255,0,0)
h2 {color:rgb(255,0,0);}
text-align：文本对齐方式
text-align: right|left|center
text-decoration：文本修饰
text-decoration: underline|overline|line-through
text-transform：文本转换
text-transform:uppercase|lowercase|capitalize
text-indent：文本缩进
1.3css字体
font-family:字体
p{font-family:Helvetica,Microsoft YaHei}
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
font-size：字体大小
font-style:字体样式
normal | italic
font-weight：字体粗细
normal | bold | lighter
line-height：行高
1.4css链接
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
1.5css列表样式(针对ul)
list-style:none;
list-style-type:circle|square（空心圆、方块）
list-style-image:url("xxx")
1.6边框
border-width : 边框的宽度
border-style: 边框的样式
border-color :边框的颜色
//以上可以简写成
border： width style color
p{border:1px solid #333 }
//边框-单独设置各边
p
{
border-top-style:dotted;
border-right-style:solid;
}
//HTML
<p>
hello world
</p>
//CSS
p {
border-top-style: dotted;
border-right-style: solid;
border-top-width: 5px;
border-right-width: 5px;
border-top-color: red;
border-right-color: green;
width: 50px;
height: 50px;
}
1.7表格(了解)
border-collapse:属性设置表格的边框被折叠成一个单一的边框;
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
例子:
//HTML
制作表格：
<table>
<tr>
<th>商城</th>
<th>电子产品</th>
</tr>
<tr>
<td>天猫商城</td>
<td>iphone</td>
</tr>
<tr>
<td>京东商城</td>
<td>小米手机</td>
</tr>
</table>
//HTML
跨越的行：
<table>
<tr>
<th rowspan="3">商城</th>
<td>衣服</td>
<td>电脑</td>
</tr>
<tr>
<td>鞋子</td>
<td>手机</td>
</tr>
<tr>
<td>裤子</td>
<td>眼睛</td>
</tr>
</table>
//HTML
跨越的列：
<table>
<tr>
<th colspan="2">商城</th>
</tr>
<tr>
<td>天猫商城</td><td>iphone</td>
</tr>
<tr>
<td>京东商城</td><td>小米手机</td>
</tr>
//HTML
有间隔的table：
<table>
<tr>
<th>商城</th>
<th>电子产品</th>
</tr>
<tr class="one" ></tr>
<tr>
<td>TMALL</td>
<td>iphone</td>
</tr>
<tr class="one"></tr>
<tr>
<td>JD</td>
<td>ipad</td>
</tr>
</table>
//css
table{
border-collapse: collapse;
width:300px;
text-align: center;
}
table,td,th{border:1px solid #333}
tr{height:50px;}
1.8轮廓属性（不怎么用）
//轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}
1.9透明
opacity:透明度
一般取值(o-1)；
visibility:可见度
visibility：hidden（事物存在，但是隐藏了）
visibility：visible（事物可以看见）
visibility：hidden 与 display:none的区别
visibility：hidden（事物存在，但是隐藏了）
display:none（事物确确实实不存在了）
overflow：hidden（溢出：隐藏）
2、css样式的继承
继承:是子元素对父元素的继承
2.1width和height
width:
//如果子元素不设置宽度，默认情况下继承父元素的宽度
height:
//(特殊)如果父元素不设置高度，默认情况下父元素[继承子元素]的高度
2.2css可以继承的属性
文本相关属性:
color //文本的颜色
text-align //文本对齐的方向
text-decoration //文本修饰
text-indent //文本缩近
text-transform //文本转换(了解)
字体相关属性:
font-family,font-style,font-size,font-weight,line-height
列表相关属性:
list-style
表格相关属性:
border-collapse
其他属性:
cursor,visibility
