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. python 之面向对象的三大特性
			
    面向对象的三大特性 继承 继承和组合 继承进阶 封装 封装(有待完善) 多态 多态
    
			
    2. 
						
  2. Java并发编程-并发工具类及线程池
			
    JUC中提供了几个比较常用的并发工具类,比如CountDownLatch.CyclicBarrier.Semaphore. CountDownLatch: countdownlatch是一个同步工具类 ...
    
			
    3. 
						
  3. 单击列表行前边的checkbox被选中，再单击，取消选中
			
    需求描述:单击datatabl的一行数据,前边的checkbox被勾选上,再次点击,选中取消,第一次碰到这种需求,不过呢也很实用,简单记录一下 代码: //html代码<tr class=&qu ...
    
			
    4. 
						
  4. 项目中使用sass预处理器
			
    安装sass npm install node-sass sass-loader --save 新建样式文件后缀为 .scss 在使用样式的页面引入:import  'xx.scss';
    
			
    5. 
						
  5. shell脚本批量创建用户
			
    #!/bin/bash DATE=$(date +%F_%T) USER_FILE=user.txt echo_color() { == "green" ];then echo - ...
    
			
    6. 
						
  6. log4j2的配置文件log4j2.xml笔记
			
    一.背景 最近由于项目的需要,我们把log4j 1.x的版本全部迁移成log4j 2.x 的版本,那随之而来的slf4j整合log4j的配置(使用Slf4j集成Log4j2构建项目日志系统的完美解决方 ...
    
			
    7. 
						
  7. python Com接口测试
			
    import comtypes.client as cc import comtypes tlb_id = comtypes.GUID("{D85C6069-D628-4276-93C3-9 ...
    
			
    8. 
						
  8. JS判断元素 动画是否执行完成
			
    使用animationend方法 var ele = document.getElementById("box"); ele.addEventListener("anim ...
    
			
    9. 
						
  9. Red Language
			
    官网地址:http://www.red-lang.org/ 源代码地址:https://github.com/red/red   通过github上的Readme,可以完成Hello World的学习 ...
    
			
    10. 
						
  10. javaScript中的querySelector()与querySelectorAll()的区别
			
    之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorA ...
    
			
    11.