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的更多相关文章
	

    
						
  1. Java基础 —— CSS
		
    CSS:层叠样式表(Cascading Style Sheets) --> 提高显示功能,定义样式 html提供了div与span,只为了封装文本数据,div为一行数据,span为行内的数据.  ...
    
		
    2. 
						
  2. 疯狂学习java web2(css)
		
    CSS应该是样式描述的意思,定义如下: 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 ...
    
		
    3. 
								
  3. java：CSS（定位，组合选择符，边距，Float，Table的样式，显示和隐藏，换行，盒子模型，iframe和frameset框架）
		
    1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...
    
		
    4. 
						
  4. Java中CSS&JS篇基础笔记
		
    HTML就是由一组标签所组成的.HTML的字体标签: <font>标签: 属性:color,size,face HTML的排版标签: h标签:标题标签. p标签:段落标签. b标签:加粗标 ...
    
		
    5. 
						
  5. HTML、JavaScript、Java、CSS它们的注释有哪些相同和不同？
		
    <!--html--> /*css*/ //javascript /*javascript*/
    
		
    6. 
						
  6. 第59节:Java中的html和css语言
		
    欢迎到我的简书查看我的文集 前言: HTML 英文: HyperText Markup Language内容 html是超文本标记语言,是网页语言的基础知识,html是通过标签来定义的语言,所有代码都 ...
    
		
    7. 
						
  7. CSS高级选择符
		
    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
    
		
    8. 
						
  8. 【异常】java.lang.NoClassDefFoundError: com/lowagie/text/pdf/PdfContentByte
		
    异常信息:   java.lang.NoClassDefFoundError: com/lowagie/text/pdf/PdfContentByte  at com.star.sms.busines ...
    
		
    9. 
						
  9. 应该具备的调试技能(java)
		
    ------Java部分---------- 1. tomcat在eclispe中怎样启动调试模式2. 带有main方法的Java应用程序怎样启动调试模式3. 调试在eclispe中的快捷键 F5 F ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 微信video最上层解决问题
			
    /*  http://blog.csdn.net/kepoon/article/details/53608190  */ //x5-video-player-type="h5" x ...
    
			
    2. 
						
  2. ASP.NET的路由系统：路由映射
			
    总的来说,我们可以通过RouteTable的静态属性Routes得到一个基于应用的全局路由表,通过上面的介绍我们知道这是一个类型的RouteCollection的集合对象,我们可以通过调用它的MapP ...
    
			
    3. 
						
  3. Web框架之Bootstrap
			
    一.Bootstrap简介 Bootstrap,来自Twitter的设计师Mark Otto和Jacob Thornton合作开发,是目前很受欢迎的Web前端开源框架. Bootstrap 是基于HT ...
    
			
    4. 
						
  4. VM_Centos7.3_X64_安装Oracle12C 总结笔记
			
    声明:本文居多内容参考原文来之网络: 一:安装Centos7.3 虚拟机 1:操作系统下载 CentOS 7官方下载地址:https://www.centos.org/download/ 说明:本案例 ...
    
			
    5. 
						
  5. Confluence 6 在数据源连接中启用校验查询
			
    确定 Confluence 在数据库连接池中校验数据库连接: 停止 Confluence. 编辑 <installation-directory>/conf/server.xml 文件(或 ...
    
			
    6. 
						
  6. Confluence 6 关于 Decorators
			
    Confluence 是使用开源的 SiteMesh 库构建的.一个 Web 页面的布局系统,这个布局系统能够在全站点中提供完整统一的界面和外观.SiteMesh 是通过 "decorato ...
    
			
    7. 
						
  7. Swift 设置某个对象的normal 属性找不到normal 解决方案
			
    normal  等价于 UIControlState(rawValue: 0)
    
			
    8. 
						
  8. 爬虫框架之Scrapy
			
    一.介绍 二.安装 三.命令行工具 四.项目结构以及爬虫应用简介 五.Spiders 六.Selectors 七.Items 八.Item Pipelin 九. Dowloader Middeware ...
    
			
    9. 
						
  9. 《剑指offer》 二进制中1的个数
			
    本题来自<剑指offer> 二进制中1的个数 题目: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 思路: 两种思路: 第一种:对n进行左移,检测最后一位是否为1,但考 ...
    
			
    10. 
						
  10. MySQL数据库查询中的特殊命令
			
    第一:   MySQL的安装 下载MySQL软件,修改安装路径之后 安装数据库MySQL5.7.18 第一步:数据库MySQL5.7.18可以在官网上下载对应的版本,下载地址:http://www.f ...
    
			
    11.