Java web程序与开发 02 CSS

最新推荐文章于 2022-08-25 12:53:39 发布

lijing-blog

最新推荐文章于 2022-08-25 12:53:39 发布

阅读量83

点赞数

分类专栏： Web程序开发与设计

本文链接：https://blog.csdn.net/weixin_45893523/article/details/104841865

版权

Web程序开发与设计专栏收录该内容

9 篇文章 7 订阅

订阅专栏

1.CSS概述

页面美化和布局控制

概念：Cascading style Sheets 层叠样式表

	层叠：多个样式可以作用在同一个html元素上，同时生效

好处

1.功能强大
2.将内容展示和样式控制分离
降低耦合，解耦。
让分工协作更容易
提高开发效率

2.CSS与HTML结合方式

三种方式：

1.内联样式

在标签内使用style属性指定css代码

<div style="color:red;">hello</div>

2.内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

<head>
<style>
	div{
		coloe:blue;
	   }
</style>
<div>hello</div>
</head>

3.外部样式

1.定义css资源文件
2.在head标签内，定义link标签，引入外部的资源文件

在a.css文件中

div{
	color:green;
}

在html文件中
<link rel="stylesheet" href="css/a.css">
<div>hello</div>
<div>hello</div>

注意：
1.三种方式中，css作用范围越来越大
2.一不常用，后期常用二三。
3.第三种格式可以写为：

<style>
	@import "css/a.css";
</style>

3.CSS语法格式

格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
…
}
选择器：筛选具有相似特征的元素
注意：每一对属性需要使用；隔开，最后一对属性可以不加；

4.CSS选择器（基础选择器）

1.id选择器

选择具体的id属性值的元素，建议在一个html页面中id唯一
语法：#id属性值（）

<head>
	<style>
		#div1{
			color:red;
			}
	</style>
</head>
<body>
<div id="div1">麦克斯韦</div>
<div>小迷妹</div>
</body>

2.元素选择器

选择具有相同标签名称的元素
语法：标签名称{}
注意：id选择器优先级高于元素选择器

<head>
	<style>
		#div1{
			color:red;
			}
		div{
			color=green;
			}
	</style>
</head>
<body>
<div id="div1">麦克斯韦</div>
<div>小迷妹</div>
</body>

3.类选择器

选择具有相同的class属性值的元素
语法：.class属性值（）
注意：类选择器优先级高于元素选择器

<head>
	<style>
		#div1{
			color:red;
			}
		div{
			color=green;
			}
		.clsl{
			color:blue;
			}
	</style>
</head>
<body>
<div id="div1">麦克斯韦</div>
<div>小迷妹</div>

<p class="clsl">李晶</p>
</body>

结局： id选择器优先级最高

5.CSS选择器（扩展选择器）

1.选择所有元素

语法：

2.并集选择器

语法：选择器1，选择器2{}

3.子选择器：筛选选择器1下的选择器2元素

语法：选择器1 选择器2{ }

<head>
<style>
	div p{              //div下的p标签 麦克斯韦就不会生效
		color:red;
	}
</style>
</head>

	<div>
		<p>lijing</p>
	</div>
	<p>麦克斯韦</P>

4.父选择器：筛选选择器2的父元素选择器1

语法：选择器1>选择器2{ }

<head>
<style>
	div>p{                  //对div的控制
		border: 1px solid;
	}
</style>
</head>
	<div>
		<p>lijing</p>
	</div>
	<p>麦克斯韦</P>
	<div> mm</div>   //不会被选中  因为不是父元素

5.属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名=“属性值”]{ }

<head>
<style>
	input[type='text']{
	border: 5px solid;
	}
</style>
</head>

<input type="text">

6.伪类选择器：选择一些元素具有的状态

语法：元素:状态{ }
如：
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问的状态
hover：鼠标悬浮状态

<head>
<style>
	a:link{
		color:pink;
	}
	a:hover{
		color:green;
	}
	a:active{
		color:yellow;
	}
	a:visited{
		color:red;
	}
</style>
</head>

<a href="#">麦克斯韦</a>

6.CSS属性

1.字体、文本

font-size:字体大小
color:文本颜色
text-align:对齐方式
line-height:行高

<style>
p{
	color:#FF0000;
	font-size:30px;
	text-align:center;
	line-height:100px;
}
</style>

2.背景:background

<style>
p{
	color:#FF0000;
	font-size:30px;
	text-align:center;
	line-height:100px;
	border:1px solid red;
}
div{
	border:1px solid red;
	height:200px;
	width:200px;
	background:url("img/logo.jpg"); no-repeat center;  //背景
	}
</style>

3.边框

border：复合属性，每一条线都可以单独控制（borde-left-style）

<style>
p{
	color:#FF0000;
	font-size:30px;
	text-align:center;
	line-height:100px;
	border:1px solid red;             //边框
}
</style>

4.尺寸

width:宽度
height:高度

<style>
p{
	color:#FF0000;
	font-size:30px;
	text-align:center;
	line-height:100px;
	border:1px solid red;
}
div{                                    //尺寸
	border:1px solid red;
	height:200px;
	width:200px;
	}
</style>

5.盒子模型:控制属性

1.margin：外边距

2.padding：内边距

<style>
	div{                                    
	border:1px solid red;
	}
	div1{                                    
	width:100px;
	height:100px;
//	margin:50px;        外边距
	}
	div2{                                    
	width:200px;
	height:200px;
//	padding:50px;  不可以！！！默认情况下会影响盒子的大小       内边距
	//设置盒子的属性：让width和height就是最终盒子的大小
	box-sizing:border-box; 
	}
</style>
<body>
	<div class="div2">
		<div class="div1"></div>
	</div>
</body>

3.float：浮动

		left：左浮动
		right：右浮动

<style>
	div{                                    
	border:1px solid red;
	}
	div1{                                    
	width:100px;
	height:100px;
//	margin:50px;        外边距
	}
	div2{                                    
	width:200px;
	height:200px;
//	padding:50px;  不可以！！！默认情况下会影响盒子的大小       内边距
	//设置盒子的属性：让width和height就是最终盒子的大小
	box-sizing:border-box; 
	}
	.div3{
		float:left;
		}
	.div4{
		float:left;
		}
	.div5{
		float:right;
		}
</style>
<body>
	<div class="div2">
		<div class="div1"></div>
	</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbbb</div>
<div class="div5">cccc</div>
</body>

lijing-blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java web程序与开发 02 CSS

CSS和HTML语法1.CSS概述概念：Cascading style Sheets 层叠样式表好处2.CSS与HTML结合方式1.内联样式2.内部样式3.外部样式3.CSS语法格式4.CSS选择器（基础选择器）1.id选择器2.元素选择器3.类选择器5.CSS选择器（扩展选择器）1.选择所有元素2.并集选择器3.子选择器：筛选选择器1下的选择器2元素4.父选择器：筛选选择器2的父元素选择器15....
复制链接

扫一扫