【02】CSS

已于 2022-06-13 00:30:19 修改
阅读量71 收藏
点赞数
文章标签： css html
于 2021-08-05 15:51:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43589563/article/details/119419451
版权
本文详细介绍了CSS的基础知识，包括选择器的使用、语法规则、三种结合方式、四种选择器及其扩展，以及常见CSS属性如字体、背景、边框和尺寸等。此外，还深入讲解了盒子模型、浮动和定位，最后通过实际案例展示了CSS在注册页面设计中的应用。
摘要由CSDN通过智能技术生成

1.概念

  • CSS就是对html标签元素进行装修的！
  • 同一个html标签可以使用多个css样式，同时生效
  • css功能强大
  • 将内容展示和样式控制分离，解耦，让分工协作更容易，提高开发效率
# 课程目标:
> 1. 学会使用CSS选择器
> 2. 熟记CSS样式和外观属性
> 3. 熟练掌握CSS各种选择器
> 4. 熟练掌握CSS各种选择器
> 5. 熟练掌握CSS三种显示模式
> 6. 熟练掌握CSS背景属性
> 7. 熟练掌握CSS三大特性
> 8. 熟练掌握CSS盒子模型
> 9. 熟练掌握CSS浮动
> 10.熟练掌握CSS定位
> 11.熟练掌握CSS高级技巧强化CSS
typora-copy-images-to: media

参考：
https://blog.csdn.net/luo609630199/article/details/80066491

2.css语法规则

选择器{
		Key1：value1;
		Key2: value2;
		...
}

选择器： 浏览器根据选择器决定css影响的css标签
属性： 要改变的样式

3.三种结合方式方式

(1) 内联样式

  • 直接在标签内部通过style属性来指定css样式，多个css kv之间用分号隔开；
  • 注意：kv之间用冒号，不是=了
<body>
    <!-- 修改div样式  边框1px, --> 
    <div style="border-style:solid;border-width:5px;border-color:rgb(255,233,221) "> demo01</div>
</body>

(2)页面内引入

  • 在head标签内部写<style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css02</title>

   <!-- 标签名选择器，直接用标签名当选择器，页面内所有该标签都引入此样式 -->
    <!--html注释不能写在style标签内部 -->
    <style type="text/css">
        /*这是css的注释写法*/
        div{
            border-style: solid;
            border-width:5px;
            border-color:rgb(255,233,221);
        }
    </style>



</head>
<body>
    <!-- 结合方式2：修改div样式 -->
    <div> demo02</div>
    <div> demo03</div>
    <div> demo04</div>
</body>
</html>

(3)页面外引入

  • 定义一个css文件
  • 通过link标签引入css文件
<head>
    <meta charset="UTF-8">
    <title>css02</title>

    <!--link标签准们用来引入css代码 -->
    <link rel="stylesheet" type="text/css" href="cssDemo03.css">
</head>
<body>
    <!-- 结合方式2：修改div样式 -->
    <div> demo02</div>
    <div> demo03</div>
    <div> demo04</div>
</body>
</html>

cssDemo03.css：

div{
    border-style: solid;
    border-width:5px;
    border-color:rgb(255,233,221);
}

4.四种选择器

1.标签名选择器

  • 会将当前html页面所有此标签的元素都进行装饰
    <style type="text/css">
        /*这是css的注释写法*/
        div{
            border-style: solid;
            border-width:5px;
            border-color:rgb(255,233,221);
        }
    </style>

2.id选择器

#id值{
	Key1：value1;
	...
}
  • 通过标签的id属性值的匹配 来绑定标签。
  • id不能以数字开头，否则无效。
  • 由于html页面中标签的id属性值必须是唯一的，因此意味着id选择器只能对一个标签引入css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>

    <style type="text/css">
        #id001{
            border-style: solid;
            border-width:5px;
            border-color:rgb(255,233,221);
            font-style:oblique;
        }
    </style>
</head>
<body>
    <!-- 结合方式2：修改div样式 -->
    <div id="id001"> demo02</div>
    <div id="id002"> demo03</div>
    <div id="id003"> demo04</div>
</body>

3.class选择器

  • 通过标签的class属性值的匹配 来绑定标签；
  • 可绑定一组标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>

    <style type="text/css">
        .class001{
            border-style: solid;
            border-width:5px;
            border-color:rgb(255,233,221);
            font-style:oblique;
        }
    </style>

</head>
<body>
    <!-- 结合方式2：修改div样式 -->
    <div id="id001" class="class001"> demo02</div>
    <div id="id002" class="class001"> demo03</div>
    <div id="id003" class="class002"> demo04</div>
</body>
</html>

4.组合选择器

  • 多个选择器用逗号分开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>

    <style type="text/css">
        .class001,#id001,span{
            border-style: solid;
            border-width:5px;
            border-color:rgb(255,233,221);
            font-style:oblique;
        }
    </style>

    <!-- 由于html页面中标签的id属性值必须是唯一的，
    因此，id选择器只能对一个标签引入css-->

</head>
<body>
    <!-- 结合方式2：修改div样式 -->
    <div id="id001" class="class001"> demo02</div>
    <div id="id002" class="class001"> demo03</div>
    <div id="id003" class="class002"> demo04</div>

    <span> span标签</span>
</body>
</html>

5.扩展选择器

1.选择所有元素选择器

	*{}

2.子选择器

  • 选择器之间用空格隔开；
  • 筛选出选择器1下的选择器2的元素
格式：选择器1  选择器2{}

3.父选择器

  • 筛选出选择器2的父元素选择器1
选择器1 > 选择器2{}

4.属性选择器

  • 根据元素名称、属性和属性值来筛选标签
元素名[属性名=“属性值”]{}

5.伪类选择器

  • 选择一些处于某种状态的元素
  • 语法： 元素：状态{}
 比如标签 <a> 具有的状态：
 		1.link  初始化状态
 		2.visited  被访问的状态
 		3.active   正在访问的状态
 		4.hover   鼠标悬浮状态

举例：

	a:link{
		color:pink;
	}
	超链接的初始状态为粉红色

在这里插入图片描述

5.CSS 属性

css属性有复合属性，指的是该属性可以有多个值分别控制不同类型的样式

1.字体 文本

在这里插入图片描述
在这里插入图片描述
font-size:字号大小
font-family:字体
font-weight:字体粗细
font-style:字体风格

2.背景

background:复合属性

在这里插入图片描述

3.边框

在这里插入图片描述边框有四条边；
border 是个复合属性，一次控制四条边

4.尺寸

  • 宽度 width
  • 高度 height
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>

    <style>
        p{
            color:#FF0000;
            font-size:30px;
            text-align:center;
            line-height:100px;

            /*border*/
            border:1px solid red;
        }

        div{
            /*高度和宽度*/
            border:1px solid red;
            height:200px;
            width:200px;
        }

    </style>
</head>
<body>
        <p>阿斯顿</p>
        <div></div>
</body>
</html>

CSS 盒子模型

盒子模型的意思是 html页面将每一个元素看作一个盒子，在浏览器页面中占有大小和边框范围
在这里插入图片描述

  • margin:外边距 和外部盒子边框之间的距离
  • padding:内边距
  • float 浮动 可以让div标签不占一行;
    left:左浮动 跑到页面左边
    right 右浮动
    多个div 左浮动的话，就从左往右挨个挤在一起；

盒子有四条边，因此每个边的边距都可以单独设置；
在这里插入图片描述
设置外边距演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>


    <style>
        div{
            border : 1px red solid;
        }
         .div1{
             width:100px;
             height:100px;
             margin:50px;
         }

         .div2{
             width:200px;
             height:200px;

         }
    </style>
</head>
<body>


<div class="div2">
    <div class="div1"></div>
</div>
</body>
</html>

在这里插入图片描述
设置内边距演示：
默认情况下，设置内边距会影响该盒子的大小；
因此需要额外设置一个属性box-sizing: border-box;，才能使得盒子大小不变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>


    <style>
        div{
            border : 1px red solid;
        }
         .div1{
             width:100px;
             height:100px;
             
         }

         .div2{
             width:200px;
             height:200px;
             padding:50px;

             box-sizing: border-box;

         }
    </style>
</head>
<body>


<div class="div2">
    <div class="div1"></div>
</div>
</body>
</html>

CSS 注册页面案例

(1)html部分

表单效果预览：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

</head>

<body>

<form action="#" method="post">
    <table border="1" align="center" width="500">
        <tr>
            <td><label for="username">用户名</label></td>
            <td><input type="text" id="username" name="username" placeholder="请输入账号"></td>
        </tr>

        <tr>
            <td><label for="password">密码</label></td>
            <td><input type="password" id="password" name="password" placeholder="请输入密码"></td>
        </tr>
        <tr>
            <td><label for="email">用户名</label></td>
            <td><input type="text" id="email" name="email" placeholder="请输入Email"></td>
        </tr>
        <tr>
            <td><label for="name">姓名</label></td>
            <td><input type="text" id="name" name="name" placeholder="请输入真实姓名"></td>
        </tr>
        <tr>
            <td><label for="phone">手机号</label></td>
            <td><input type="text" id="phone" name="phone" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="radio" name="gender" value="male" checked="checked">男
                <input type="radio" name="gender" value="female" >女
            </td>
        </tr>

        <tr>
            <td><label for="birthday">出生日期</label></td>
            <td><input type="date" id="birthday" name="birthday"></td>
        </tr>


        <tr>
        <td><label for="code">验证码</label></td>
        <td><input type="text" id="code" name="code">
            <img src="../img/verify_code.jpg">
        </td>
        </tr>

        <tr>
            <!-- 合并单元格
                 单元格内容居中显示-->
            <td colspan="2" align="center">
                <input type="submit" value="注册">
            </td>
        </tr>
        
    </table>

</form>
</body>
</html>

(2)css修饰

效果预览
在这里插入图片描述
分析：
新手用户注册 div float left
表单：div float left
已有帐号： div float right

败给你的黑色幽默丶
关注
专栏目录
02CSS3简约紫色渐变背景登录页面实现.zip
05-24
【标题】"02CSS3简约紫色渐变背景登录页面实现.zip"是一个关于使用CSS3技术构建的静态页面模板，其特色在于应用了紫色渐变背景来创建一个现代且吸引人的登录界面。这个压缩包中包含了一个实现了这一设计的文件。 在...
CSS
04-10
虽然文档的重点是骈润潼的技术技能和工作经历，但我们可以从中提取出有关CSS及其他IT相关知识点的信息。以下是根据文件内容得出的详细知识点： 1. **CSS基础与应用**： 骈润潼熟练使用HTML、CSS、JavaScript等Web...
02 – CSS -1
01-07
一.引入方式 行内： 内部： div{color: black} 外部： 二....id选择器(唯一的)：id=dv #dv{ xxx } 类选择器：class=dv .dv{ xxx } 标签选择器： ...通配符选择器(所有标签)：*{ xxx } ...[value = 登录] { xxx }(属性值是...
day02_CSS预习笔记1
08-03
【CSS预习笔记1】- CSS基础与应用 在网页设计中，CSS（Cascading Style Sheets）扮演着至关重要的角色，它负责控制网页的样式和布局，使内容与表现分离，让页面更加美观和易读。这篇笔记将详细介绍CSS的基础知识，...
CSS_and_Bootstrap_Responsive_Portfolio:单元 02 CSS 和 Bootstrap 作业
05-30
验收标准： 功能性、已部署的应用程序 带有描述项目的 README 的 GitHub 存储库 每个页面上的导航栏必须一致。 每个页面上的导航栏必须包含指向主页/关于、联系人和作品集页面的链接。 所有链接都必须有效。...
《CSS新世界》书评
zhangxueyi的专栏
09-13 409
这本书是“CSS世界三部曲”中的最后一部，全书近600页，内容丰富，涵盖了CSS的全局知识、已有属性的增强、新布局方式、移动开发中的CSS新特性、CSS变量、文本和图像内容的增强、滤镜和混合模式、用户行为相关CSS等多个方面。《CSS新世界》的主要目标是帮助前端开发者突破CSS技能提升的瓶颈，适合具有一定CSS基础的前端开发者阅读。总的来说，《CSS新世界》是一本全面、深入且实用的CSS学习书籍，无论是对于想要深入了解CSS新特性的前端开发者，还是对于希望提升自己CSS技能的读者，都是一本值得一读的好书。
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1391
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML、CSS实现树状图
p_s_p的博客
09-09 680
【代码】HTML、CSS实现树状图。
js的书写位置和css的书写位置的区别？为什么要这样写？
QQ1257871322的博客
09-10 481
这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2501
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
【CSS in Depth 2 精译_030】5.2 Grid 网格布局中的网格结构剖析（下）
PeacefulWinter的博客
09-13 1065
本篇主要对 Grid 网格布局中的网格结构进行了深入剖析，重点演示了网格布局对各页面内容的排布方法，同时与 Flexbox 布局的区别与联系进行了归纳。通过具体的案例阐述了两种布局方法所适用的场景，非常适合希望进阶 CSS 的朋友完善 CSS 知识体系，强烈建议收藏。
使用HTML和CSS制作网页的全面指南
最新发布
weidl001的博客
09-14 1185
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
CSS框架 Tailwind CSS
专研技术的大学生
09-11 813
在项目中如何集成Tailwind Css框架
项目实训：CSS基本布局理解——WEB开发系列38
一条晒干的咸鱼的博客
09-13 649
对CSS学习已经接近尾声，下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。
CSS 笔记 1
waterHBO的博客
09-12 504
限制最大高度 300 像素， flex-grow: 1;让 当前元素 在剩余空间中， 占据尽可能多的高度，确保它能在中间居中。上下填充 20px，左右填充为0。铺满整个浏览器窗口的宽度。占据父元素的 100%
css父容器溢出隐藏 子容器溢出滚动
u010234868的专栏
09-13 330
parent 容器设置了固定的宽度和高度，并且通过 overflow: hidden;隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度，则会显示滚动条，允许用户滚动查看所有内容。在父容器上设置 overflow: hidden;可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条，可以设置 overflow: auto;
less和css在写法上有什么区别吗？
qq_50853940的博客
09-11 578
【代码】less和css在写法上有什么区别吗？
表格标记＜table＞
qq_74861982的博客
09-13 379
table标记是表格中最外层标记，tr表示表格中的行标记，一对表示表格中的一行，在中可以嵌套几对标记或几对标记。valign：设置单元格垂直对齐方式，可取top bottom middle baseline。align：设置表格或者单元格中，文字水平对齐方式。border:设置边框的值，默认为0，表示不可见。height：设置表格或者单元格的高度。width：设置表格或者单元格的宽度。4.td:表格中数据单元格标记。1table：表格标记。这里直接贴上代码了哦。
Taro + Vue 的 CSS Module 解决方案
所行皆坦途
09-11 957
文章简述了怎么在 Taro + Vue 项目中使用 Css Module 方案，以防止样式污染。
CSS速成教程：从入门到精通
"B02-CSS速成教程是一份专为初学者设计的教程，旨在教授CSS基础知识，包括链接与嵌入样式表、语法、规则等核心概念，并结合HTML、JavaScript、C#和SQL的基础知识，帮助学习者快速上手网页设计。教程强调实践，鼓励...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值