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 ...
随机推荐
- Cropper.js使用笔记
官网:https://fengyuanchen.github.io/cropperjs/ github:https://github.com/fengyuanchen/cropperjs 由于文档不好 ...
- 如何获取STM32 MCU的唯一ID
前段时间由于应用需要对产品授权进行限制,所以研究了一下有关STM32 MCU的唯一ID的资料,并最终利用它实现了我们的目标. 1.基本描述 在STM32的全系列MCU中均有一个96位的唯一设备标识符. ...
- Confluence 6 数据中心的 SAML 单点登录最佳实践和故障排除
最佳实践 SAML 授权仅仅在有限的时间进行校验.你需要确定运行你的应用的计算机时间与 IdP 的时间是同步的. 如果你应用中的用户和用户组是通过用户目录进行配置的,你通常希望用户来源目录和你的 Id ...
- 【python】kafka在与celery和gevent连用时遇到的问题
前提:kafka有同步,多线程,gevent异步和rdkafka异步四种模式.但是在与celery和gevent连用的时候,有的模式会出错. 下面是我代码运行的结果. 结论:使用多线程方式! 使用同步 ...
- Nginx详解九：Nginx基础篇之Nginx的访问控制
基于IP的访问控制:http_access_module 不允许指定网段的用户访问:配置语法:deny address | CIDR | unix: | all;默认状态:-配置方法:http.ser ...
- C++ Primer 笔记——const 限定符
1.因为const对象一旦创建后其值就不能再改变,所以const对象必须初始化. 2.默认情况下const对象只在文件内有效,如果想在多个文件之间共享const对象,必须在变量的定义之前添加exter ...
- Python 开发的 IDE 和代码编辑器，你选择的哪一个？
为了方便,我会分两个大类去说明,一类是适用于软件开发的比较通用的编辑器或 IDE ,我们可以通过插件等形式支持 Python 的开发,另一个是专注于 Python 开发的编辑器或 IDE . 不过在此 ...
- Spring.Net 简单实例-02(属性注入)
说明:接续Spring.Net 简单实例-01(IOC) 话不多说看操作 1:为UserInfo添加属性 2: 修改App.config中代码 <?xml version="1.0&q ...
- Just Oj 2017C语言程序设计竞赛高级组E: DATE ALIVE（二分匹配）
E: DATE ALIVE 时间限制: 1 s 内存限制: 128 MB 提交 我的状态 题目描述 五河士道家里的精灵越来越多了,而每一个精灵都想和他有一个约会.然而五河士道却只有一个,无奈 ...
- Nginx中配置undertow进行两个项目的动静分离配置
#user nobody; worker_processes ; pid /var/run/nginx.pid; events { worker_connections ; } http { incl ...