JAVA Web 05 CSS

最新推荐文章于 2024-10-14 09:20:17 发布

无梦想，却时常幻想

最新推荐文章于 2024-10-14 09:20:17 发布

阅读量153

点赞数

文章标签： css html html5 web

本文链接：https://blog.csdn.net/weixin_46147057/article/details/108234013

版权

JAVA WEB 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

导入方式

内联：直接写在标签中单独设置，简单，不能重复使用
内部：在内部style标签中对同类标签进行设置，只能当前页面显示
外部：独立CSS文件 link rel=“stylesheet” 引用的CSS文件，所有页面都可引用
优先级
内联>内部和外部
就近原则：内联是一定最近的，优先级肯定最高，内部与内联那个写的与body进，那个优先级高

选择器

基本选择器

标签选择器
id选择器
class选择器
同种使用方式下：优先级 id >class>标签，同样选择器，采取就近原则

其他选择器

属性选择器，主要用在表单中

<style type="text/css">
			input[type="text"]{
				background-color: blue;
			}
			input[type="password"]{
				background-color: red
			}
		</style>

伪类选择器 一般用于a标签

超链接的四种状态
1.初始状态 a:link
2.访问之后 a:visited
3.鼠标经过： a:hover 一般只有这个
4.激活状态： a:active

a {
				color: black;
				text-decoration: none;
			}
			a:hover{
				text-decoration: underline;
				color: blue;
			}

层级选择器
后代 div span div中所有span
子代 div>span 只对儿子span生效，孙子span不生效

全局选择器
*
群组选择器
div.span

属性

文字属性

在这里插入图片描述
swsf

fony-family 设置多种字体，使用时从前到后，前边的没有了才会用后边的
简写：font: style ,weight ,size,family

DIV中长英文串不会换行（中文不存在，英文中不加空格会被认为是一个单词
解决方法：

在文本适当位置加空格
css代码中加上这行：word-wrap:break-word;

文本属性

在这里插入图片描述

text-indent 块标签中有效
em ：1em 1倍的字体大小
line-height: 与父容器高度相同可实现垂直居中，只适合一行文字
text-shadow : 水平偏移，正右负左；垂直偏移：正下负上

背景属性

在这里插入图片描述
background-position：位置可设置
背景图片的大小 background-size：
1.contain 等比放大不超边框
2.cover 填满
3.自设置
简写：background：color image repeat psition

利用背景完成对图片的剪裁（下载时只下载一次，减少网络请求次数）

列表属性

在这里插入图片描述
简写 type url position
type：decimal 数字可以让有序列表变成无序列表 none:无符号
position：默认outside 符号在li内部（ul与 li之间有边距）

显示和轮廓

div块级元素，有高度和宽度独占一行
span 行级元素，没有宽度和高度（由其中的内容决定），和其他元素一起display:block，把span设为块元素，就可以设置宽高了
在这里插入图片描述
简写 width style color
display更改其显示形式 block inline
display:none 隐藏不占位置
visibility：hidden 隐藏但是占位置

输入框调整
输入框有边框和轮廓去掉时应以其去掉
若不去轮廓，点击输入将会显示

input {
			outline: none;
			border-left: none;
			border-right: none;
			border-top: none;
		}

浮动属性与clear属性

clear清除浮动对自身的影响

在这里插入图片描述
解决浮动元素对相邻元素的影响
相邻元素加上clear属性
解决浮动所有元素对父容器的影响
子容器全部浮动会导致父容器失去高度
1.给父元素高度
2.增加不浮动的空子容器，给其设置 height:0;clear:both;
3.给父元素增加属性 overflow:hidden（会使得父容器重新自动计算高度）

overflow:
默认 visisble 可见； hidden隐藏；scroll 滚动条

定位属性

在这里插入图片描述
对使用定位元素设定层叠顺序z-index
absolute:绝对定位，相对距离最近的非静态定位元素（relative 一般为absolute服务）

盒子模型

从外到内：margin border padding element的宽度和高度（设置width，height设置的是element的）

边框

在这里插入图片描述
简写 width style color

外边距 margin

不会相加，会重叠，取相邻外边距最大值，所以使用边距增加间距时使用内边距
盒子居中 margin：0 auto
margin：1px 2px 3 px 4 px 上右下左
margin：1px 2px 3 px 上左右下

内边距padding

body的边距
body自带内边距或者是内边距。设为零，就紧密连接。段落标签也自带边距。
根据游览器不同有可能是内边距有可能是内边距
p标签默认也有这种边距

*{
	padding:0;
	margin:0;
}
使用css  reset覆盖游览器默认属性，解决游览器兼容性问题

CSS3扩展属性

圆角

border-radius
半径

<style type="text/css">
			/* 圆 */
			#div1{
				width: 6.25rem;
				height: 6.25rem;
				background-color: skyblue;
				border-radius: 6.25rem;
			}
			/* 半圆 */
			#div2 {
				width: 6.25rem;
				height: 3.125rem;
				background-color: red;
				/* 上右下左 每一块的半径 */
				border-radius: 3.125rem 3.125rem 0 0 ;
				}
			
		</style>