JavaWeb笔记之前端开发CSS

一 、引言

1.1 CSS概念
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
     

二、 CSS简介

2.1 介绍
CSS:全称:Cascading Style Sheets 层叠样式表,定义如何显示HTML元素。
多个样式可以层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的应用优先级高的,不冲突的共同作用。
    
2.2 作用
修饰美化html网页。
外部样式表可以提高代码复用性从而提高工作效率。
html内容与样式表现分离,便于后期维护。
   
2.3 规范
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
   
2.4 基础语法
选择器{属性:值;属性:值….. }
  

   
注意事项:
请使用花括号来包围声明。
如果值为若干单词,则要给值加引号。
多个声明之间使用分号;分开。
css对大小不敏感,如果涉及到与html文档一起使用时,class与id名称对大小写敏感。
  

三、 CSS导入方式

3.1 内嵌方式
把CSS样式嵌入到html标签当中,类似属性的用法。
<div style="color:blue;font-size:50px">This is my HTML page. </div>
   
3.2 内部方式
在head标签中使用style标签引入css。
<style type=“text/css”> //告诉浏览器使用css解析器去解析div{color:red;font-size:50px}
</style>
      
3.3 外部方式
将css样式抽成一个单独文件,使用者直接引用。
创建单独文件 div.css
内容示例:div{color:green;font-size:50px}
引用语句写在head标签内部<link rel="stylesheet" type="text/css" href=“div.css"></link>rel:代表当前页面与href所指定文档的关系type:文件类型,告诉浏览器使用css解析器去解析href:css文件地址
   
3.4 @import
在页面中引入一个独立的单独文件。
<style type="text/css">@import url("div.css")
</style>
该内容放在head标签中
  
link和@import方式的区别:
        link所有浏览器都支持,@import某些版本低的IE不支持。
        @import是等待html加载完成才加载。
        @import不支持js动态修改。
   

四、 CSS选择器

主要用于选择需要添加样式的html元素。
    
4.1 基本选择器
元素选择器: 在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值}。
<style type="text/css">span{color: red;font-size: 100px}
</style>
   
id选择器:给需要修改样式的html元素添加id属性标识,在head中使用style标签引入在其中声明。
id选择器:#id值{属性:属性值}。
创建id选择器:<div id="s1">hello,everyone!</div><div id="s2">hello,everyone!</div><div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰<style type="text/css">#s1{color: red;font-size: 100px}#s2{color: green;font-size: 100px}#s3{color: blue;font-size: 100px}</style>
  
class选择器:给需要修改样式的html元素添加class属性标识,在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}。
创建class选择器:<div class="s1">hello,everyone!</div><div class="s2">hello,everyone!</div><div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰:<style type="text/css">.s1{color: purple;font-size: 100px}.s2{color: pink;font-size: 100px}.s3{color: yellow;font-size: 100px}</style>
    
备注:以上基本选择器的优先级从高到低:id选择器,class选择器,元素选择器。
      
4.2 属性选择器
根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明。
格式为:
htm标签[属性=‘属性值']{css属性:css属性值;}。
html标签[属性]{css属性:css属性值;}。
body内容:<form name="login" action="#" method="get"><font size="3">用户名:</font><input type="text" name="username" value="zhangsan"><br><font size="3">密码:</font><input type="password" name="password" value="123456"><br/><input type="submit" value="登录"></form>
head中书写:<style type="text/css">input[type='text'] {background-color: pink;}input[type='password'] {background-color: yellow;}font[size] {color: green}a[href] {color: blue;}</style>
    
4.3 伪元素选择器
主要是针对a标签
语法:
        静止状态 a:link{css属性}
        悬浮状态 a:hover{css属性}
        触发状态 a:active{css属性}
        完成状态 a:visited{css属性}
代码:<a href="https://hao.360.cn/">点我吧</a>
样式:<style type="text/css"><!--静止状态 -->a:link {color: red;}<!--悬浮状态 -->’a:hover {color: green;}<!--触发状态 -->a:active {color: yellow;}<!--完成状态 -->a:visited {color: blue;}</style>
       
4.4 层级选择器
父级选择器 子级选择器….,具体示例如下:
<div id="div1"><div class="div11"><span>span1-1</span></div><div class="div12"><span>span1-2</span></div>
</div>
<div class="div2"><div id="div22"><span>span2-1</span></div><div id="div23"><span>span2-2</span></div>
</div>
<style type="text/css">#div1 .div11{color:red;}#div1 .div12{color:purple;}.div2 #div22{color:green;}.div2 #div23{color:blue;}
</style>
   

五、 CSS属性

5.1 文字属性

   
5.2 文本属性

   
5.3 背景属性
    
5.4 列表属性

  
5.5 尺寸属性
width:设置元素的宽度。
height:设置元素的高度。
  
5.6 显示属性
显示属性display ,以下是常用取值:
        none:不显示。
        block:块级显示。
        inline:行级显示。
    
5.7 轮廓属性
绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。常用属性:

   
5.8 浮动属性
float
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

  
再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

   
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

   
clear 属性:规定元素的哪一侧不允许其他浮动元素。它的取值如下:

      
5.9 定位属性
position
相对定位(relative):元素框偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留。
<head><style type="text/css">h2.pos_left {position: relative;left: -20px}h2.pos_right {position: relative;left: 20px}</style>
</head>
<body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2><p>相对定位会按照元素的原始位置对该元素进行移动。</p><p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p><p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
    
绝对定位(absolute):元素框从文档流完全删除,并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框。 absolute是相对于离它最近的有定位的父元素进行定位。
<html><head><meta charset="utf-8" /><style type="text/css">h2.pos_abs {position: absolute;left: 100px;top: 150px}</style></head><body><h2 class="pos_abs">这是带有绝对定位的标题</h2><p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p></body>
</html>
     
固定定位(fixed): fixed是相对于浏览器窗口定位 。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#left {width: 200px;height: 200px;background-color: red;position: fixed;left: 0px;bottom: 0px;}#right {width: 200px;height: 200px;background-color: green;position: fixed;right: 0px;bottom: 0px;}#middle{width: 200px;height: 200px;background-color: blue;position: fixed;left: 0px;bottom: 50%;}</style></head><body><div id="left">左下</div><div id="right">右下</div><div id="middle">中间</div></body>
</html>
   

六、 CSS盒子模型

   
6.1 边框属性

   
6.2 外边距属性
margin:外间距,边框和边框外层的元素的距离。

   
6.3 内边距属性
padding:内间距,元素内容和边框之间的距离((top right bottom left))。
    

七、 CSS3扩展属性

7.1 border-radius
创建圆角
示例:border-radius: 25px;

    
7.2 box-shadow
用于向方框添加阴影
示例:box-shadow: 10px 10px 5px #888888;

   
7.3 background-size
属性规定背景图片的尺寸。
<body style="text-align: center;background:url(img/1.png);background-size: 200px 300px;background-repeat: no-repeat;">
</body>
   
7.4 background-image
为指定元素使用多个背景图像。

  
7.5 text-shadow
可向文本应用阴影。
示例:text-shadow: 5px 5px 5px #ffff00;

  

八、 案例

8.1 案例效果图

   
8.2 相关图片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/235543.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

美颜技术详解:深入了解视频美颜SDK的工作机制

本文将深入探讨视频美颜SDK的工作机制&#xff0c;揭示其背后的科技奥秘和算法原理。 1.引言 视频美颜SDK作为一种集成到应用程序中的技术工具&#xff0c;通过先进的算法和图像处理技术&#xff0c;为用户提供令人印象深刻的实时美颜效果。 2.视频美颜SDK的基本工作原理 首…

SVN小白常见操作流程

SVN小白常见操作流程 一、什么是Subversion&#xff1f;二、TortoiseSVN客户端安装教程三、SVN 操作3.1 SVN Ckeckout(检出)3.2 Add(新增文件)3.3 SVN Commit(提交)3.4 SVN Update(更新操作)3.5SVN Delete(删除操作)3.6 SVN Revert to a revision(版本回溯)3.7 不同版本内容之间…

Jenkins 执行远程脚本的插件—SSH2 Easy

SSH2 Easy 是什么&#xff1f; SSH2 Easy 是一个 Jenkins 插件&#xff0c;它用于在 Jenkins 构建过程中通过 SSH2 协议与远程服务器进行交互。通过该插件&#xff0c;用户可以在 Jenkins 的构建过程中执行远程命令、上传或下载文件、管理远程服务器等操作。 以下是 SSH2 Eas…

vue3使用mock模拟后端接口

安装mock axios yarn add mock yarn add axios 新建在src/mockdata/automenu.js 模拟后端的json数据格式 import Mock from mockjs Mock.mock(/menu,get,{status: 200,menuList: [{id : 1,iconCls: "fa fa-window",name: 系统管理,url: /},{id: 2,icon: icon-j…

YOLOv8改进 | 主干篇 | 利用MobileNetV1替换Backbone(轻量化网络结构)

一、本文介绍 本文给大家带来的改进机制是MobileNetV1&#xff0c;其是专为移动和嵌入式视觉应用设计的轻量化网络结构。这些模型基于简化的架构&#xff0c;并利用深度可分离卷积构建轻量级深度神经网络&#xff0c;其引入了两个简单的全局超参数&#xff0c;用于在延迟和准确…

【C语言】指针详解(一)

目录 1.内存和地址 1.1内存 1.2如何理解编址 2.指针变量和地址 2.1取地址操作符&#xff08;&&#xff09; 2.2指针变量和解引用操作符&#xff08;*&#xff09; 2.2.1指针变量 2.2.2拆解指针类型 2.2.3解引用操作符 2.3指针变量大小 1.内存和地址 1.1内存 在讲内…

《数据分析-JiMuReport》积木报表详细入门教程

积木报表详细入门教程 一、JimuReport部署入门介绍 积木报表可以通过源码部署、SpringBoot集成、Docker部署以及各种成熟框架部署&#xff0c;具体可查看积木官方文档 当前采用源码部署&#xff0c;首先下载Jimureport-example-1.5.6 1 jimureport-example目录查看 使用ID…

自动气象监测站助力生活生产

随着科技的发展&#xff0c;我们的生活和生产方式正在发生着日新月异的变化。其中&#xff0c;WX-CQ12 自动气象监测站作为一项气象监测设备&#xff0c;正在发挥着越来越重要的作用。它不仅为我们提供了更加准确、实时的天气信息&#xff0c;还为农业、交通、旅游等领域提供了…

python flask+vue实现前后端图片上传

python flaskvue实现前后端图片上传 vue代码如下&#xff1a; <template><div><input type"file" change"handleFileChange"/><button click"uploadFile">上传</button><br><img :src"imageUrl&…

uniapp如何原生app-云打包

首先第一步&#xff0c;需要大家在HBuilder X中找到一个项目&#xff0c;然后呢在找到上面的发行选项 发行->原生App-云打包 选择完该选中的直接大包就ok。 大包完毕后呢&#xff0c;会出现一个apk包&#xff0c;这是后将这个包拖动发给随便一个人就行了。 然后接收到的那…

2-高可用-负载均衡、反向代理

负载均衡、反向代理 upstream server即上游服务器&#xff0c;指Nginx负载均衡到的处理业务的服务器&#xff0c;也可以称之为real server,即真实处理业务的服务器。 对于负载均衡我们要关心的几个方面如下&#xff1a; 上游服务器配置&#xff1a;使用upstream server配置上…

摄像头画面作为电脑桌面背景

1. 创建文件main.pyw&#xff0c;文件内容 import base64 import io import os import threading import tkinter as tkimport cv2 import pystray import win32api import win32con import win32gui from PIL import Image, ImageTk from pystray import MenuItem, Menuclass…

Linux之yum管理器

目录 yum管理器 yum相关指令 yum list yum list | grep yum install yum remove 拓展 1.yum install -y man-pages 2.切换yum源 3.yum install -y epel-release 4. yum install -y lrzsz rz指令 sz指令 在window系统上&#xff0c;我们会在电脑自带的应用商…

mac电脑安装虚拟机教程

1、准备一台虚拟机&#xff0c;安装CentOS7 常用的虚拟化软件有两种&#xff1a; VirtualBoxVMware 这里我们使用VirtualBox来安装虚拟机&#xff0c;下载地址&#xff1a;Downloads – Oracle VM VirtualBox 001 点击安装 002 报错&#xff1a;he installer has detected an…

Windows11编译VTM源码生成Visual Studio 工程

VTM介绍 VTM作为H266/VVC标准的官方参考软件&#xff0c;一直用作H266/VVC标准的研究和迭代。关于H2666/VVC标准的介绍、代码、提案、文档等&#xff0c;可以参考H266/VVC编码标准介绍。 官方代码地址&#xff1a; https://vcgit.hhi.fraunhofer.de/jvet/VVCSoftware_VTM&…

【GoLang】哪些大公司正在使用Go语言

你见过哪些令你膛目结舌的代码技巧&#xff1f; 文章目录 你见过哪些令你膛目结舌的代码技巧&#xff1f;前言&#xff1a;哪些大公司正在使用Go语言谷歌&#xff08;Google&#xff09;&#xff1a;脸书&#xff08;Facebook&#xff09;&#xff1a;亚马逊&#xff08;Amazon…

字符串函数内存函数(从零到一)【C语言】

长度不受限制的字符串函数&#xff1a;strcpy,strcat,strcmp 长度受限制的字符串函数&#xff1a;strncpy,strncat,strncmp strlen strlen函数是库函数中我们最常使用的函数&#xff0c;它可以求出字符串的长度(不包含‘\0’) 使用方法 通过前面对strlen函数的模拟实现我们知…

深度学习模型压缩方法:剪枝方法分类介绍

本文将介绍深度学习模型压缩方法中的剪枝,内容从剪枝简介、剪枝步骤、结构化剪枝与非结构化剪枝、静态剪枝与动态剪枝、硬剪枝与软剪枝等五个部分展开。 一、剪枝简介 在介绍剪枝之前,首先介绍过参数化这个概念,过参数化主要是指在训练阶段,在数学上需要进行大量的微分求解…

二维码智慧门牌管理系统:实现数据通信安全

文章目录 前言一、传输隧道加密技术二、传输数据加密技术三、数据接入鉴权技术 前言 随着信息技术的蓬勃发展&#xff0c;智慧门牌管理系统已成为现代商业和家庭重要的一部分。然而&#xff0c;系统普及的同时也带来了数据通信安全的突出问题。为了解决这一挑战&#xff0c;二…

Netty Review - StringEncoder字符串编码器和StringDecoder 解码器的使用与源码解读

文章目录 概念概述StringEncoderStringDecoder Code源码分析StringEncoderStringDecoder 小结 概念 概述 Netty是一个高性能的网络应用程序框架&#xff0c;它提供了丰富的功能&#xff0c;包括编解码器&#xff0c;这些编解码器用于在网络中发送和接收数据时进行数据的编码和…