(CSS)2020.11.10

最新推荐文章于 2023-06-27 14:46:58 发布

码媛世界第一号

最新推荐文章于 2023-06-27 14:46:58 发布

阅读量161

点赞数

分类专栏： Java第二阶段笔记集文章标签： css html css3 定位

本文链接：https://blog.csdn.net/hxc2u/article/details/109608010

版权

Java第二阶段笔记集专栏收录该内容

24 篇文章 0 订阅

订阅专栏

DIV+CSS简介

DIV介绍

概述:div是html的一个标签、全称是DI version 意味着划分的意思、它可以将我们网页分成若干个块状的区域。它本身是没有任何形态效果、需要我们使用css样式配合才可以凸显其形态。我们可以把它简单的理解为图层或者容器。在这个容器的内容我们就可以写html标签

CSS介绍

概述:层叠样式表、可以用来美化页面

CSS引入方式

css语法:
　　选择器{属性:属性值;属性:属性值}
行内引入
在这里插入图片描述
内部引入

外部引入
1、提前定义好css样式文件
2、引入样式文件

在同一个标签上同时作用3种引入方式哪个优先级高?
结论:
行内>内部 | 外部（后加载会覆盖前加载的）

CSS样式规则

在这里插入图片描述

CSS选择器

概述:选择器相当于快速获取到符合条件规则的某一类标签
id选择器:Id为xx的某一个标签作用此样式
在这里插入图片描述

在这里插入图片描述
类选择器:作用此类型的某一类都有此样式

标签选择器:当前页面下的此标签都会作用相同的样式

当三种选择器中的样式同时作用于一个标签优先级怎么样?
id选择器>类选择器>标签选择器

常用CSS样式

字体样式

字体大小：font-size
　　字体风格：font-frmaily
　　字体类型：font-style
　　字体粗细：font-weight
　　字体颜色: color

文本样式

文本颜色：color
　　文本对齐：text-align left 左对齐 right 右对齐 center 居中对齐
　　文本装饰：text-decoration overline 上划线 underliner 下划线 line-throgh穿过线 none 没有效果
　　设置行高：line-height

超链接伪类样式

概述：超链接在不同状态下的颜色标识
　　鼠标未访问 :link
　　鼠标访问过后 :visited
　　鼠标悬浮 :hover
　　鼠标点击 :active
注意事项:
　　1、a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
　　2、a:active 必须被置于 a:hover 之后，才是有效的。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#d1 {
				/*文本颜色：*/
				color: royalblue;
				width: 400px;
				height: 400px;
				border: 1px solid;
				/*文本对齐
				   left
				   center
				   right
				 * */
				text-align: left;
				/*文本装饰
				 上划线overline、下划线underline、穿过线 line-through
				 none:去除样式
				 * */
				text-decoration: none;
				/*设置行高：*/
				line-height: 70px;
			}
			a {
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<a href="#">点我哦</a> <br /><br />
		<div id="d1">
			床前明月光,地上鞋两双。<br /> 床上狗男女,其中就有你。
		</div>

	</body>

</html>

边框样式

border-top-style 样式实线solid 虚线 dashad 点线 dotted 双实线 double
border-top-width
border-top-color
简写
border-top:dashad 1px red;
设置圆角边框：
border-radius 像素|百分比
设置一个值表示4个角都是一样的弧度
设置两个值第一值表示左上、右下第二值表示右上、左下
设置三个值第一值表示左上、第二值表示右上、左下第三值表示右下
设置四个值顺时针方向左上、右上、右下、左下
注意:给多个值的时候不要加任何符合直接空格值如 75px 30px…

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*边框
			   style线条:实线 solid、虚线dashad、点线dotted、双实线double
			   width粗细: px
			   color颜色:     
			 * */
			.a1{
				/*div大小*/
				width: 200px;
				height: 200px;
				/*设置上边框*/
				border-top:dashed 2px rgb(63,72,204);
				/*设置左边框*/
				border-left:solid 2px rgb(34,177,76);
				/*设置下边框*/
				border-bottom: 2px dotted black;
				/*设置右边框*/
				border-right:rgb(237,28,36) 2px double;
				/*圆角  取值百分百 |  像素 */
				border-radius: 75px 30px 80px 30px;
			}
		</style>
	</head>
	<body>
		<div class="a1">
			
			
		</div>
	</body>
</html>

在这里插入图片描述

背景样式

背景颜色：background-color
背景图片：background-image-url(图片地址)
背景大小：background-size
背景是否平铺：background-repeat
　　　repeat-x 横向重复　repeat-y纵向重复　no-repeat不重复
背景偏移：background-position:30px 50px
　　30px　横向偏移:正数向右偏移、负数向左偏移
　　50px　纵向偏移:正数向下偏移、负数向上偏移

盒子模型

在这里插入图片描述
　　网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。
　　w3c:规定元素框如何去处理元素体、内边距、外边距的方式
在这里插入图片描述

布局样式

浮动:将我们div由垂直分布变为水平分布
float:
　　left:左浮动
　　right:右浮动
clear
　　left:清除左浮动以左侧的容器高度为参照物、在左侧容器高度下添加标准文档流的内容
　　right:清除右浮动以右侧的容器高度为参照物、在由侧容器高度下添加标准文档流的内容
　　both:清除两侧浮动

定位技术

position:定位
相对定位　relative　以自身为参照物移动　xx
绝对定位　absolute　以父容器body为参照物移动　xx

转换样式与列表样式

概述:在我们html中每一个标签都可以找到所属的归类、不同分类下标签的特点是不一样的。
　行级标签:1、在标签上设置大小没有形态变化 2、不换行典型:　span、a
　块级标签:1、在标签上设置大小后又形态变化、2、换行典型:　div、p
　行内块标签:在一行中表现块级的特征 1、在标签上设置大小有形态变化、2、不换行典型:input、img
转换 dispaly
　　行级转块级 block
　　块级转行级 inline
　　转行内块 inline-block