JavaWeb,CSS的学习

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

CSS,层叠样式表(Cascading Style Sheets),能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有网页对象和模型样式编辑的能力,简单来说,美化页面。

CSS引入方式

方式一,行内式

行内式,通过元素开始标签的style属性引入,样式语法为 样式名:样式值; 样式名:样式值; ……

缺点:

  1. 代码复用度低,不利于维护
  2. css样式代码和html结构代码交织在一起,影响阅读,影响文件大小,影响性能

例:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>css引入方式,行内式</title>
</head>
<body>
    <input type="button" value="按钮"
    style="width: 60px;
    height: 40px;
    background-color: yellowgreen;
    color: antiquewhite;
    font-size: 20px;
    font-family: '隶书';
    border: 2px solid green;
    border-radius: 5px;"
    >
</body>
</html>

效果如图:

JavaWeb,CSS的学习,JavaWeb学习,css

 文章来源地址https://www.toymoban.com/news/detail-794170.html

方式二,内嵌式

通过在head标签中的style标签定义本页面的公共样式

通过选择器来确定样式的作用元素

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>css引入方式,内嵌式</title>
    <style>
        input{
            width: 60px;
            height: 40px;
            background-color: yellowgreen;
            color: antiquewhite;
            font-size: 20px;
            font-family: '隶书';
            border: 2px solid green;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
</body>
</html>

在头标签中定义style标签中的input的样式后,所有的input标签的css样式都会有其样式。

方式三,外部样式表

将css代码单独放入一个.css文件中,哪个html文件需要这些代码就在head中通过link标签引入

link标签:<link/>

属性:

href,指明css文件的路径。

rel,指明引入的文件类型,如果引入css文件,文件类型为stylesheet

例如:

css文件:

input{
    width: 60px;
    height: 40px;
    background-color: yellowgreen;
    color: antiquewhite;
    font-size: 20px;
    font-family: '隶书';
    border: 2px solid green;
    border-radius: 5px;
}

html文件:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>css引入方式,内嵌式</title>
    <link href="css/btn.css" rel="stylesheet">
</head>
<body>
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
</body>
</html>

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>
    <style>
        input{
            width: 80px;
            height: 40px;
            background-color: color-mix(in srgb, color percentage, color percentage);
            color: darkblue;
            border: 3px solid gold;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮"/>
    <input type="button" value="按钮"/>
    <input type="button" value="按钮"/>
</body>
</html>

id选择器

id选择器根据标签的id值确定样式的作用元素

一般每个元素都有id值,但是在一个页面中,id的值不应该相同,应该具有唯一性

语法格式:#id值{ }

缺点:因为id值有唯一性,通过id选择器指定的样式只能作用到一个元素上

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素选择器</title>
    <style>
        btn3{
            width: 80px;
            height: 40px;
            background-color: color-mix(in srgb, color percentage, color percentage);
            color: darkblue;
            border: 3px solid gold;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input id="btn1" type="button" value="按钮"/>
    <input id="btn2" type="button" value="按钮"/>
    <input id="btn3" type="button" value="按钮"/>
</body>
</html>

如此在style中定义的样式只会作用于id值为btn3的元素上

class选择器

class选择器根据元素的class属性值确定样式的作用元素

元素的class属性值可以重复,而且一个元素的class属性可以有多个值,多个属性之间用空格分开

语法:.class属性值{ }

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素选择器</title>
    <style>
        .shapeClass{
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }
        .colorClass{
            background-color: color-mix(in srgb, color percentage, color percentage);
            color: darkblue;
            border: 3px solid gold;
        }
        .fontClass{
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮" class="shapeClass colorClass fontClass"/>
    <input type="button" value="按钮" class="shapeClass fontClass"/>
    <input type="button" value="按钮" class="colorClass fontClass"/>
    <input type="button" value="按钮" class="colorClass"/>
    <input type="button" value="按钮"/>
</body>
</html>

class属性会根据其class属性值引入样式,效果如图:

JavaWeb,CSS的学习,JavaWeb学习,css

CSS浮动

css的浮动使得元素脱离文档流,按照指定的方向(左或右发生移动),直到它的边缘碰到包含框或另一个浮动框的边框为止。

浮动后一定不会将文字挡住,文字会被挤到别的方向,就像水一样。

文档流是文档中可显示对象在排列时所占用的位置,脱离文档流就是在页面中不占位置了。

一个元素脱离文档流后,它在文档流中的下一个元素就会占用它的位置。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css浮动</title>
    <style>
        .outerDiv{
            width: 500px;
            height: 300px;
            border: 1px solid green;
            background-color: beige;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
        .d1{
            background-color: aqua;
            float: right;
        }
        .d2{
            background-color: rgb(255, 0, 0);
        }
        .d3{
            background-color: rgb(255, 255, 0);
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">diva</div>
        <div class="innerDiv d2">divb</div>
        <div class="innerDiv d3">divc</div>
    </div>
</body>
</html>

效果如图:

JavaWeb,CSS的学习,JavaWeb学习,css

注:浮动后的元素不会覆盖其他元素。

CSS定位

css定位要用到的样式有position、left、right、top、bottom

potion样式有

static:默认

absolute:绝对

relative:相对

fixed:相对

绝对定位代表定位只根据页面来定位

relative相对定位会相对其原本的位置来定位

fixed相对定位会相对浏览器窗口来定位,即如果页面较长,可以向下拖拽,但是不论如何拖拽,都会显示在窗口的同一个位置,一些广告就是如此。

一般left和right之中只用其中一个,top和bottom之中只用其中一个。

CSS盒子模型

对于一个块元素,width和height表示横向和纵向的容量,border是在容量的边缘外再加上指定像素的空间的厚度的空间,就像给此块元素套了层细胞壁。而内边距和外边距是根据border的内外,指定一定的区域留空,内边距的大小不会影响容量,而是将border项外扩张,就像扩大细胞壁和细胞膜的间距。

内边距:padding

外边距:margin

比如,将diva的右外边距设置为10px:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        .outerDiv{
            width: 500px;
            height: 300px;
            border: 1px solid green;
            background-color: beige;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
        }
        .d1{
            background-color: aqua;
            margin-right: 10px;
        }
        .d2{
            background-color: rgb(255, 0, 0);
        }
        .d3{
            background-color: rgb(255, 255, 0);
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">diva</div>
        <div class="innerDiv d2">divb</div>
        <div class="innerDiv d3">divc</div>
    </div>
</body>
</html>

效果如图:

JavaWeb,CSS的学习,JavaWeb学习,css

以margin为例,margin: 10px; 表示上下左右都是10px的外边距。margin: 10px 20px; 表示上下外边距是10px,左右外边距是20px。margin: 10px 20px 30px 40px表示上外边距是10px,右外边距是20px,下外边距是30px,左外边距是40px,即按顺时针上右下左的顺序。当然也可以使用margin-right,margin-top等方法分别指定大小。

padding也是同理。

margin-auto和padding-auto即自动居中

 

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

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

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

相关文章

  • 【JavaWeb】前端之CSS基础认知

    目录 前言 1、CSS基本语法规范 2、向HTML中引入CSS的方式 2.1、内部样式 2.2、外部样式  2.3、内联样式 3、CSS选择器 3.1、基础选择器 3.1.1、标签选择器 3.1.2、类选择器 3.1.3、id选择器 3.1.4、通配符选择器  3.2、复合选择器 3.2.1、后代选择器 4、CSS常用元素属性 4.1、字体属性 4.2、

    2024年02月11日
    浏览(60)
  • 【JavaWeb】day01-HTML&CSS

    图片标签: img src :指定图像URL(绝对路径/相对路径) width :图像宽度(像素/相对于父元素的百分比) height :图像高度(像素/相对于父元素的百分比) 标题标签: h1 - h6 水平线标签: hr 超链接: a href :指定资源访问的url target :指定在何处打开资源链接 _self :默认值,

    2024年02月04日
    浏览(33)
  • [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript

    目录 一 特色  二  收获​编辑  三 什么是web? 四 网站的工作流程  五 web网站的开发模式​编辑  六 web开发课程学习安排  七、初始web前端  八 HTML、CSS 8.1 什么是HTNLCSS(w3cschool) 8.2 HTML快速入门 8.3 VS Code开发工具 8.3.1  插件  8.3.2 主题(改变颜色) 8.3.3 设置 8.4 基础标签样

    2024年02月12日
    浏览(42)
  • Javaweb之HTML,CSS的详细解析

    场景: 在网页中以表格(行、列)形式整齐展示数据,我们在一些管理类的系统中,会看到数据通常都是以表格的形式呈现出来的,比如:班级表、学生表、课程表、成绩表等等。 标签: table : 用于定义整个表格, 可以包裹多个 tr, 常用属性如下: border:规定表格边框的宽

    2024年02月05日
    浏览(37)
  • JavaWeb(5)——HTML、CSS、JS 快速入门

    目录 一、JavaScript 对象  二、JavaScriptBOM对象和DOM对象  三、JavaScript 事件监听 事件绑定 常见事件 案例练习  四、JavaScript 内存分配机制 五、JavaScript 函数作用域  六、JavaScript 函数构造器            所以说对象的赋值(也可以用这种方式查询)有两种方式,一个是 .

    2024年02月16日
    浏览(36)
  • JavaWeb(3)——HTML、CSS、JS 快速入门

    • 赋值运算符( = ) • 一元运算符 (自增和自减,并明白区别) 众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符。而一元、二元和三元运算符是根据操作数(表达式)的个数来进行分类的。 一元运算符只需要一个操作数。

    2024年02月16日
    浏览(34)
  • JavaWeb(1)——HTML、CSS、JS 快速入门

            JavaWeb 是使用 Java 技术来构建 Web 应用程序的一种方法。         HTML(超文本标记语言,负责网页的结构)是一种用于创建网页结构和内容的标记语言。它由一系列标签组成,每个标签都有特定的功能。开发人员可以使用 HTML 来定义页面的结构、文本、图像、

    2024年02月15日
    浏览(37)
  • JavaWeb(2)——HTML、CSS、JS 快速入门

    目录 一、JavaScript 结构 💬 什么是BOM,什么是DOM?👭 BOM(浏览器对象模型 👨‍💻): DOM(文档对象模型 🏡): 总结下来就是 🌱  : 二、JavaScript 书写位置 🐟 三、JavaScript 注释 🔥 四、JavaScript 输入输出语法 🤖  五、JavaScript 变量 💎  六、JavaScript 变量命名 ✨

    2024年02月15日
    浏览(51)
  • JavaWeb(4)——HTML、CSS、JS 快速入门

     数组筛选(查找,将原来数组中的某些数据去除) 数组筛选(查找,数组中的最大和最小值) 数组修改(数组中每个元素末尾都加新元素)  数组修改(数组中每个元素开头都加新元素)  数组删除指定元素 冒泡排序 这段代码实现了一种冒泡排序算法: 首先,定义了一个

    2024年02月17日
    浏览(37)
  • 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日
    浏览(84)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包