前端基础＜css＞

最新推荐文章于 2024-03-23 01:00:00 发布

散漫的大学生

最新推荐文章于 2024-03-23 01:00:00 发布

阅读量221

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_51992178/article/details/126557487

版权

定义样式的方式

1.用到CSS来自定义样式，先创建一个名为`style.css`的文件

在HTML文件的头部添加

<link href="style.css" rel="stylesheet">

在css中添加使得网页的内容全部变为居中显示

body {
    text-align: center;
}

2.也可以选择不使用CSS，而是直接对某个元素添加样式

<body style="text-align: center">

3.也可以在头部直接定义样式

<style>
    body {
        text-align: center;
    }
</style>

CSS选择器

1.标签名选择器

可以快速选择页面中所有指定的的标签并使用此样式显示

样式编写完成后，如果只有一个属性，可以不带`;`若多个属性则每个属性后面都需要添加一个`;`

`input`标签

标签名称 {

属性名称: 属性值

}

input {
    width: 200px;
    font-size: 20px;
    line-height: 40px;
}

2.id选择器

每个元素的id是唯一，可以通过id选择器快速地去设置某个元素样式

选择某个id需要在前面加上一个`#`

<h1 id="title">登陆我们的网站</h1>

#title {
    color: red;
}

3.类选择器

每个元素都可以有一个`class`属性，表示当前元素属于某个类（注意这里的类和我们Java中的类概念完全不同）一个元素可以属于很多个类，一个类也可以被很多个元素使用

<form>
    <div >
        <label class="test">
            账号：
            <input type="text" placeholder="Username...">
        </label>
    </div>
    <div>
        <label class="test">
            密码：
            <input type="password" placeholder="Password...">
        </label>
    </div>
</form>