HTML和CSS入门（2）

最新推荐文章于 2024-04-04 12:04:33 发布

Amber_Young

最新推荐文章于 2024-04-04 12:04:33 发布

阅读量381

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/Amber_Young/article/details/78391803

版权

web前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

CSS入门

1.样式调用方式
（1）行内样式：
<any style="样式名：样式值;"></any>
常见样式：
对齐方式：text-align： center/left/right/justify;
字体大小：font-size：XXpx;
字体颜色：color：red;
背景颜色：background-color：pink;
首行缩进：text-indent：2em;

（2）页面内样式（在head中定义）：

<style>
        p{
            color:blue;
            background: pink;
        }
</style>

这时候<p>中所有内容样式都按照在<style>中定义的样式来，想要单独改变某一<p>中的样式，单独在这个标签中添加style即可，因为行内优先级大于页面内。

类定义

<head>
    <style>
        .box{
            color:lightblue;
        }
    </style>
</head>
<body>
<p class="box">
    one
</p>
</body>

定义的格式：.自定义名称{}
调用时不加点，在页面中可以多次调用

id定义

<head>
    <style>
        #box{
            color:lightblue;
        }
    </style>
</head>
<body>
<p id="box">
    </body>

整个页面中只能使用一次，多用于定义大框架

（3）链接式
链接页面外的样式，在CSS（File–New–Stylesheet)中定义：

.littlebox{
    color:pink;

}

在HTML中链接：

<head>
    <link rel="stylesheet" href="链接外部css文件路径" type="text/css"/>
</head>
<body>
<p class="littlebox">
    one
</p>
</body>

（4）导入式

<head>
    <style>
        @import url(连接外部的css文件);
    </style>
</head>
<body>
<p class="littlebox">
    one
</p>
</body>

2.站点：包含css、img和html的工程叫做站点
这里写图片描述创建站点的标准形式

3.DIV：<div></div>
在css中设置div的属性

.sky{
     margin: 0 auto;/*外边距：居中;margin:a(上) b(右) c(下) d(左)*/
    border: solid 1px red;/*边框线：实线 1像素 颜色*/
    /*solid实线/dashed虚线/double双线/dotted点线*/
    width: 800px;
    height: 600px;
    background: darkgray url(../img/1.jpg) no-repeat center top;
    /*背景：颜色 图片（路径） 重复 水平位置 垂直位置*/
    padding: 1px;/*内边距：padding：a(上) b（右） c（下） d（左）*/
 }

在HTML中调用：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div class="sky">

</div>

</body>
</html>

效果图：

这里写图片描述

4.定义图片属性：

p img{
    float:left;/*左浮动*/
}

设置前：
这里写图片描述
设置后：

5.定义文本

p{
    line-height: 25px;/*行间距*/
    font-weight: bold;/*字体加粗*/
    font-style: italic;/*斜体*/
    font-style: normal;/*正常字体*/
    text-decoration: none/underline/overline;/*去下划线/加下划线/加上边线*/

}

6.超链接的四种状态（伪对象）

a:link 默认状态
a:hover 鼠标悬停时的样式
a:active 鼠标点击时的样式
a:visited 超链接访问后的样式
写四种状态时的顺序：link>visited>hover>active

<style>
/*在head中定义*/
        a:link{
            color:black;
        }
        a:visited{
            color:lightblue;
        }
        a:hover{
            color:yellowgreen;
        }
        a:active{
            color: brown;
        }
    </style>