JavaWeb之Css学习

最新推荐文章于 2024-01-08 22:53:57 发布

ps181004

最新推荐文章于 2024-01-08 22:53:57 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/ps181004/article/details/99625192

版权

一、 Css概念

作用
1、作用:用来控制我们HTML标签的展示样式,使得标签的样式展示的更加丰富,就是用来解耦的
我们学习了CSS以后尽量不使用 HTML标签自带的属性全部用CSS 去设置
层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效
2、CSS 跟HTML 配合使用的方式
方式1:内联样式: 将CSS 代码写在标签上所有的标签都会有一个 style属性
我们的CSS代码就可以写在 style 属性里面
每个CSS样式写法属性名:属性值;属性名2:属性值2;属性3:属性值3
举例: 这段文字的样式
内联样式的写法:只能控制单个标签,且书写凌乱,不推荐使用.
3、内部方式:将style属性写在标签内部常用
4、外联样式:CSS样式写在一个单独文件中这种方式常用

二、两个纯净标签介绍

1、div标签

div 标签是一个纯净的块标签
，所谓的纯净，就是这个标签，不带有任何样式（没有宽高，没有背景等）
块标签：这个标签会默认占据一行
行标签：不会占据一行

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 div 标签是一个纯净的块标签，所谓的纯净，就是这个标签，不带有任何样式（没有宽高，没有背景等）
		 块标签：这个标签会默认占据一行
		 行标签：不会占据一行
		 -->
		 <b>加粗</b> <b>加粗2</b> <h1>标题标签</h1><b>加粗2</b>
		 <ul>
		 	<li>列表标签</li>
		 </ul>
		 <ol>
		 	<li>asdfasfd</li>
		 </ol>
		 <table border="1" cellspacing="" cellpadding="" width="200px" height="200px">
		 	<tr><th>Header</th></tr>
		 	<tr><td>Data</td></tr>
		 </table>
		 <font size="" color="">asdfasdfasd</font>
		<div id="" style="font-size: 100mm;color: aqua;">
			abc
		</div>
		<a href="#">asdfasdf</a><a href="#">asdfasdf</a>
	</body>
</html>

span标签

纯净的行标签

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- span 纯净的行标签 所谓的纯净，就是不带有任何样式 -->
		<s>abc</s>
		<span style="text-decoration: line-through;">纯净的行标签</span>
	</body>
</html>

三、选择器

1、id选择器
选择器：用来选择一个或多个标签，进行样式的控制，为了提高CSS代码的复用性
id选择器：一次选择一个标签
class 选择器：一次可以选择多个标签
标签选择器：一次可以选择多个标签

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style type="text/css">
			 #div1,#div2{
				 height: 300px;
				 width: 300px;
				 border: 2px blue solid;
				 background-color: pink;
			 }
		 </style>
	</head>
	<body>
		<div id="div1">
		</div>
		<div id="div2">
		</div>
	</body>
</html>

2、标签选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div,h1{
				color: #0000FF;
				font-size: 19mm;
			}
		</style>
	</head>
	<body>
		<div id="">
			asdfasdf
		</div>
		<h1>阿斯顿发顺丰大</h1>
		<h2>asdfasdfasdf</h2>
		<ul>
			<li>asdfasdfasfasd</li>
		</ul>
	</body>
</html>

3、class选择器
在每个块标签内，定义一个class=“myclass”
在class选择器用.myclass调用
注意：最主要用法是，在有多个相同属性时，就用class标签
案例演示：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.myclass{
				color: #FFC0CB;
				font-size: 150px;
				font-family: 楷体;
			}
			#div1{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="myclass">
			aaaaaa
		</div>
		<h1  class="myclass">bbbb</h1>
		<ul class="myclass">
			<li>cccc</li>
		</ul>
		<ol class="myclass">
			<li>dddd</li>
		</ol>
	</body>
</html>

4、属性选择器
不常用，但是了解
用[ ]调用

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			*{
			font-family:微软雅黑;	
			background: #FFC0CB;
			}
			[id]{
				color: red;
			}
			div[id]{
				color: #0000FF;
			}
			h1[id]{
				color: yellow;
			}
			div[id=div1]{
				color:deepskyblue;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			一行文字
		</div>
			<div id="div2">
			一行文字
		</div>
		<h1 id="myh">asdfasdfsf</h1>
	</body>
</html>

5、后代选择器
格式：#div1 div div{
color:yellow;

例如：

	</div>
		
		<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div11 div div{
				color:green;
			}
			li{
				color: #0000FF;
			}
			ul li{
				color: #FFFF00;
			}
		</style>
			<div id="div11">
			爷爷2
			<div id="div222">
				爸爸2
				<div id="div33">
					孙子2
				</div>
			</div>
		</div>

6、相邻选择器
h1 +h2{ //相邻一个
color: red;
}

h1 ~h2{ /* 相邻所有*/
color: red;
}

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			h1 ~h2{  /* 相邻所有*/
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>asdfasb</h1>
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
	</body>
</html>

7、伪类选择器
很重要
可以用于网页按钮上，在访问前后的颜色设置，以及背景颜色改变等等

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 链接状态 */
			a:link{
				color: #FF0000;
				
			}
			/* 鼠标悬浮状态 */
			a:hover{
				color: palegreen;
				
			}
			/* 按下鼠标的状态 */
			a:active{
				color: #FFFF00;
			}
			/* 访问过后的状态 */
			a:visited{
				color: plum;
			}
		</style>
	</head>
	<body>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		
	</body>
</html>

四、选择器的优先级

选择器的优先级。就是为了解决，多个选择器，出现属性控制冲突时，听谁的

		内联样式>id选择器>class选择器>标签名选择

五、常用属性列举

top:80px;//距顶部距离

left:35px;//距左距离

width:20px//宽度

height:20px//高度

font-family:楷体;

font-size:14pt;

color:blue; //层里面的字体颜色

overflow:scroll/visible/hidden/auto //超出内容是否包裹

float: right; //浮动到哪个位置设置left或right层为左右排列默认是上下排列

clear:both/left/right/none; //属性规定元素的哪一侧不允许其他浮动元素。一般用于使用float后无法换行，给两个控件中间夹一个空层设置style=“clear:both;”

background: #99FFcc;//层的背景颜色

background-image:url(‘top.jpg’);为层设置背景图片

display:block/none/inline //显示为块隐藏显示为行

visibility:visible//显示元素

visibility:hidden//隐藏元素

border:2px solid #f98510;//边框的宽度和样式以及颜色

z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）

position:absolute(绝对)/relative(相对);//属性规定元素的定位类型。

transform:rotate(30deg);//旋转 scale(2,2);//缩放 translate(30px,20px);//位移

border-radius:20px;//边框圆角

border-image:url(border.png) 30 30 round;//边框图片大小模式

box-shadow: 10px 10px 5px #888888;//添加阴影

//轮廓
outline:#00ff00 dotted thick;

//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(’’),default;

六、补充的属性

  <input type="text" list="mydata" placeholder="请输入邮箱"/>
  <datalist id="mydata">
	<option label="第一个">xxx@qq.com
	<option label="第二个">xxx@163.com
	<option label="第三个">xxx@gmail.com
	<option label="第四个">xxx@139.com
  </datalist>

垂直对齐属性
vertical-align:text-top/middle
可设置的值有以下
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。

opacity:0.0; 透明度

display:block/none/inline //显示为块隐藏显示为行

visibility:visible//显示元素
visibility:hidden//隐藏元素但会占位置

轮廓
outline:#00ff00 dotted thick;
轮廓外边距
outline: 2px solid red;
outline-offset: 10px;

鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(’’),default;//自定义一个鼠标图片

z-index:2;// 属性设置元素的堆叠顺序。

七、框架标签的属性、

一、frameset
注意 frameset 标签不能和body标签共存

属性

①border
设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
④cols
纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“”表示该区域占用余下页面空间。例如：cols=“25%,200,*” 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。

用例

注意1： cols与rows两属性尽量不要同在一个标签中使用。若要实现下图架构，代码正确写法为： Frameset使用教程【即，若想即使用cols又使用rows，可利用frameset嵌套实现】注意2：意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。意思是：浏览器窗口等分为四部分。

二、frame

属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。
用例

三、iframe
是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）

属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。
用例

注意： iframe标签与frameset、frame标签的验证方法不同，是XHTML 1.0 Transitional。且iframe是放在body标签之内，而frameset、frame是放在body标签之外。

八、行标签和块标签的区别

<span>这是一个纯净的行标签asdfasfdasdfasdf</span><span>这是一个纯净的行标签</span>
<h1>这是块标签</h1>
<h1>这是块标签</h1>

 <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			span{
    				/* height:500px;
    				width: 300px;
    				margin-top: 500px;
    				margin-bottom: 300px; */
    				margin-left: 200px;
    			}
    			h1{
    				color: red;
    				height: 500px;
    				border: 1px black solid;
    			}
    		</style>
    	</head>
    	<body>
    		<!-- 行标签，不能设置宽高，以及上下间距 ，他的内容有多宽他就有多宽 设置左右间距有效 -->
    		
    	</body>
    </html>

九 1、页面定位：相对定位

相对定位，设置间距，margin-left margin-top margin-right margin-bottom


			button{
				position: relative;
				
			}

2、页面定位：绝对定位

页面的左上角，是我们元素的起始位置
第一个元素参照起始位置
页面元素的默认定位方式，采用的是相对定位，一个元素的位置会参照上一个元素的位置
绝对定位：元素之间，不存在参照关系，所有元素只参照起始位置
元素设为了绝对定位后，设置元素距离起始位置的属性

button{
				position:absolute;/* relative相对定位 absolute绝对定位*/
				
				
			}

ps181004

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之Css学习

Css概念
复制链接

扫一扫

JavaWeb之Css学习

一、 Css概念

二、 两个纯净标签介绍

1、div标签

span标签

三、 选择器

四、 选择器的优先级

五、 常用属性列举

六、 补充的属性

七、 框架标签的属性、

八、 行标签和块标签的区别