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. iOS 去除高德地图下方的 logo 图标
			
    [self.mapView.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx,  ...
    
			
    2. 
						
  2. socket-WebSocket-HttpListener-TcpListener服务端客户端的具体使用案例
			
    /// <summary> /// 启动服务监听的ip和端口的主线程 /// </summary> /// <param name="tunnelPort&qu ...
    
			
    3. 
						
  3. 设置外部查找工具来索引 Confluence 6
			
    任何网页的 crawler  工具都可以被用来索引你的 Confluence 站点中的内容.如果你希望注册用户才能够查看的内容也被索引的话,你需要为你的 Confluence 创建一个只被 crawl ...
    
			
    4. 
						
  4. RemoveDuplicatesfromSortedList
			
    给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: 输入: 1->1->2->3-&g ...
    
			
    5. 
						
  5. VMware安装windows10系统
			
    
			
    6. 
						
  6. 进程与程序 并行 并发 串行 阻塞  join函数
			
    进程是正在运行的程序,程序是程序员编写的一对代码,也就是一堆字符,当这堆代码被系统加载到内存并执行,就有了进程. (需要注意的是:一个程序是可以产生多个程序,就像我们可以同时运行多个QQ程序一样,会形 ...
    
			
    7. 
						
  7. 基于Form组件实现的增删改和基于ModelForm实现的增删改
			
    一.ModelForm的介绍 ModelForm a. class Meta: model, # 对应Model的 fields=None, # 字段 exclude=None, # 排除字段 lab ...
    
			
    8. 
						
  8. 【层次聚类】python scipy实现
			
    层次聚类 原理 有一个讲得很清楚的博客:博客地址 主要用于:没有groundtruth,且不知道要分几类的情况 用scipy模块实现聚类 参考函数说明: pdist squareform linkag ...
    
			
    9. 
						
  9. jenkins持续集成：构建多个job同时执行
			
    在jenkins 构建任务时,同时只能构建2个,但是有时候可能涉及到需要同时执行多个任务(大于2个),如果不能同时运行的话,就需要等待上一个执行完了,再执行第三个 比如用例非常多,需要把不同的用例分给 ...
    
			
    10. 
						
  10. 常见的爬虫分析库（1）-Python3中Urllib库基本使用
			
    原文来自:https://www.cnblogs.com/0bug/p/8893677.html 什么是Urllib? Python内置的HTTP请求库 urllib.request          ...
    
			
    11.