JavaWeb 速通CSS

这篇具有很好参考价值的文章主要介绍了JavaWeb 速通CSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、CSS入门

        1.基本介绍 : 

        2.CSS的作用 : 

        3.CSS的语法 : 

二、CSS样式

        1.字体颜色:

                1° 说明

                2° 演示

        2.边框 : 

                1° 说明

                2° 演示

        3.背景颜色 : 

                1° 说明

                2° 演示

        4.字体样式 : 

                1° 说明

                2° 演示

        5.div块居中 : 

                1° 说明

                2° 演示

        6.div文本居中 : 

                1° 说明

                2° 演示

        7.超链接去下划线 : 

                1° 说明

                2° 演示

        8.表格细线 : 

                1° 说明

                2° 演示

        9.无序列表去样式 : 

                1° 说明

                2° 演示

三、CSS引入方式

        1.行内式:

                1° 说明

                2° 演示

                3° 问题分析 

        2.写在head标签的style子标签中 : 

                1° 说明

                2° 问题分析

        3.以外部文件的形式引入 : 

                1° 说明

                2° 演示

四、CSS选择器

        1.元素选择器 : 

                1° 介绍

                2° 演示

        2.ID选择器 : 

                1° 介绍

                2° 演示

        3.类选择器 : 

                1° 介绍

                2° 演示

        4.组合选择器 :

                1° 介绍

                2° 演示

        5.选择器优先级 :

                1° 说明

五、CSS总结


一、CSS入门

        1.基本介绍 : 

        CSS,全称Cascading Style Sheets,指层叠样式表

        2.CSS的作用 : 

        1. 在没有 CSS 之前,修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性,不方便,所以 CSS 应运而生。
        
2. 使用 CSS 可以将 HTML 页面的 内容与样式分离。HTML中内容与样式原本杂糅在一块儿,若使用CSS来控制样式,就可以做到样式的统一管理,从而更好的控制页面,提高了 web 开发的工作效率(针对前端开发)。

        3.CSS的语法 : 

        格式如下:(主要包含选择器声明两部分)

        选择器 {

                声明1;

                声明2;

                声明3;

                ......

        } 

        注意事项:
        1° 声明由属性和属性值组成,属性值可以由程序⚪指定。

        2° 除最后一条声明外,所有声明都必须加分号“;”结尾,最后一条声明可不加分号

        当运行页面时,选择器对应的标签就会被渲染和修饰。

        可以通过修改颜色属性或大小属性来调试CSS。 

        CSS中的注释格式为: /* ...... */

        CSS语句要写在HTML页面——<head></head>标签中的<style></style>子标签中


二、CSS样式

        1.字体颜色:

                1° 说明

        颜色可以写 英文 的颜色名,eg : cyan ;也可以写 rgb值 ,eg : rgb(0 255 255);还可以用 十六进制表示 值 比如 #00FFFF。
        使用格式:
        color : cyan;
        color : #00FFFF;        ( 16进制的方式使用频率最高
        color : rgb(0,255,255);

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>color demo</title>
    <style type="text/css">
        div {
            width:250px;
            height: 75px;
            color:cornflowerblue;
            background-color: rgb(0,255,255);
        }
    </style>
</head>
<body>
  <div>
      Hello, my name's Cyan_RA9
  </div>
  <br/>
  <div>
      I like play basketball.
  </div>
  <br/>
  <div>
      What about you?
  </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        2.边框 : 

                1° 说明

        边框使用格式 : 

        <head>

                <style type="text/css"> 

                        选择器 { 

                                border : 2px solid darkcyan;

                        }

                </style>

        </head>

        注意事项:
        2px代表边框的宽度,也可以使用百分比的形式(eg : 50%);

        solid表示边框为实线,虚线用dashed表示

        对border属性修饰的属性值没有顺序要求,属性之间用空格隔开。

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border demo</title>
    <style type="text/css">
        div {
            width: 50%;
            height: 100px;
            border: 2px darkcyan solid
        }
    </style>
</head>
<body>
    <div>
        Everyone wants to succeed, but what would you do if you failed?
    </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        3.背景颜色 : 

                1° 说明

        使用格式:

        <head>
                <meta charset="UTF-8">
                <title>背景</title>
                <style>
                        div {
                                width: 175px;
                                height: 50px;
                                background-color: blue
                        }
                </style>
        </head>

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background_color demo</title>
    <style type="text/css">
        div {
            width:400px;
            height:75px;
            background-color: pink
        }
    </style>
</head>
<body>
    <div>
        When faced with a big challenge where potential failure lurk at every corner,
    </div>
    <div>
        Maybe you've heard this advice before---be more confident, and this is
    </div>
    <div>
        what you think when you hear it : if only it were that simple.
    </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        4.字体样式 : 

                1° 说明

          1. font-size: 指定字体大小,可以按照像素大小
         2. font-weight : 指定是否是粗体(粗体为bold)
         3. font-family : 指定字体类型(需要该电脑的字体库中有对应的字体)
        4. color : 指定字体 颜色

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-style demo</title>
    <style type="text/css">
        div {
            border: 2px purple dashed;
            width: 400px;
            height:100px;
            font-size: 30px;
            font-weight: bolder;
            font-family: consolas;
            color:darkgreen
        }
    </style>
</head>
<body>
    <div>
        but,what is confidence?
    </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        5.div块居中 : 

                1° 说明

        margin-left : auto;

        margin-left : auto;

        两个都写,可以达到块居中的效果。

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div block center Demonstration</title>
    <style type="text/css">
      div {
          border: 5px darkcyan solid;
          width: 500px;
          font-size: 20px;
          font-weight: bold;
          font-family: consolas;
          color:hotpink;
          margin-left: auto;
          margin-right: auto
      }
    </style>
</head>
<body>
    <div>
        Take the belief that you're valuable,worthwhile and capable,<br/>
        also known as self-esteem, adding the optimism that comes when <br/>
        you're certain of your abilities, and then empowered by these, <br/>
        act courageously to face the challenge head on.
    </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        6.div文本居中 : 

                1° 说明

        text-align:center;

        可以使块中的文本居中显示

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div block center Demonstration</title>
    <style type="text/css">
      div {
          border: 5px darkcyan solid;
          width: 550px;
          font-size: 20px;
          font-weight: bold;
          font-family: consolas;
          color:hotpink;
          margin-left: auto;
          margin-right: auto;
          text-align: center
      }
    </style>
</head>
<body>
    <div>
        this is confidence. It turns thoughts into action,<br/>
        so where does confidence even come from?
    </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        7.超链接去下划线 : 

                1° 说明

        text-decoration : none;

        该声明可以去掉文本的修饰(包括超链接的下划线)

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>href none decoration demo</title>
    <style type="text/css">
        a {
            border: 2px black dashed;
            text-decoration:none;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">点我去百度捏</a>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        8.表格细线 : 

                1° 说明

        border-collapse : collapse;

        可以设置表格内边框为细线

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table line demonstration</title>
    <style type="text/css">
        table, tr, th, td {
            border: 2px pink solid;
            width: 300px;
            border-collapse:collapse;
            text-align: center
        }
        table {
            border: 5px cornflowerblue solid;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Cyan</td>
            <td>21</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Five</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        9.无序列表去样式 : 

                1° 说明

        list-style:none;

        可以去除无序列表的样式。

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>unorderedList</title>
    <style type="text/css">
        ul {
            width: 500px;
            border: 3px solid cornflowerblue;
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>持国天王</li>
        <li>增长天王</li>
        <li>广目天王</li>
        <li>多闻天王</li>
    </ul>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端


三、CSS引入方式

        1.行内式:

                1° 说明

        直接使用HTML标签的style属性引入CSS。

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The way to introduce CSS No.1</title>
</head>
<body>
    <div style="border: 2px darkcyan dashed; width:500px;text-align: center;font-family: consolas">
        Two, how you're treated? This includes the social pressure of your environment.
    </div>
    <br/>
    <div style="border: 2px darkcyan dashed; width:500px;text-align: center;">
        And three, the part you have control over:the choice you make, the risk you take,<br>
        and how you respond to challenges and setbacks.
    </div>
    <br/>
    <div style="border: 2px darkcyan dashed; width:500px;text-align: center;">
        It isn't possible to completely untangle these three factors, but the personal <br/>
        choices we make certainly play a major role in confidence development.
    </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

                3° 问题分析 

        1.标签数量很多时,或样式使用种类很多时,造成代码量庞大,代码臃肿。
        2.代码拥挤在一行,可读性差;
        3.CSS 代码的复用率不高;可维护性差。

        2.写在head标签的style子标签中 : 

                1° 说明

        使用选择器来修饰对应的内容。

        eg : 

        <head>

                <!-- ...... -->

                <syle type="text/css">

                        div {

                                /*.......*/

                        }

                        span {

                                /* ...... */

                        }

                        ul {

                                /* ...... */

                        }

                </style>

        </head>

                2° 问题分析

        1.只能在同一页面内复用,代码维护不方便;
        2.实际项目中会有很多页面,需要到对应页面去修改,工作量大。

        3.以外部文件的形式引入 : 

                1° 说明

        在HTML文件外部另外写一个CSS文件,然后以链接的形式将外部的CSS文件引入到HTML页面中

        需要用到<link/>单标签。<link/>单标签中有两个属性很重要——
        href : CSS文件的路径;

        rel : 表示关联(必须有该属性)。rel="stylesheet"表示关联了样式表,即CSS文件。

        PS : 
        Δ实际开发中,推荐第三种方式!

                2° 演示

                首先创建CSS文件,如下图所示 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

                demo.css代码如下 : 

div {
    border: 3px plum solid;
    width:450px;
    background-color: cornflowerblue;
    font-family: consolas;
    font-weight:bold;
    text-align:center
}

span {
    font-size: 20px;
    color: peru;
}

                HTML文件代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The way to introduce CSS No.3</title>
    <link href="../../../css/demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div>
        So,by keeping in mind some practical tips, we do actually have the power
        to cultivate our own confidence.
    </div>
    <span>tip one---a quick fix</span>
</body>
</html>

                运行结果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端


四、CSS选择器

        1.元素选择器 : 

                1° 介绍

        1.元素选择器是CSS最常见的一种选择器。换句话说,HTML文档的元素就是最基本的选择器。
        2. CSS (元素/标签)选择器通常是某个 HTML 元素, 比如 p、h1、a、div 等

                2° 演示

                上文中用到的选择器全部是元素选择器(即直接以HTML元素名称来指定渲染对象)。

        2.ID选择器 : 

                1° 介绍

        元素选择器会修饰对应类型的所有元素;如果想单独修饰某个元素,可以使用id选择器

        id 选择器可以为标有特定 id 的 HTML 元素设置指定的样式;使用 id 选择器前,必须先在要修饰的标签中添加 id 属性,id属性值是唯一的,不能重复
        在<style> 标签中使用指定 id 选择器时,以 "# + id属性值" 来定义

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id selector</title>
    <style type="text/css">
        #div1 {
            border:3px cornflowerblue dashed;
            background-color: bisque;
            width: 450px;
            font-weight: bold;
            font-family: consolas;
            text-align: center;
        }
        #div2 {
            border:3px hotpink dashed;
            background-color: cornflowerblue;
            width: 550px;
            font-weight: bold;
            font-family: consolas;
            text-align: center;
        }
        #div3 {
            border:3px darkblue dashed;
            width: 300px;
            font-weight: bold;
            font-family: consolas;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="div1">
        There are a few tricks that can give you immediate confidence boost in a short term,
        picture your success when you beginning a difficult task,
    </div>
    <br/>
    <div id="div2">
        something as simple as listening to music with deep bass,it can promote
        feelings of power, you can even strike a powerful pose or give yourself a pep talk.
    </div>
    <br/>
    <div id="div3">
        Tip two---believe in you ability to improve.
    </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        3.类选择器 : 

                1° 介绍

        如果既不想修饰某类元素的全部整体,也不想单独修饰某类元素的单个个体,就可以考虑使用类选择器,类选择用于修饰某类元素的部分元素(一部分)

        类选择器与id选择器在使用上有以下几点区别——
        类选择器在使用前,也需要在要修饰的元素中添加属性,只不过是class属性;

        class属性的值可以重复

        在<style> 标签中使用指定 类选择器时以". + class属性值"的形式来定义

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class selector demo</title>
    <style type="text/css">
        .c1 {
            border: 2px palegreen solid;
            background-color: bisque;
            width: 450px;
            font-family: consolas;
        }
    </style>
</head>
<body>
    <div class="c1">
        If you're looking for a long-term change,consider the way you think about
        your abilities and talents.Do you think there fixed at birth? or that they
        can be developed like a muscle.
    </div>
    <div>
        There beliefs matter because they can influence how you react when you're
        faced with setbacks.
    </div>
    <div class="c1">
        If you have a fixed mindset,meaning that you think your talents are locked in place,
        you might give up, assuming you've discovered something you're not very good at.
    </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        4.组合选择器 :

                1° 介绍

        组合选择器可以让多个选择器共用同一个 css 样式代码(样式公用)。

        格式如下 : 

        选择器1,选择器2...选择器n {

                声明1;

                ......

        }

                2° 演示

                代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>combination of selector</title>
    <style type="text/css">
        p,#pDemo,.pDemo2 {
            border:3px cornflowerblue solid;
            background-color: palegreen;
            width: 450px;
            font-family: consolas;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>
        But if you have a growth mindset and think your abilities can improve,
        a challenge is an opportunity to learn and growth.
    </p>
    <span id="pDemo">
        Neuroscience supports the growth mindset.
    </span>
    <br/><br/>
    <div class="pDemo2">
        The connections in your brain do get stronger and grow with study and practice.
    </div>
</body>
</html>

                运行效果 : 

JavaWeb 速通CSS,# HTML+CSS+JS,JavaWeb,css,前端,java,全栈,后端

        5.选择器优先级 :

                1° 说明

        同多种选择器同时存在时,优先级从高到低如下 :

        行内样式 > id选择器 > 类选择器 > 元素选择器

        巧记 : 

        贴身 > 个体 > 部分 > 全部


五、CSS总结

        CSS虽然只是前端基础三件套之一,但CSS的内容其实很多很丰富。本篇博文中仅仅列举了最常用的一些CSS样式和CSS的一些重要知识点,还有很多知识没有总结到,因为up以后端为主。

        除了一些常用样式外,CSS的三种引入方式,以及几种选择器(元素,id,class)的使用都要掌握。文章来源地址https://www.toymoban.com/news/detail-545577.html

到了这里,关于JavaWeb 速通CSS的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaWeb 速通CSS

    目录 一、CSS入门         1.基本介绍 :          2.CSS的作用 :          3.CSS的语法 :  二、CSS样式         1.字体颜色:                 1° 说明                 2° 演示         2.边框 :                  1° 说明                 2° 演示         3.背景颜色 :   

    2024年02月13日
    浏览(28)
  • javaweb个人主页设计(html+css+js)

    目录 1 前言和要求 1.1 前言 1.2 设计要求 2 预览 2.1 主页页面 2.2 个人简介 2.3 个人爱好 2.4 个人成绩有代码,但是图片已省略,可以根据自己情况添加 2.5 收藏夹 3 代码实现  3.1 主页 3.2 个人简介 3.3 个人爱好 3.4 个人成绩(根据自己的情况添加) 3.5 收藏夹 4 可能要用的图片,

    2024年02月09日
    浏览(89)
  • 前端(HTML + CSS + JS)

    HTML是超文本标记语言,超文本是指文本、声音、图片、视频、表格、链接等等。标记表示由许许多多的标签组成。HTML页面是运行到浏览器上的。 (1)HTML 文件基本结构 html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性 body 标签中写的是页面上显示的内

    2024年02月05日
    浏览(49)
  • 前端基础面试题(HTML,CSS,JS)

    前后端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库  web前端面试题库 VS java后端面试题库大全 代码结构:  使页面在没有css的情况下,也能够呈现出好的内容结构 有利于SEO:  爬虫根据标签来分配的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓

    2024年02月09日
    浏览(53)
  • 前端 :用HTML , CSS ,JS 做一个秒表

    2024年02月06日
    浏览(42)
  • 前端HTML、CSS、JS、VUE3 汇总

    学习https://developer.mozilla.org/zh-CN/docs/Learn/CSS 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 使用VS Code运行前端代码 在VS Code上安装前端插件 正在更新中~ ✨ 提示:这里可以添加本文要记录的大概内容: 学习路线 知识定位 HTML基础 标签、表格、表单、

    2024年02月13日
    浏览(51)
  • 常见前端基础面试题(HTML,CSS,JS)(三)

      类型转换可以分为两种, 隐性转换 和 显性转换 主要分为三大类:数值类型、字符串类型、布尔类型 三大类的原始类型值的转换规则我就不一一列举了 数值类型(引用类型转换) 字符串类型(引用类型转换) 类型 转换前 转换后 number 4 4 string \\\"1\\\" 1 string \\\"\\\" 0 boolean true 1 b

    2024年02月12日
    浏览(61)
  • 前端练手小项目--自定义时间(html+css+js)

    关于要写这篇文章的原因 是记录在工作上遇到的困难需求, 是希望能给大家提供一些解决问题的思路 接下来我描述这个需求的多样性,难点在哪。 勾选勾选框开始时间与结束时间默认显示昨天与今天。 取消勾选框开始时间与结束时间清空。 选择开始时间,勾选框勾选,结

    2024年02月12日
    浏览(44)
  • 前端简单动态圣诞树动画(HTML、js、css)

    效果展示:  注释: 整体圣诞树分为3个部分,书的主干、粒子特效、树上的卡片 树上的卡片(重点):每一张卡片上都有一个名字,代表圣诞树的叶子,后面可以根据自己需求更改,比如全部改成喜欢人的名字,在JS代码的第五行内更改内容 树的动态旋转通过js实现、主干是

    2024年02月04日
    浏览(63)
  • ChatGPT给出的前端面试考点(html+css+JS)

    HTML HTML是什么,它的主要作用是什么? 什么是DOCTYPE,为什么在HTML文档中使用它? HTML5相对于之前的HTML版本有哪些主要的新特性? 解释语义化HTML的概念。为什么要使用语义化标签? 如何在HTML中嵌入JavaScript和CSS? 什么是表单,如何在HTML中创建一个表单? 什么是响应式图片

    2024年01月21日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包