Css简单学习

最新推荐文章于 2024-09-25 16:29:08 发布
最新推荐文章于 2024-09-25 16:29:08 发布
阅读量224 收藏
点赞数 1
分类专栏： JavaWeb java学习之路 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ww166955/article/details/122674280
版权

前言

本文章对Css结合HTML使用进行了介绍，是后端学习者参考文，并非前端专业文。

目录

一、CSS的基本概念以及使用方式

        1.1、css基本概念

        1.2、使用Css的好处：

        1.3、css的使用

二、选择器

   2.1、选择器定义

   2.2、分类

三、属性

 四、注册页面案例实践

一、CSS的基本概念以及使用方式

        1.1、css基本概念

    Cascading Style Sheets 层叠样式表
     层叠：多个样式可以作用在同一个html的元素上，同时生效

         1.2、使用Css的好处：

    1. 功能强大
    2. 将内容展示和样式控制分离
        * 降低耦合度。解耦
        * 让分工协作更容易
        * 提高开发效率


        1.3、css的使用


    css与HTML结合方式

       1.内联样式：
            在标签内使用style属性指定css代码
            如：<div style="color:red;">hello css</div>
        2. 内部样式
            * 在head标签内，定义style标签，style标签的标签体内容就是css代码
            * 如：
                <style>
                div{
                    color:blue;
                }
            </style>
            <div>hello css</div>
        3. 外部样式
            1. 定义css资源文件。
            2. 在head标签内，定义link标签，引入外部的资源文件
            如：
                * a.css文件：
                div{
                    color:green;
                }


            <link rel="stylesheet" href="css/a.css">
            <div>hello css</div>
            <div>hello css</div>
        

代码演示

<!--
*@packageName 
*@className css内联方式一
*@author wang
*@date 2022/1/24 14:14
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS与HTML内联方式结合一</title>
</head>
<body>
<!--测试内联方式，通过style属性-->
<div style="color: gold">hello css</div>
</body>
</html>



<!--
*@packageName 
*@className Css内部方式结合
*@author wang
*@date 2022/1/24 14:17
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部方式结合</title>

<!--    该方式只能指定本文件，无法应用所有文件-->
    <style>
        div{
            color: gold;
        }
    </style>
</head>
<body>
<!--测试内部方式结合 通过 在head标签内使用style标签-->
<div>哈哈哈哈哈Css</div>

</body>
</html>



<!--
*@packageName 
*@className Css外部样式方式
*@author wang
*@date 2022/1/24 14:19
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css外部样式</title>
<!--    在head标签中引入css资源文件-->
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
<!--首先应该编写css资源文件-->
<div>hello world</div>

</body>
</html>

        css文件

div{
    color: greenyellow;
}

注意：
            * 1,2,3种方式 css作用范围越来越大
            * 1方式不常用，后期常用2,3
            * 3种格式可以写为：
                <style>
                @import "css/a.css";
            </style>

二、选择器


   2.1、选择器定义

筛选具有相似特征的元素

   2.2、分类

        基础选择器
            1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
                        * 语法：#id属性值{}
            2. 元素选择器：选择具有相同标签名称的元素
                        * 语法： 标签名称{}
                        * 注意：id选择器优先级高于元素选择器
            3. 类选择器：选择具有相同的class属性值的元素。
                        * 语法：.class属性值{}
                        * 注意：类选择器选择器优先级高于元素选择器
        拓展选择器
            1. 选择所有元素：
                * 语法： *{}
            2. 并集选择器：
                * 选择器1,选择器2{}
            3. 子选择器：筛选选择器1元素下的选择器2元素
                * 语法：  选择器1 选择器2{}
            4. 父选择器：筛选选择器2的父元素选择器1
                * 语法：  选择器1 > 选择器2{}
            5. 属性选择器：选择元素名称，属性名=属性值的元素
                * 语法：  元素名称[属性名="属性值"]{}
            6. 伪类选择器：选择一些元素具有的状态
                * 语法： 元素:状态{}
                * 如： <a>
                    * 状态：
                        * link：初始化的状态
                        * visited：被访问过的状态
                        * active：正在访问状态
                        * hover：鼠标悬浮状态

 部分选择器代码演示

<!--
*@packageName 
*@className 基础选择器
*@author wang
*@date 2022/1/24 14:40
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*ID选择器*/
        #div1{
            color: greenyellow;
        }

        /*元素选择器*/
        div{
            color: coral;
        }

        /*类选择器*/

        .h{
            color: red;
        }


        /*属性选择器*/
        input[type='text'] {
            border: 5px solid;
        }

/*伪类选择器*/
/*        初始化的状态*/
        a:link{
           color: cyan;
        }
        /*鼠标悬浮状态*/
        a:hover{
            color: seagreen;
        }
        /*正在访问状态*/
        a:active{
            color:blue;
        }
        /*被访问过的状态*/
        a:visited{
            color: red;
        }

    </style>
</head>
<>

<!--测试基础选择器之ID选择器-->
    <div id="div1">hello world</div>
    <div>hello world2</div>

<hr>
<!--测试元素选择器-->
<div>hello world</div>
<div>hello world2</div>

<!--测试类选择器-->
<div class="h"> hello world</div>
<div>hello world2</div>

<!--测试属性选择器-->
<input type="text">



<!--测试伪类选择器-->
    <a href="#">
        点这里
    </a>

</body>
</html>

三、属性

   1. 字体、文本
        * font-size：字体大小
        * color：文本颜色
        * text-align：对其方式
        * line-height：行高 
    2. 背景
        * background：
    3. 边框
        * border：设置边框，符合属性
    4. 尺寸
        * width：宽度
        * height：高度
    5. 盒子模型：控制布局
        * margin：外边距
        * padding：内边距
            * 默认情况下内边距会影响整个盒子的大小
            * box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小
        * float：浮动
            * left
            * right
     

 边距图解
            

 四、注册页面案例实践

        案例效果

 代码演示

        

<!--
*@packageName 
*@className 注册页面Css
*@author wang
*@date 2022/1/24 18:54
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面Css</title>

    <style>
        /*给页面设置背景*/
        body{
            background: url(img/register_bg.png) no-repeat center;
            padding-top: 50px;
        }

        /*整个布局设置，三个盒子的大盒子*/
        .rg_layout{
            width: 900px;
            height: 500px;
            /*边界线的颜色，宽度*/
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
        }

        /*左边盒子相关设置*/
        .rg_left{
            /*border: 1px red solid;*/
            float: left;
            margin: 15px;
        }

        /*左边中文设置*/
        .p-left1{
            font-size: 20px;
            color: #ffd026;
        }
        /*左边英文设置*/
        .p-left2{
            font-size: 20px;
            color: #a6a6a6;
        }
/*中间盒子设置*/
        .rg_center{
            margin-top: 55px;
            /*border: 1px red solid;*/
            float: left;
        }

        /*右边盒子设置*/
        .rg_right{
            /*border: 1px red solid;*/
            float: right;
            margin: 15px;
        }

        /*右边的文字字号*/
        .p-right{
            font-size: 15px;
        }
        /*右边的立即登陆颜色*/
        .p-right2{
            color: pink;
        }

        /*中间盒子的左半部分文字效果*/
        .td-left{
            width: 100px;
            height: 45px;
            text-align: right;
            color: grey;
        }

        /*中间盒子的右半部分的文字效果*/
        .td-right{
            padding-left: 50px;

        }
        /*右半部分的边框效果*/
        #username,#password,#email,#firstName,#phone,#birth{
            width: 220px;
            height: 25px;
            padding-left: 15px;
            color: grey;
            border: 1px solid #a6a6a6;
            /*边框圆角矩形*/
            border-radius: 5px;
        }
        /*验证码边框*/
        #checkCode{
            width: 110px;
        }

        /*验证码图片效果*/
        #img-check{
            height: 25px;
            vertical-align: middle;
        }

        /*注册按钮效果*/
        #button-sub{
            width: 150px;
            height: 40px;
            background-color: #ffd026;
            border: 1px solid #ffd026;
        }



    </style>
</head>
<body>
<div class="rg_layout">

    <div class="rg_left">
        <p class="p-left1">新用户注册</p>
        <p class="p-left2">USER REGISTER</p>
    </div>

    <div class="rg_center">

        <!--定义一个表单 不要忘记属性-->
        <form action="#" method="post">
            <!--    定义一个表格，不要忘记属性-->

            <table >
                <!--        用户名-->
                <tr>
                    <td class="td-left">
                        <label for="username">用户名</label>
                    </td>
                    <td class="td-right">
                        <input type="text" name="username" placeholder="请输入账号" id="username">
                    </td>
                </tr>

                <!--        密码-->
                <tr>
                    <td class="td-left">
                        <label for="password">密码</label>
                    </td>
                    <td class="td-right">
                        <input type="password" name="password" placeholder="请输入密码" id="password">
                    </td>
                </tr>

                <!--        email-->
                <tr>
                    <td class="td-left">
                        <label for="email">Email</label>
                    </td>
                    <td class="td-right">
                        <input type="email" name="email" placeholder="请输入email" id="email">
                    </td>
                </tr>

                <!--        姓名-->

                <tr>
                    <td class="td-left">
                        <label for="firstName">姓名</label>
                    </td>
                    <td class="td-right">
                        <input type="text" name="name" placeholder="请输入真实姓名" id="firstName">
                    </td>
                </tr>

                <!--        手机号-->
                <tr>
                    <td class="td-left">
                        <label for="phone">手机号</label>
                    </td>
                    <td class="td-right">
                        <input type="text" name="phone" placeholder="请输入您的手机号" id="phone">
                    </td>
                </tr>

                <!--        性别-->
                <tr>
                    <td class="td-left">
                        <label>性别</label>
                    </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">
                        <label for="birth">出生日期</label>
                    </td>
                    <td  class="td-right">
                         <input type="date" name="birthDate" id="birth">
                    </td>
                </tr>

                <!--        验证码-->
                <tr>
                    <td class="td-left">
                        <label for="checkCode">验证码</label>
                    </td>
                    <td class="td-right">
                        <input type="text" name="checkCode" id="checkCode">
                        <img src="img/verify_code.jpg" id="img-check">
                    </td>
                </tr>
                <!--            注册按钮-->
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" name="button" value="注册" id="button-sub">
                    </td>
                </tr>

            </table>

        </form>
    </div>

    <div class="rg_right">

        <p class="p-right">已有用户？<a class="p-right2" href="#">立即登陆</a></p>
    </div>
</div>
</body>
</html>

空山新雨后~
关注
专栏目录
CSS学习
qq_41402786的博客
03-29 802
1.CSS是什么 CSS,全称“层叠样式表”。 css的作用就是为了表现美化网页。 包括： 字体/颜色 边距 高度 宽度 背景图片 网页定位 网页浮动等等 2.CSS的练习格式 html与css分开，专门建立css文件夹储存css文件 3.CSS的快速入门 CSS的优势： 8. 内容与表现分离 9. 网页结构表现统一，可以实现复用 10. 样式十分的丰富 11. 建议使用独立于html的css文件 12. 利用SEO，容易被搜索引擎收录 3.1CSS的三种导入方式 ** 1.第一种为内部样式，以改变标
简单学习css组合与CSS嵌套的写法
09-27
在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素样式的重要技术。本文主要探讨了CSS中的两种重要概念：组合（Combinations）和嵌套（Nesting），这两种技巧能够帮助开发者更加高效地编写和组织...
JavaWeb中基本的CSS的使用
weixin_33705053的博客
06-19 261
动图CSS：页面美化和布局控制 一. 概念： Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html的元素上，同时生效 二. 好处： 1. 功能强大 2. 将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率 三. CSS的使用：CSS与html结合方式 1. 内联...
CSS开发全攻略
最新发布
邓邓子的博客
09-25 1504
在网页设计与开发的世界中，CSS（Cascading Style Sheets，层叠样式表）是一种不可或缺的技术，它允许开发者对网页的布局和样式进行精细的控制。本文将从CSS的基本概念、作用以及它在现代网页设计中的重要性等方面进行详细概述。CSS是一种用于描述HTML或XML文档样式的样式表语言。它定义了如何将结构化文档（例如HTML文档或XML应用程序）呈现为网页。CSS的主要作用是分离文档的内容（HTML或XML结构）与文档的表现形式（布局、颜色、字体等），从而实现更高效的页面设计与维护。
CSS简单使用
dawuafang
05-15 134
CSS简单使用 标签 ： 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增强网页的显示效果. 即:CSS将网页内容与显示样式分离,增强了显示功能. CSS与HTML结合 CSS与HTML结合的方式有四种: style属性: 在每个HTML标签...
CSS 学习心得
12-09
这样不仅影响了自己的工作效率，还给UED的同事带去不少麻烦，正好这几天工作不是很紧张，在http://www.w3school.com.cn/index.html网站上浏览了一些关于CSS的资料，感觉CSS比我想象中的要简单多啦，再配合firefox...
动态的样式表lesscss:简单学习lesscss语法
09-25
LessCSS 语法简介 LessCSS 是一种动态样式表语言，它允许开发者使用变量、函数和运算符来书写 CSS 代码，从而提高了 CSS 的可读性和维护性。下面是 LessCSS 的一些基本语法和特点： 变量 LessCSS 允许使用变量来...
CSS 学习（上）
lvmengzou的专栏
06-30 459
2网页的血肉：CSSHTML 决定了网页中包含哪些内容，而CSS 则决定了这些内容呈现的样式CSS  为层叠样式表 2.1 基本结构CSS 语法的基本结构由两部分组成：选择器（selector），样式（style）。选择器指定了CSS作用的目标DOM元素，样式决定了在目标元素上应用何种样式，包括样式名（property）和样式值（value）。例：h2{        color:blue}2.2...
css入门学习
山有木兮
06-25 4094
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
CSS全面学习
以码平川的博客
03-01 606
CSS全面学习 课程内容 HTML 和CSS基础知识 html元素的分类和特性 html元素的默认样式和定制化 CSS选择器全解析 CSS常见属性逐一讲解 CSS布局实战 布局属性和组合解析 常见布局方案介绍 三栏布局案例 国内大站布局方案解析 动画和效果专题讲解 多背景多投影特效 3D特效编写实践 过渡动画和关键帧动画实践 动画细节和原理深入解析 框架集成和CSS过程化 预处理器作用和原理 Less和Sass代码实践 Bootstrap原理和用法 CSS过程化实践方式 JS框
css学习
qq_51177088的博客
03-27 496
文章目录css学习笔记（根据菜鸟教程）css使用方法id和class选择器嵌套选择器组合选择符css的插入方式样式优先级伪类/伪元素css基础背景，文本，字体盒子模型（边框设置）border边框？margin外边距与padding内边距位置disply 显示position 定位overflowfloat 浮动布局网格布局网页布局弹性布局（css3） css学习笔记（根据菜鸟教程） css使用方法 id和class选择器 id #chan{...} id="chan" class .chan{.
学习CSS（一）
qq_56994594的博客
04-12 187
小白学习CSS（一）
HTML与CSS学习笔记精要
- 创建简单的静态网页：通过HTML编写网页结构，使用CSS进行样式设计。 - 网页布局实践：利用CSS布局技术，如Flexbox和Grid，实现复杂的网页设计。 - 兼容性和性能优化：确保网页在不同的浏览器上能够兼容，并对CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空山新雨后~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值