四种加载方式里面：即编辑{}大括号里面的内容
背景
文本
字体
列表
表格
轮播
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_03_style</title>
<style type="text/css">
body
{
/* background-image: url('az.jpg');
background-repeat: no-repeat; */
/* 如果有滚动条,背景图片不动 */
/* background-attachment: fixed; */
}
/* 背景 */
.backcolor_main
{
/* 背景 */
background:red;
/* 背景图片
url:图片的路径:相对(相对css所处的文件路径)和绝对;
repeat:重复; -x:x轴重复,-y:y轴重复;
*/
/* 合在一起写, */
/* background: url('az.jpg') repeat-y; */
background-image: url('az.jpg');
/* 分开写 */
background-repeat: no-repeat;
/* 图片的位置 */
/* background-poition:center; */
/* 可以写百分比 */
background-position: 30% 70%;
/* 可以写像素 */
background-position: 10px 30px;
/* 高度和宽度 */
/*width: 200px;*/
height: 200px;
}
/* 文本样式
所有的属性只要是数字都有可以填写:
数字px(像素);
数字%(相对于父容器的数字)
数字em(相对于汉字的大小,一个网页的汉字标准大小是12px,5em,就是60px)
*/
.text_main
{
/* 首个字母缩进 */
text-indent: 10em;
/* 水平对齐 */
text-align: center;
/* 批量变大写 */
text-transform: uppercase;
/* 文字间隔 */
letter-spacing: 10px;
/* 文字装饰 */
text-decoration: underline;
/* 字体大小 */
font-size: 30px;
/* 字体加粗 */
font-weight: bolder;
/* 轮廓和border是一样的
outline:#00ff00 dotted 10px;
颜色 点的形状 粗细
*/
outline:#00ff00 dotted 10px;
/* 边框 */
border: 10px dotted blue;
}
/* 父子选择器 */
ul li
{
/* li左边默认的小圆圈换成图片 */
/* list-style-image: url(az.jpg) ; */
list-style: square inside;
background: blue;
}
</style>
</head>
<body>
<!-- 就是一个元素
div占用了一行
class:可以写多个类选择器,每个类选择器之前用空格隔开
-->
<div class="backcolor_main text_main">
这是一个div
这是一个div
这是一个div<br/>
这是一个div
这是一个div
这是一个div
</div>
div后面的内容
<!-- 这也是个元素
span没有换行
-->
<span>也是一个元素</span>
这个是span后面的
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
