html/css

来源：互联网发布：啄木鸟软件测试编辑：程序博客网时间：2024/05/16 18:01

Div ,也叫盒子，盒子一般用于页面的布局，给这个盒子加上样式就是css

加上样式有两种方式：

1. 写在这个标签的内部，就直接将样式赋给了这个标签；

2. 写在标签的外部，放在head中间

为什么写在外面/

1. 格式更加清晰，分离比较清晰

2. 写在外面，可以减少代码，因为有的元素他们的样式是相同，没必要同样的样式写多次

3. 容易封装

写在外面就是要区分到底是给哪个元素添加样式，所以就有了选择器。

元素选择器：会将所有的元素加上样式。写法就是写上元素名称（属性）

Id选择器：id相当于我们的身份证具有唯一性，不能重复，重复就会报错，只给某个元素加上特有的属性

这时候可能会有冲突，冲突处理原则，内部属性>id类>元素的。写法是 #+id的名字（属性）

类选择器：class 有时候我们需要给一组元素加上同样的样式，类名是可以重复的

Img 图片的

两个常用的属性：第一个src图片的路径

绝对路径

相对路径

第二个alt可以为空，它是当图片加载不到时的文字信息

<imgsrc="img/img/img.jpg"alt="对不起，图片加载不到"/>

图片也可以作为某个元素的背景图片，加上样式

background: url("img.jpg") no-repeat;

url 就是图片的地址，no-repeat就是不重复

元素必须写在body中间；

样式要用style标签包围起来并且放在head中间

div 里面可以写任何内容比如文字

给文字设置水平居中，用text-align 属性，center 居中，还可以设置居右

给文字设置颜色： color属性

给文字设置大小：font-size

给文字设置字体：font-family

给文字设置加粗：font-weight

要给文字单独设置样式，一般将内容写在span 里面

<style>
       body{
           background:url("img.jpg");
       }
        #div1{
            width:200px;
            height:200px;
           /*background: url("img.jpg") no-repeat;*/
            background-color:#fff8c8;
            background-size:contain;
            text-align:center;//居中
            margin:0auto;/*加外边距（上下 auto：左右自动）*/
            padding:12px;/*加内边距（字体与边的距离）*/
        }
        span{
            color:green;
            font-size:40px;
            font-weight:700;
            border:1px solid black;
            border-radius:4px
        }
    </style>
</head>
<body>
<div id="div1">hello<span>world</span></div>
</body>

阅读全文

0 0