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 ...
随机推荐
- 体验go语言的风骚式编程
最近想搞搞后台开发,话说注意力就转移到了公司用的golang.用Go做微服务比较方便,或许是因为golang强悍的语法吧,看到go的语法,自己已被深深的吸引.关于学习后台如何选择可以参考<做后台 ...
- 终于，我还是下决心学Java后台了
我没有什么本事,人也丑,也不会忽悠,只能硬着头皮学习了.最近计划学习Java后台,因为最近接了私活的问题,好多都要Java后台和前端一起做.平常我在做什么,当然是忙着赚钱了 除了敲代码,你还有什么副业 ...
- 2018谷歌I/O开发者大会8大看点汇总 新品有哪些
2018谷歌I/O开发者大会8大看点汇总 新品有哪些美国科技媒体The Verge近日撰文,列举了在即将召开的2018年谷歌I/O开发者大会上的8大看点,包括Android P.人工智能等等. 以下为 ...
- MVVM 简介
转:https://objccn.io/issue-13-1/ 所以,MVVM 到底是什么?与其专注于说明 MVVM 的来历,不如让我们看一个典型的 iOS 是如何构建的,并从那里了解 MVVM: 我 ...
- LeetCode（89）：格雷编码
Medium! 题目描述: 格雷编码是一个二进制数字系统,在该系统中,两个连续的数值仅有一个位数的差异. 给定一个代表编码总位数的非负整数 n,打印格雷码序列.格雷码序列必须以 0 开头. 例如,给定 ...
- linux基础实操四
实操一: 1)为新加的硬盘分区,一个主分区大小为10剩余空间给扩展分区,在扩展分区上划分2个逻辑分别为5G 2)式化主分区为ext3系统 #mkfs.ext3 /dev/sdb1 3 将逻辑分区设置为 ...
- servlet 遇到的奇怪问题
一. servlet URl 连接多了 %09 原因value里面多了个空格 value=" value'; 改成 value="value'; 二.servlet get方法可以 ...
- Best Free Hacking E-Books 2017 In PDF Format
1.Best Free Hacking E-Books 2017 In PDF Format: 电子书籍下载地址 后续我会更新在我的百度云资源 上,需要的留言Black Belt Hacking &a ...
- weixinShare.js / 极简微信分享插件
weixinShare.js / 极简微信分享插件 / 版本:0.1 这是一个很简单.很实用的微信分享插件,无需jQuery,只需要在网页里加入一行JS代码,即可自动识别微信浏览器并启动微信分享的提示 ...
- Android Https双向认证 + GRPC
keywords:android https 双向认证android GRPC https 双向认证 ManagedChannel channel = OkHttpChannelBuilder.for ...