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. C语言学习及应用笔记之一：C运算符优先级及使用问题
			
    C语言中的运算符绝对是C语言学习和使用的一个难点,因为在2011版的标准中,C语言的运算符的数量超过40个,甚至比关键字的数量还要多.这些运算符有单目运算符.双目运算符以及三目运算符,又涉及到左结合和 ...
    
			
    2. 
						
  2. bzoj 1812
			
    什么鬼noip互测题... 这题很显然是树形dp,但设计状态以及转移是个难点 记状态f[i][j][k]表示以i为根节点的子树,离i最近的祖宗节点编号为j放了虫洞(伐木场?),i的子树内放了k个伐木场 ...
    
			
    3. 
						
  3. Linux基础一：Linux的安装及相关配置
			
    1. 计算机操作系统简介    1) 操作系统的定义:操作系统是一个用来协调.管理和控制计算机硬件和软件资源的系统程序,它位于硬件和应用程序之间.    2) 操作系统的内核的定义:操作系统的内核是一 ...
    
			
    4. 
						
  4. Coding配合git使用时遇到的问题
			
    转载整理: https://www.jianshu.com/p/b23cd00cffa6 https://www.cnblogs.com/yidoucai/p/5228763.html https:/ ...
    
			
    5. 
						
  5. jmeter csv中获取带引号的数据详情
			
    最近在工作中,对jmeter实践的点滴的记录这里分享,不一定正确,仅供参考和讨论,有想法的欢迎留言.谈论. 1技巧1:从csv中获取带引号的数据详情 背景:我们从csv中获取数据,在jmeter中使用 ...
    
			
    6. 
						
  6. ActiveSync中的http内容组织
			
    1. POST Request 数据格式 Request-line Request-headers CR/LF Request Body Request-line POST <URI> H ...
    
			
    7. 
						
  7. Python3 zip() 函数
			
    描述 zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的对象,这样做的好处是节约了不少的内存. 我们可以使用 list() 转换来输出列表. 如果 ...
    
			
    8. 
						
  8. caffe关闭建立网络的log输出
			
    C++ google::InitGoogleLogging("XXX"); google::SetCommandLineOption("GLOG_minloglevel& ...
    
			
    9. 
						
  9. CCF-CSP 第三题字符串整理(模拟大法好)
			
    URL映射 规则的相邻两项之间用‘/’分开,所以我们先把所有项分开,然后依次把两个字符串的对应项匹配即可. 分离字符串这里用字符串流(stringstream)处理,先把所有的‘/’变为空格,然后一个 ...
    
			
    10. 
						
  10. System.Data.Entity.Internal.AppConfig"的类型初始值设定项引发异常
			
    在学习EF code First的小案例的时候,遇见了这个异常 <configSections> <!-- For more information on Entity Framew ...
    
			
    11.