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 ...
随机推荐
- C#将DLL嵌入到exe当中
1.选中项目文件,找到Resources.resx,双击Resources.resx,然后添加文件(选择需要的dll文件),点击确定,项目下会自动生成一个Resources文件夹,里面包含添加dll. ...
- Oracle 网络监听配置管理
Oracle 网络配置与管理 详细信息可以参考以下信息: [学习目标] 一.原理解析 二.配置侦听器(LISTENER) 三.配置客户端网络服务名 四.关于注册 五.查询某服务是静态还是动态注册 Or ...
- lightoj1234 打表技巧：分块打表
/* 打不了那么大的表,所以只记录分块的信息即可 */ #include<bits/stdc++.h> using namespace std; #define maxn 1000005 ...
- SSM + Android 网络文件上传下载
SSM + Android 网络交互的那些事 2016年12月14日 17:58:36 ssm做为后台与android交互,相信只要是了解过的人都知道一些基本的数据交互,向json,对象,map的交互 ...
- 怎样在win7 IIS中部署网站
怎样在win7 IIS中部署网站? IIS作为微软web服务器的平台,可以轻松的部署网站,让网站轻而易举的搭建成功,那么如何在IIS中部署一个网站呢,下面就跟小编一起学习一下吧. 第一步:发布IIS文 ...
- 存储区域网络（Storage Area Network，简称SAN）
存储区域网络(Storage Area Network,简称SAN)采用网状通道(Fibre Channel ,简称FC,区别与Fiber Channel光纤通道)技术,通过FC交换机连接存储阵列和服 ...
- 插件使用一顶部消息提示---overhang
overhang 是一个非常好的消息提示插件,它是在顶部提示. 官方网站:https://github.com/paulkr/overhang.js 使用方法 1.引入jquery库和jqeury u ...
- 20165206 2017-2018-2 《Java程序设计》第五周学习总结
20165206 2017-2018-2 <Java程序设计>第五周学习总结 教材学习内容总结 内部类:支持在一个类中定义另一个类的类. 外嵌类:包含内部类的类,称为内部类的外嵌类. 匿名 ...
- OpenCV-Python入门教程7-PyQt编写GUI界面
前面一直都是使用命令行运行代码,不够人性化.这篇用Python编写一个GUI界面,使用PyQt5编写图像处理程序.包括:打开.关闭摄像头,捕获图片,读取本地图片,灰度化和Otsu自动阈值分割的功能. ...
- 去掉A标签的点击选中边框
非IE a:focus { outline:none; }