一.css中的背景样式
1.1背景大小
width:600px;
height: 200px;
background: red
url("images/banner.jpg")
no-repeat
center
center；
background-size: 100% 100%;
背景大小
background-size:x y;
x---width
y---height
cover------会覆盖整个页面div
特点-------只能以大覆盖小
#######1.2.背景的重复和位置
width:200px;
height: 200px;
background-color: red;
background-image: url("images/icon1.png"）
background-repeat: no-repeat;
背景重复
background-repeat: no-repeat| repeat-x| repeat-y
--------不重复---------重复x轴方向-------重复y轴方向
background-position-x:center;
background-position-y:center;
背景位置
background-position-x:横坐标方向位置
background-position-y:纵坐标方向位置
背景简写 background-position:x y;
1.3.背景的简写
div{
width:200px;
height: 200px;
background: red
url("images/icon1.png")
no-repeat
center
center；
背景简写
background:color image repeat position
颜色 背景图片 是否重复 背景的位置
二.文本的样式
1.1文本的颜色
p{
color:red;
}
</style>
</head>
<body>
<p>hellow world</p>
</body>
eg：red等颜色为纯色
#ff2d51等为rgb（）即此颜色的不同深浅
1.2.文本字体样式
p{
font-size: 12px;
font-style: italic;
font-weight: lighter;
}
font-size 字体大小
font-style：normal italic
font-weight----字体的权重
font-weight:bold bolder lighter
但一般不能小于12px字体
1.3.样式继承
.parent{
width:200px;
height: 200px;
background: red;
}
.child{
height: 100px;
background: blue;
}
---------
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
"样式继承"仅仅只发生在块元素之间
子元素不设置宽度，它会继承父元素的宽度
.parent{
width: 200px;
background: red;
}
.child{
width:100px;
height: 100px;
background: blue;
}
也可父元素不设置height ，它会获取子元素的height
三.表格
1.1结构
<body>
<table>
<thead>
<tr> <th>商城</th> <td>手机</td> </tr>
</thead>
<tbody>
<tr> <td>3d</td> <td>苹果</td></tr>
</tbody>
</table>
tr------------table row 行
th------在单元格中加粗显示-------表头
td-------在单元格中不加粗显示-------表单元格
<thead>-------行表头
<tbody>-------表格数据
1.2样式
table,th,td{
width:500px;
border:1px solid #333;
}
table{
border-collapse: collapse;
line-height: 50px;
text-align: center;
}
“table,th,td”-------设置表格结构单元格的宽细，即横竖线
“table”设置表格的样式
四.其他样式
1.1.轮廓
div{
width:100px;
height: 100px;
background: red;
outline: 10px solid #44cef6;
}
input{
margin-top: 50px;
outline: none;
}
可使“input”中边框点击不变色
1.2.链接
a:link{
color:red;
}
a:visited{
color:yellow;
}
a:hover{
color:green;
}
a:active{
color:blue;
}
</style>
<body>
<a href="http://www.jd.com/">京东</a>
</body>
link-----没有访问的链接
visited-----已经访问过的链接
hover-------鼠标移入到链接上的状态
active------鼠标点击的那一刻
同时使用链接的几种状态，顺序不能打乱
网友评论