前端之CSS样式

最新推荐文章于 2026-06-18 10:38:44 发布

原创最新推荐文章于 2026-06-18 10:38:44 发布 · 409 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css #脚本语言 #html5

前端web 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解CSS（层叠样式表）的基本概念、作用及其与HTML的结合方式，涵盖内联样式、内部样式和外部样式，详细解析选择器类型如ID、元素和类选择器，并介绍常用CSS属性如字体、文本、边框、尺寸、背景及盒子模型。

1.CSS

首先我要谈1下CSS是什么。
CSS形象一点来讲，就是一件衣服，可以是很丑，可以是很漂亮。

css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2.CSS 的作用

解决了内容展示和样式控制分离的问题

1.降低耦合度
2.外部样式提高了开发效率

3.CSS 与 HTML 的结合方式

1.内联样式（不推荐使用）
在标签内使用 style 属性指定 CSS 代码

<div style="color:red;">hello CSS</div>

2.内部样式（推荐使用）

在 head 标签内定义 style 标签，style 标签体内写 CSS 代码。
（这样就将html标签与CSS样式代码分离开来了）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:blue;
        }
    </style>
</head>
<body>
	<div>hello CSS</div>
</body>

4.CSS 格式

选择器 {
	属性名1:属性值1;
	属性名2:属性值2;
	...
}

5.选择器

在这里跟各位看官说大白话，就是我要知道我修改那件衣服，衣服上面必须有标签。通过标签，找到我想修改的衣服。

基础选择器

1.id 选择器：选择具体的 id 属性值的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				color: red;
			}
		</style>
		
	</head>
	
	<body>
		
		<div id="div1">
    		id选择器
		</div>
		
	</body>
</html>

注意：建议在一个 HTML 页面中一个 id 值只使用一次，保持唯一性

2.元素选择器：选择具有相同标签名称的元素

div{
	color:green;
}

<div>
    元素选择器
</div>

3. 类选择器：选择具有相同的 class 属性值的元素

.cls1{
	color: blue;
}

<div class="cls1">
    类选择器
</div>

6.CSS 属性

字体（Font）属性

   font-size：字体大小
   font-family：字体系列

文本（Text）属性

   color：文本的颜色
   text-align：对其方式
   line-height：行高

边框（Border）属性

   border：设置边框，复合属性

尺寸(Dimension) 属性

   width：设置宽度
   height：设置高度

背景（background）属性

   background：设置背景，复合属性

盒子模型

   margin：外边距

   padding：内边距

   注意：默认情况下内边距会影响整个盒子的大小。

   设置 box-sizing: border-box; 可以让width和height就是最终盒子的大小

   float：浮动
       left：左浮动
       right：右浮动

7.CSS 案例

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/注册页面样式表.css">
</head>
<body>
<div class="rg_layout">
    <!--左侧注册提示-->
    <div class="rg_left">
        <p class="rg_left_chinese">新用户注册</p>
        <p class="rg_left_english">USER REGISTER</p>
    </div>
    <!--中间填写注册信息-->
    <div class="rg_center">
        <div>
            <form>
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="phone">手机号</label></td>
                        <td class="td_right"><input type="text" name="phone" id="phone" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male">男
                            <input type="radio" name="gender" value="female">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">出生日期</td>
                        <td class="td_right">
                            <input type="date" name="birthday" id="birthday">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right">
                            <input type="text" name="checkcode" id="checkcode">
                            <img id="img_check" src="img/verify_code.jpg"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input id="btn_sub" type="submit" value="注册">
                        </td>
                    </tr>

                </table>
            </form>
        </div>
    </div>
    <!--右侧登陆提示-->
    <div class="rg_right">
        <p class="rg_right_login">已有账号?<a href="#">立即登陆</a></p>
    </div>

</div>
</body>
</html>