Java 之 CSS
1.CSS
a.定义：CSS 指层叠样式表
b.意义：为了解决内容与表现分离的问题
c.特点：多个样式可层叠为一
2.用法：
a.行内样式：style
<span style="color:red">99</span>元
b.内部样式：（只对当前网页有效）
<head>
<style type="text/css">
选择器
</head>
①标签选择器
选择器(标签名)｛
属性名：属性值
属性名：属性值
｝
p{
color:green;
}
②ID选择器
#id名字｛
属性名：属性值
属性名：属性值
｝
#textID{
color:orange;
}
③类选择器：
.类名｛
属性名：属性值
属性名：属性值
｝
.textClass｛
color:blue;
｝
c.外部样式表：（通过link标签引入）
<link rel="stylesheet" href="my.css"/>
d.优先级：行内样式>ID选择器>类选择器>标签选择器
4.派生选择器：
a.共享选择器：
.myDiv,a{
color:red;
}
b.后代选择器：
.myDiv p{
color:blue
}
c.直接子元素选择器：
.myDiv> div>p {
color:green;
}
d.相邻兄弟选择器
div+p{
font-weight:bold;
}
5.属性
a.背景属性——background (应用于块级元素中)
background-color:brown;
background-image:url('image/c.jpg');
background-repeat:no-repeat; /*不平铺*/
background-attachment:fixed; /*背景固定*/
background-position:-400px -700px; /*背景偏移*/ background：url('image/c.jpg') no-repeat center; /*另一种写法*/
b.字体属性——font
font-family:sans-serif;
font-style:italic; /*斜体*/
font-size:2em; /*em是基于父级容器的字体大小的倍数*/
font-weight:blod; /*粗细，可取值100-900， inherit为随父级*/ font:cursive italic 2em 200; /*另一种写法*/
c.文本属性——text
text-decoration:none; /*去掉下划线等修饰*/
text-decoration:underline; /*添加下划线*/
text-align:center;
direction:rtl; /*对齐方式*/
line-height:30px; /*行高*/
letter-spacing:-0.5em; /*字符间距*/
word-spacing:20px; /*单词间距*/
text-indent:50px; /*首行缩进*/
text-transform:uppercase; /*也可填lowercase、capital，代表大小写互换和首字母大写*/
white-space:pre-line; /*按格式换行*/
d.列表——list-style
list-style-type:decimal /*项目符号：upper-roman、lower-roman、lower-alpha、upper-alpha、disc、square等等*/
list-style-image:url("c.jpg"); /*项目符号为图片*/
list-style-position:inside; /*有边距*/ list-style:decimal inside; /*另一种用法*/
e.边框属性——border
border-style:solid;
border-width:1px;
border-color:red; border-top-width:2px; border:solid 1px red; /*另一种写法*/ /*特别写法*/
border-width:1px 3px;
注：当border-width只有一个值时，表示四边效果一样
当有两个值时，表示（上下），（左右）
当有三个值时，表示（上），（左右），（下）
当有四个值时，表示（上），（右），（下），（左） （顺时针）
6.伪类：
a.初始化效果
a:link{
color:darkgray;
test-decoration:none;
}
b.当鼠标悬停时的效果
a:hover{
color:green;
font-size:32px;
}
c.点击不放的效果
a:active{
color:blue;
}
d.访问过后的效果
a:visited{
color:gold;
}
e.焦点效果
input:focus{
background-color:lightgray;
}
7.溢出处理：
overflow:hidden; /*溢出部分隐藏*/
overflow:scroll; /*溢出部分产生滚动条*/
8.隐藏处理：
display:none; /*隐藏*/
display:block; /*以块的形式显示*/ visibility:hidden; /*隐藏*/
visibility:visible; /*显示*/
9.浮动：
float:left; /*左浮动*/
float:right; /*右浮动*/ clear:both; /*清除浮动带来的影响*/
10.定位 与 层级
a.定为：
①static：静态的，默认的
②absolute：绝对定位
在没有父级标签的情况下，以浏览器左上角为原点
如果父级元素有定位（除了static），以父级左上角为原点，以此类推
③relative：相对定位
自己本身的左上角为原点
④fixed：固定定位
以浏览器的左上角为原点，并脱离了文本流
position:relative;
left:100px; /*距离左边100px*/
top:100px; /*距离上边100px*/
b.层级：（在定位的情况下才能使用，除了static）
z-index:2;
数字越大，层级越高
11.盒子模型
a.基本组成：外边距（margin），边框（border），内边距（padding）
b.只有一个值时，表示四边效果一样
当有两个值时，表示（上下），（左右）
当有三个值时，表示（上），（左右），（下）
当有四个值时，表示（上），（右），（下），（左） （顺时针）
margin:10px 20px;
margin-left:200px;
Java 之 CSS的更多相关文章
- Java基础 —— CSS
CSS:层叠样式表(Cascading Style Sheets) --> 提高显示功能,定义样式 html提供了div与span,只为了封装文本数据,div为一行数据,span为行内的数据. ...
- 疯狂学习java web2(css)
CSS应该是样式描述的意思,定义如下: 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 ...
- java：CSS（定位，组合选择符，边距，Float，Table的样式，显示和隐藏，换行，盒子模型，iframe和frameset框架）
1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- Java中CSS&JS篇基础笔记
HTML就是由一组标签所组成的.HTML的字体标签: <font>标签: 属性:color,size,face HTML的排版标签: h标签:标题标签. p标签:段落标签. b标签:加粗标 ...
- HTML、JavaScript、Java、CSS它们的注释有哪些相同和不同？
<!--html--> /*css*/ //javascript /*javascript*/
- 第59节:Java中的html和css语言
欢迎到我的简书查看我的文集 前言: HTML 英文: HyperText Markup Language内容 html是超文本标记语言,是网页语言的基础知识,html是通过标签来定义的语言,所有代码都 ...
- CSS高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
- 【异常】java.lang.NoClassDefFoundError: com/lowagie/text/pdf/PdfContentByte
异常信息: java.lang.NoClassDefFoundError: com/lowagie/text/pdf/PdfContentByte at com.star.sms.busines ...
- 应该具备的调试技能(java)
------Java部分---------- 1. tomcat在eclispe中怎样启动调试模式2. 带有main方法的Java应用程序怎样启动调试模式3. 调试在eclispe中的快捷键 F5 F ...
随机推荐
- 自然语言处理之关键词提取TF-IDF
统计每篇文章重要的词作为这篇文章的关键词,用tf-idf来实现.生产中有很多第三包可以调用,这里记录原理,顺便熟练python 1.公式 : 计算词频TF 考虑到文章有长短之分,为了便于不同文章的比较 ...
- swift 实践- 11 -- UISlider
import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoa ...
- sleep()和wait()的区别及wait方法的一点注意事项
一.查看API sleep是Thread类的方法,导致此线程暂停执行指定时间,给其他线程执行机会,但是依然保持着监控状态,过了指定时间会自动恢复,调用sleep方法不会释放锁对象. 当调用sleep方 ...
- python 面向对象编程（高级篇）
飞机票 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对 ...
- Java_解惑
书名 ================================================================================================= ...
- Confluence 6 尝试从 XML 备份中恢复时解决错误
错误可能是因为数据库突然不可访问而产生.也有可能是你备份文件有问题,你需要找到你 XML 备份文件中违反数据库规定的记录修改这个记录后再创建一个新的 XML 备份: 在实例开始恢复的时候,请按照下面的 ...
- mysql 去除重复 Select中DISTINCT关键字的用法 在使用mysql时，有时需要查询出某个字段不重复的记录，虽然mysql提供 有distinct这个关键字来过滤掉多余的重复记录只保留一条，但往往只用它来返回不重复记录的条数，而不是用它来返回不重记录的所有值。其原因是 distinct只能返回它的目标字段，而无法返回其它字段，这个问题让我困扰了很久，用distinct不能解决的话，
在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供 有distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是用它来返回不重记 ...
- 使用springboot actuator监控应用
微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...
- 学习Maven POM
什么是POM POM stands for "Project Object Model".It is an XML representation of a Maven projec ...
- 反序列化json的坑
json格式没有错误,内容没有什么异常 反序列化一直显示第一行有异常符号, 在https://jsonlint.com/上面检测了一下,发现了这个 解决办法: UTF-8格式编码 改成 UTF-8无B ...