CSS(JavaEE初阶系列14)

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

目录

前言:

1.CSS是什么

1.1CSS基本语法

2.引入样式

2.1内部样式表

2.2行内样式表

2.3外部样式

3.选择器

3.1选择器的种类

3.1.1基础选择器

3.1.2复合选择器

4.常用元素属性

4.1字体属性

4.2文本属性

4.3背景属性

4.4圆角矩形

4.5元素的显示模式

4.6盒模型

4.7内边距

4.8外边距

4.9弹性布局

结束语:


前言:

在上一节中小编与大家分享了有关于JavaScript的一些基础知识,以及给大家演示了几个案例,接下来小编带着大家一起来看一下有关于前端中的另一个技术CSS,想要让界面好看,那么就离不开CSS的渲染。话不多说我们一起来看吧。

1.CSS是什么

CSS是层叠样式表,所谓“层叠”就是针对html的元素/标签,可以同时应用多组CSS样式,将多组样式叠加在一起。“样式”就是大小、位置、间距、颜色、字体、边框、背景....统称为“样式”,它描述了一个网页张啥样。

CSS能够对网页元素的位置的排版进行像素精确控制,实现美化页面的效果,能够做到页面的样式和结构分离。

1.1CSS基本语法

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改。
  • 声明决定修改啥。
  • 声明的属性是键值对,使用;区分键值对,使用:区分键和值。

<body>

    <style>

        p{

            /* 设置字体颜色 */

            color: red;

            /* 设置字体大小 */

            font-size: 30px;

        }

    </style>

    <p>hello</p>

</body>

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

注意:

  • CSS要写到style标签中(后面还会介绍其他写法)。
  • style标签可以放到页面任意位置,一般是放置在head标签中。
  • CSS使用/**/作为注释。

2.引入样式

2.1内部样式表

内部样式是直接把CSS嵌入到HTML中,放到style标签里。

    <!-- 在style标签中写的是css代码,他可以放置在head中也可以放置在body中 -->

    <style>

        div{

            font-size: 50px;

            color: red;

        }

    </style>

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在style标签中写的是css代码,他可以放置在head中也可以放置在body中 -->
    <style>
        div{
            font-size: 50px;
            color: greenyellow;
        }
    </style>
    <div>hello world!</div>
</body>
</html>


结果展示:
CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

2.2行内样式表

行内样式是将CSS写到一个单独的.css文件中,有html通过link标签来引进来。

首先我们先来创建一个.css文件。

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

代码展示:

html代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过link标签将css文件引入进来 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>hello world!</div>
</body>
</html>


css文件代码展示:

div {
    font-size: 50px;
    color: blue;
}


结果展示:
CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

2.3外部样式

内部样式也叫内联样式,他是直接把CSS属性写到元素的style属性内。

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="color: blueviolet; font-size: 60px;"> hello world!</div>
</body>
</html>


结果展示:
CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

3.选择器

选择器就是要我们选中页面中的元素然后再进行操作。只有先选中元素才能生效。下面我们来分别来看一下四种选择器。

3.1选择器的种类

3.1.1基础选择器

  • 标签选择器

标签选择器是用来选中页面中的所有同名标签的元素,它的缺点也很显而易见就是很难针对某个元素进行个性化制定。

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
</head>
<body>
    <style>
        p {
            color: red;
            font-size: 30px;
        }
        div {
            color: burlywood;
            font-size: 20px;
        }
    </style>
    <p>hello</p>
    <p>world</p>
    <div>css</div>
    <div>JavaScript</div>
</body>
</html>


结果展示:
CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

  • 类选择器

在css中创建一个“类名”,这个类名对应一组css属性,制定让html元素应用这样的类名即可。

代码展示:

css文件代码:

.one {
    color: rosybrown;
    font-size: 50px;
}
.tow {
    color: blueviolet;
    font-size: 30px;
}


html文件代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <link rel="stylesheet" href="Test3.css">
</head>
<body>
    <div class="one">hello</div>
    <div class="tow">hello</div>
</body>
</html>


结果展示:
CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

  • id选择器

一个html标签中可以有一个id属性,这个属性的值会被作为身份标识的唯一值。所以通过id选择器就可以给制定元素设置样式了。

代码展示:

css代码展示:

#test {
    color: brown;
    font-size: 50px;
}


html代码展示:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <link rel="stylesheet" href="Test4.css">
</head>
<body>
    <div id="test">hello world</div>
</body>
</html>

结果展示:
CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

  • 通配符选择器

通配符选择器就是给所有的都设置样式。

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
</head>
<body>
    <style>
        * {
            color: aquamarine;
            font-size: 40px;
        }
    </style>
    <div>hello</div>
    <p>world</p>
</body>
</html>


结果展示:
CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

3.1.2复合选择器

上述都是css中最基础的选择器,其实在css中海油很多复杂的“复合选择器”,下面我们只给大家介绍一种后代选择器。

  • 后代选择器
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>后代选择器</title>
    </head>
    <body>
        <div class="one">
            <h3>hello</h3>
        </div>
        <div class="tow">
            <h3>world</h3>
        </div>
        <style>
            .one {
                color: chocolate;
            }
            .tow {
                color: cadetblue;
            }
        </style>
    </body>
    </html>

后代选择器的效果就是把上述三种基础选择器进行组合,同时能够体现出“标签的层次结构”。

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
</head>
<body>
    <div class="one">
        <h3>hello</h3>
    </div>
    <div class="tow">
        <h3>world</h3>
    </div>
    <style>
        .one {
            color: chocolate;
        }
        .tow {
            color: cadetblue;
        }
    </style>
</body>
</html>


结果展示:
CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

除了后代选择器之外还有以下这些,小编这里就不给大家一一介绍了。

  • 子选择器
  • 并集选择器
  • 伪类选择器

4.常用元素属性

4.1字体属性

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
</head>
<body>
    <div class="one">hello</div>
    <style>
        .one {
            font-family: '微软雅黑';
            font-size: 100px;
            font-weight: 900;
            font-style: italic;
        }
    </style>
</body>
</html>


结果展示:

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

我们也可以在控制台中通过勾选下面的条件来看到效果。

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

4.2文本属性

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
</head>
<body>
    <div class="one">hello world</div>
    <style>
        .one {
            font-size: 100px;
            /* 文本颜色 */
            color: brown;
            /* 文本对齐,左对齐(left),右对齐(right),居中对齐(center) */
            text-align: center;
            /* 文本装饰,加一个下划线... */
            text-decoration: underline;
            /* 文本缩进 */
            text-indent: 20px;
            /* 行高(行间距) */
            line-height: 100px;
        }
    </style>
</body>
</html>


结果展示:

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

注意:

这里颜色的写法有很多中,其中可以直接写表示颜色的单词,也可使用rgb的方式来表示,还可以使用十六进制的方式来表示。

 CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

4.3背景属性

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景设置</title>
</head>
<body>
    <div class="background">1</div>

    <style>
        .background {
            font-size: 100px;
            width: 200px;
            height: 160px;
            color: blueviolet;
            background-color: gold;
            /* 导入背景图 */
            border-image: url(cat.jpg);
            /* 禁止平铺 */
            background-repeat: no-repeat;
            /* 设置背景图的位置 */
            background-position: center center;
            /* 设置背景图的大小 */
            background-size: 2000px 1600px;
        }      
    </style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景设置</title>
</head>
<body>
    <div class="one"></div>
    <style>
        .one {
            background-image: url(cat.jpg);
            height: 300px;
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</body>
</html>


结果展示:

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

4.4圆角矩形

我们之前生成的边框都是矩形的,但是如果我们想要让他变成圆边的该怎么弄呢?如下代码所示:

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角矩形</title>
</head>
<body>
    <div>111</div>
    <style>
        div {
            width: 200px;
            height: 100px;
            border: 2px solid green;
            border-radius: 10px;
        }
    </style>
</body>
</html>


结果展示:

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

4.5元素的显示模式

在CSS中,HTML的标签的显示模式有很多,此处只重点介绍两个:

块级元素和行内元素。

块级元素:

        像我们之前学习的h1-h6、p、div、ul、ol...都是块级元素。

它的特点:

  • 独占一行。
  • 高度、宽度、内外边距、行高都可以控制。
  • 宽度默认是父级元素宽度的100%(和父级元素一样框宽)。
  • 是一个容器(盒子),里面可以放行内和块级元素。

行内元素/内联元素:
        常见的元素有:a、strong、b、em、i、del、s、ins...

特点:

  • 不独占一行,一行可以显示多个。
  • 设置高度、宽度、行高无效。
  • 左右外边距有效(上下无效),内边距有效。
  • 默认宽度就是本身的内容。
  • 行内元素只能容纳文本和其他行内元素,不能放块级元素。

行内元素和块级元素的区别:

  • 块级元素独占一行,行内元素不独占一行。
  • 块级元素可以设置宽高,行内元素不能设置宽高。
  • 块级元素四个方向都能设置内外边距,行内元素垂直方向不能设置。

使用display属性可以修改元素的显示模式:

  • display:block;(修改成块级元素)。
  • display:inline;(修改成行内元素)。

一般都是修改成块级元素,不会说是把块级元素修改成行内元素,也可以使用display:none实现元素隐身的效果。

4.6盒模型

每一个HTML元素就相当于是一个矩形的“盒子”,这个盒子是由这几个部分组成的。

  • 边框:border
  • 内容:content
  • 内边距:padding
  • 外边距:margin

如下图所示:
CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

4.7内边距

padding是设置内容和边框之间的距离的。

基础写法:
默认内容是顶着边框来放置的,用padding来控制这个距离可以给四个方向都加上边距。

  • padding-top 上
  • padding-bottom 下
  • padding-left 左
  • padding-right 右

复合写法:

可以把多个方向的padding合并到一起。

  • padding:5px; 表示四个方向都是5px。
  • padding:5px 10px; 表示上下内边距是5px,左右内边距是10px。
  • padding:5px 10px 20px; 表示上内边距是5px,左右内边距是10px,下内边距是20px。
  • padding:5px 10px 20px 30px; 表示上内边距是5px,右内边距是10px,下内边距是20px,左内边距是30px。(顺时针)

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边距</title>
</head>
<body>
    <div>设置内边距</div>
    <style>
        * {
            /* 防止撑大盒子 */
            box-sizing: border-box;
        }

        div {
            padding-top: 20px;
            padding-bottom: 10px;
            padding-left: 20px;
            padding-right: 10px;
        }
    </style>
</body>
</html>


结果展示:

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

4.8外边距

基础写法:

控制盒子和盒子之间的距离。可以给四个方向都加上外边距。

  • margin-top 上
  • margin-bottom 下
  • margin-left 左
  • margin-right 右

复合写法:

规则与padding一样。

  • margin:10px; 四个方向都是10px
  • margin:10px 20px; 上下外边距为10px,左右外边距为20px。
  • margin:10px 20px 30px; 上外边距10px,左右外边距20px,下外边距30px。
  • margin:10px 20px 30px 40px; 上外边距10px,右外边距20px,下外边距30px,左外边距40px。

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距</title>
</head>
<body>
    <div>test</div>
    <style>
        * {
            box-sizing: border-box;
        }
        div {
            margin-top: 10px;
            margin-bottom: 20px;
            margin-left: 30px;
            margin-right: 40px;
        }
    </style>
</body>
</html>


结果展示:

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

 

4.9弹性布局

我们先来看一下下面的这个案例。

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
</head>
<body>
    <div class="one">
        <div class="tow">hello1</div>
        <div class="tow">hello2</div>
        <div class="tow">hello3</div>
        <div class="tow">hello4</div>
    </div>
    <style>
        .one {
            width: 1000px;
            height: 300px;
            background-color: brown;
        }
        .tow {
            width: 150px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</body>
</html>


结果展示:

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端通过结果我们可以看出来里面的元素是垂直方向排列的,那么有的时候我们希望块级元素是可以水平方向排列。此时我们就可以使用弹性布局了。

如下所示:
代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
</head>
<body>
    <div class="one">
        <div class="tow">hello1</div>
        <div class="tow">hello2</div>
        <div class="tow">hello3</div>
        <div class="tow">hello4</div>
    </div>
    <style>
        .one {
            width: 1000px;
            height: 300px;
            background-color: brown;
            /* 开启弹性布局 */
            /* 一旦开启了弹性布局,此时内部的子元素就会按照水平的方向进行排布,子元素里面的子元素是不受影响的 */
            display: flex;
            /* justify-content:设置水平方向的排列规则 */
            justify-content: space-between;
            /* align-items:设置垂直方向的排列规则 */
            align-items: center;
        }
        .tow {
            width: 150px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</body>
</html>


结果展示:

CSS(JavaEE初阶系列14),JavaEE初阶,css,前端

结束语:

好了这节的CSS基础知识小编就给大家讲解到这里了,有不会的地方记得给小编留言,希望这节对大家了解CSS有一定帮助,想要学习的同学记得关注小编和小编一起学习吧!如果文章中有任何错误也欢迎各位大佬及时为小编指点迷津(在此小编先谢过各位大佬啦!)文章来源地址https://www.toymoban.com/news/detail-652485.html

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

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

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

相关文章

  • 【前端|CSS系列第1篇】CSS零基础入门之CSS的基本概念和选择器

    欢迎来到CSS零基础入门系列的第一篇博客!在这个系列中,我们将一起学习CSS(层叠样式表)的基础知识,探索如何为网页添加样式和布局。本篇博客将重点介绍CSS的基本概念和选择器,帮助你理解CSS的核心概念。 CSS,即层叠样式表(Cascading Style Sheets),是一种用于控制网

    2024年02月12日
    浏览(54)
  • Web 前端—HTML+CSS系列

    (1)知识点 :是制作网页的编程语言 浏览器把代码解析后的样子就是我们看到的网站 一个网站是由很多个网页组成的 查看网页代码源 (2).html网页制作 新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式(打开记事本)——输入要输入的内容—

    2024年02月04日
    浏览(54)
  • 【前端面试手册】CSS系列-回流与重构

    本专栏收录于前端面试手册-CSS系列如果该文章对您有帮助还希望你能点一个小小的订阅,来增加博主创作的动力✍🏻话不多说开始进入正题 回流和重构在前端CSS中是一个常见的问题,那么你对回流何重构有哪些了解呢? 一、什么场景下会触发回流和重构,如何减少回流重构

    2024年02月11日
    浏览(55)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(52)
  • 【前端 | CSS系列】—— 第1篇:如何实现水平垂直居中对齐?

    单纯的元素 左右居中 对齐: 块级元素 可以使用 magrin: 0 auto ; 非块级元素 使用 text-align: center;

    2024年02月13日
    浏览(50)
  • 【前端八股文】浏览器系列:性能优化——HTML、CSS、JS、渲染优化

    本系列目录:【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 性能优化,从以下几个方面来进行。 避免HTML中直接写CSS viewport加速页面渲染 使用语义化标签 减少标签的

    2023年04月20日
    浏览(58)
  • 网络原理(JavaEE初阶系列11)

    目录 前言: 1.网络原理的理解 2.应用层 2.1自定义协议的约定 2.1.1确定要传输的信息 2.1.2确定数据的格式 3.传输层 3.1UDP 3.1.1UDP报文格式 3.2TCP 3.2.1确认应答 3.2.2超时重传 3.2.3连接管理 3.2.3.1三次握手 3.2.3.2四次挥手 3.2.4滑动窗口 3.2.5流量控制 3.2.6拥塞控制 3.2.7延时应答 3.2.8捎带

    2024年02月13日
    浏览(45)
  • 多线程(JavaEE初阶系列7)

    目录 前言: 1.常见的锁策略 1.1乐观锁和悲观锁 1.2轻量级锁和重量级锁 1.3自旋锁和挂起等待锁 1.4互斥锁与读写锁 1.5可重入锁与不可重入锁 1.6公平锁与非公平锁 2.CAS 2.1什么是CAS 2.2自旋锁的实现 2.3原子类 3.synchronized 3.1synchronized的原理以及基本特点 3.2偏向锁 3.3轻量级锁 3.4重

    2024年02月14日
    浏览(32)
  • 多线程(JavaEE初阶系列4)

    目录 前言: 1.单例模式 1.1饿汉模式 1.2懒汉模式 1.3结合线程安全下的单例模式 1.4单例模式总结 2.阻塞式队列 2.1什么是阻塞队列 2.2生产者消费者模型 2.2.1 上下游模块之间进行“解耦合” 2.2.2削峰填谷 2.3阻塞队列的实现 结束语: 在上节中小编主要与大家分享了多线程中遇到

    2024年02月15日
    浏览(48)
  • 多线程(JavaEE初阶系列2)

    目录 前言: 1.什么是线程 2.为什么要有线程 3.进程与线程的区别与联系 4.Java的线程和操作系统线程的关系 5.多线程编程示例 6.创建线程 6.1继承Thread类  6.2实现Runnable接口 6.3继承Thread,使用匿名内部类 6.4实现Runnable接口,使用匿名内部类 6.5lambda表达式创建Runnable子类对象 7.

    2024年02月15日
    浏览(35)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包