华恩JAVA班第37天

2024-06-13 10:58
文章标签 java 37 华恩

本文主要是介绍华恩JAVA班第37天,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

华恩JAVA班第37天

 

CSS2

CSS2是层叠样式表,它是一种排版技术,能让元素按特定的样式显示,如字体大小,颜色、布局等。在网页中有三种使用方法:

用<style>标记声明,如

<style>
div {font-size: 12pt;}
div {color: blue;}
</style>
在元素中用style属性指定,如:

<div style="font-size: 12pt;color: blue">CSS测试</div>
用LINK标记链接一个外部CSS文件,如:

<link rel="stylesheet" type="text/css" href="mycss.css">
按作用域来分,有三类的样式表,分别是网页解释器样式表、作者样式表和浏览者样式表。网页解释器样式表也叫默认的样式表,当没有另外的样式表加载时使用。作者样式表就是网页设计师设计的样式表。浏览者样式表是浏览网页的用户在浏览器上另外设置的样式表。

CSS的基本数据类型

integer,表示整数,可取正负值。如:12,-24。

number,表示数字,可取正负值和小数。如:12.1,-14.3。

lenght,表示距离长度,可取正负值和小数,后跟一个单位,如:12em,12cm。单位又分相对单位和绝对单位,相对单位有:em,ex,px。绝对单位有:in(英寸),cm(公分),mm(公厘),pt(等于1/72英寸),pc(等于12pt)。

percentage,表示百分比值,可取正负和小数。如:20%,-40%。

uri,表示网络资源。如:http://www.ringkee.com。

inherit参数值

<style>
body {width: 600px;}
.div1 {width: 120%;}
.div2 {width: inherit;}
说明:
div1的宽度是600px*120%
div2的宽度继承父元素body的参数,是600px
选择符的作用是指定哪些元素使用哪些样式。选择符可以分为简单选择符和复合选择符两类,简单选择符是类型选择符、通用选择符加上零个或多个属性选择符、ID选择符、伪类等组成。复合选择符是用">"和"+"号结合多个简单选择符组成。">"和"+"号两边要加上空格。下面介绍各种选择符:

通用选择符,用"*"号表示,可用于所有标记。如:

<style>
* {font-size: 14pt;}
*.EM {color: red;}
</style>
<div>应用字体样式</div>
<em class="EM">应用红色样式</em>
类型选择符,与标记名一样,只作用已该标记上。如:

<style>
div {font-size: 14pt;}
</style>
<div>应用样式</div>
子代选择符,HTML标记是可嵌套的,子代选择符可把样式表应用于子嵌套的子标记上,如:

<style>
div p b {font-size: 14pt;}
</style>
<div>
<p>没有应用样式</p>
<p><b>应用样式</b></p>
</div>
子选择符,与子代选择符类似,但它只调用第一层子元素。如:

<style>
div > b {color: red;}
div p > em {color: green;}
</style>

<div><b>当b标记是div标记的子标记时应用红色样式</b></div>
<div><p><em>当em是p的子标记且p是div的子标记时应用绿色样式</em></p></div>
邻近选择符,当两个元素位于同一层且在位置是前后关系时,可以使用邻近选择符。两个选择符用"+"号分开,如果A位于B之前,则B可应用样式。如:

<style>
div + p {color: red;}
</style>

<div>没有应用样式</div>
<p>应用红色样式。</p>
属性选择符,HTML标记有属性,我们可为特定的属性指定样式。有四种写法,分别是:

[属性],样式只应用于指定的属性。

[属性=值],样式只应用于指定的属性与值都相同的情况

[属性~=值],样式只应用于指定的属性且属性值包含指定值的情况,属性值是用空格分隔的字符串。

[属性|=值],样式只应用于指定的属性且属性值是的第一个字符串是指定值的情况,属性值是用"-"分隔的字符串。

<style>
[href] {color: red;}
A[href="http://www.ringkee.com"] {color: green;}
table[summary~="table"] {color: black;}
table[summary|="this-is-a-table"] {color: blue;}
</style>

<a href="http://www.python.org">应用红色样式</a>
<a href="http://www.ringkee.com">应用绿色样式</a>
<table summary~="This is a table>
 <tr>
  <td>应用黑色样式</td>
 </tr>
</table>
<table summary|="This-is-a-table>
 <tr>
  <td>应用蓝色样式</td>
 </tr>
</table>
类选择符,与属性选择符类似,但它只指对class属性应用样式。类选择符用"."语法,如.value与[class~=value]是一样的。

<style>
.myid {color: red;}
</style>

<div class="myid">应用红色样式</div>
ID选择符,与属性选择符类似,但它只指对ID属性,用"#"语法。

<style>
#myid {color: red;}
</style>

<div id="myid">应用红色样式</div>

:first-child伪类,当标记是另一个标记的第一个子标记时,应用样式。

<style>
p:first-child {color: red;}
</style>

<p>p是body的第一个子标记,应用红色样式</p>
<div>测试</div>
<p>p标记是body的第三个子标记,不应用红色样式</p>
:link和:visited伪类只作用于a标记,在指定href属性的前提下,:link表示a标记还没被点击时的样式,:visited表示被当点后的样式。

<style>
a:link {color: blue;}
a:visited {color: red;}
</style>

<a href="http://www.ringkee.com">链接没点击前是蓝色的,点击后是红色的</a>
:hover,:active和:fouce伪类也只能作用于a标记,且也要指定href属性。:hover指定当用户把鼠标移到a标记上并且指针变成手型时应用的样式。:active指定点击a链接并放开鼠标时所显示的样式。:fouce指定用户点击a标记瞬间,即链接成为焦点时所显示的样式。:hover要放在:link和:visited之后,否则:hover的样式会覆盖:link和:visited的样式。

<style>
a:link {color: blue;}
a:visited {color: red;}
a:haover {color: green;}
a:focus {color: black;}
a:active {color: white;}
</style>

 <a href="http://www.ringkee.com">应用样式</a>
:left及:right伪类只作用于页面内容。当页面在左边时应用:left指定的样式,当页面在右边时应用:right指定的样式。

:first-line只对div和p标记不效,样式只应用于这两个标记内的第一行内容。

<style>
:first-line {color: red;}
</style>

<div width:50px;>
该元素内的第一行内容应用红色样式。
</div>
:first-letter伪类也只能作用于div和p标记,与:first-line不同的是它只作用于标记内的第一个字符。如果我们想要每一行的开头字符大一点就可使用该伪类。

<style>
:first-letter {font-size: 40pt;}
</style>

<p>这行文字开头第一个字符的大小是40pt</p>
:before和:after伪类可在内容的前面或后面增加特定的内容或指定样式。

<style>
p:before {content: "("; color: red;}
p:after {content: ")"; color: green;}
</style>

<p>这行文字前后会增加一对括号,前括号为红色</p>
<p>这行文字前后会增加一对括号,后括号为绿色</p>
层叠选择符是指当有多个选择符的样式都应用于同一个标记时的选择规则。该规则利用一个三位数来确定,数字最大的就可选中。这三位数的确定规则的这样的,如果选择符中有ID选择符,则百位数加1,否则为0。如果有属性选择符、类选择符或伪类选择符,则十位数加1,否则为0。如果有类型选择符,则个位数加1,否则为0。如果选择符是#div div,这三位数则是101。让我们分析一下,#div是ID选择符,所以在百位数上加1,div是类型选择符,所以个位数上加1变成101。"*"表示0,优先级最低。

样式表的主要功能是指定同一个文件在不同媒体上按不同的样式显示。通过在种方式可指定不同媒体

@media方式

<style>
@media screen {div{color:red;}}
@media print {div{color:green;}}
</style>

<div>不同媒体显示不同颜色</div>
@import是另一种指定不同媒体的方式,它可引入外部的css文档。它的语法格式是:

<style>
@import url("simple.css") screen;
</style>

在HTML4.0中,可以用LINK标记的media属性为不同媒体类型指定样式表。

<LINK rel="stylesheet" href="import.css" type="text/css" media="print">
!important规则会改变应用样式的优先级,有!important参数样式的优先级最高,会优先显示。

<style>
h1 {color:red;}
h1 {color:green !important;}
</style>

<h1>字体为绿色</h1>

 

 

 

更多信息可以参见同学富晓磊的博客:http://blog.sina.com.cn/u/1798827371

这篇关于华恩JAVA班第37天的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1057105

相关文章

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

SpringBoot整合(ES)ElasticSearch7.8实践

《SpringBoot整合(ES)ElasticSearch7.8实践》本文详细介绍了SpringBoot整合ElasticSearch7.8的教程,涵盖依赖添加、客户端初始化、索引创建与获取、批量插... 目录SpringBoot整合ElasticSearch7.8添加依赖初始化创建SpringBoot项

JAVA覆盖和重写的区别及说明

《JAVA覆盖和重写的区别及说明》非静态方法的覆盖即重写,具有多态性;静态方法无法被覆盖,但可被重写(仅通过类名调用),二者区别在于绑定时机与引用类型关联性... 目录Java覆盖和重写的区别经常听到两种话认真读完上面两份代码JAVA覆盖和重写的区别经常听到两种话1.覆盖=重写。2.静态方法可andro

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.