【无标题】css基础

2023-10-16 10:55:28

css概述

Cascading Style Sheets 级联样式表

作用：用来修饰网页的外观

级联：将网页内容与样式表关联

样式表：修饰网页标签的语法集

html讲的是标签，标签是构成网页内容的样式

css基本语法

行内（行级）样式表

style=“属性名:值;…”(使用较少)

内嵌样式表

<p style=" "></p>

将样式表与内容分离，通过选择器将内容与样式关联

<style type="text/css">
		/* 一组{ }就是一个样式表 */

(练习用)

外部样式表

<link href="css/css.css" rel="stylesheet"/>

(开发用)

选择器

标签选择器–选择所有指定标签

标签名{}

类选择器（用的最多）–选中一组

.class属性值{}

id选择器，选择唯一的

#id属性值{}

通配选择器–所有的标签

*{}

选择器组合

#pid,.p1,.p2,b{
font-size="30px"
}

优先级：id选择器>类选择器>标签选择器>通配选择器

文本

字体颜色：color

字体大小：font-size
字体样式：font-family
斜体文本：font-style:italic;***
字体粗细：font-weight

文本对齐：text-align
文本装饰：text-decoration  line-through删除线；underline下划线；
首行缩进：text-indent:2em;em指当前字符大小

设置行高：line-height
字符间距：letter-spacing

背景

background-color:
backgound-image:
backgound-repeat:
background-position:水平垂直
列表
list-style-type
list-style-image：url
list-style-position inside/outside 在列表里、外
简写list-style

伪类&透明

标签可以有不同的状态，（例如鼠标移入，点击标签）可以通过伪类为鼠标移入时，点击设置一个样式
a:hover{}鼠标移入切换
a:active{}鼠标点击标签切换
focus{}可以输入的标签，获得鼠标焦点时触发

透明opacity

0:完全透明；1：完全不透明
设置完透明度之后仍占据空间

<style type="text/css">
			.fruit:hover{
				opacity: 0.5;
			}
			.fruit:active{
				opacity: 1;
			}
		</style>

dispaly_div&span

标签分类

块级标签:无论内容有多少都占一行 h,p 可以设置宽高；默认的宽和父级标签一致；默认高由内容决定；这种标签主要用来布局网页
行级标签：只占自身内容大小，不会占一行，不能设置宽高（设置无效） a ,b
行级块标签：可以设置大小，不占一行 img,text

注意：

一般情况下，使用块标签，包含行级标签；a可以包含任何标签，除a以外；p标签不能包含其他任何块标签

通过dispaly属性来改变标签的类型:block块；inline行；none：隐藏（彻底不显示也不占空间）；inline-block行级块

div

块级标签，包含任何标签，没有附加功能，主要用来布局网页

span

行级标签，主要用来选中文本内容，为其修饰样式

盒子模型

认为每一个标签都像一个盒子，由四个区域构成

（桌子–过道–墙--楼道）

内容区：标签中的内容都是发放在内容区的；如果一个标签没有设置内边距和边框，那么内容区大小就是标签的大小；标签的大小是有散步费组成的

标签的大小=内容区+内边距+边框；weight height

内边距：边框与内容区之间的距离padding:2px 3px --;四个：顺时针（上右下左）；两个：上下，左右

边框：

border-top-color
border-top-width
border-top-style solid实心、****

border-top:#00D6D6 2px solid无序

border-radius:20px圆角边框

外边距

不影响标签大小。影响标签的位置，是一个标签与另一个标签之间的距离
margin-left:auto;值如果是auto,那么外边距的值会最大化，只有左右可以设置，上下auto值为0

清除浏览器的默认样式

margin:0px;

padding:0px;

outline:none;

}

<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				color: wheat;
				background-color: #D7D127;
				border: #FFAAFF 10px solid;
				padding: 10px;
				margin: auto;
			}
			*{
				padding: 0px;
				margin: 0px;
				outline: 0px;
			}
		</style>

浮动float

文档流：指的是标签在网页中的排放顺序

标签默认是从左至右，一个一个的排放

浮动 float

float:left;
浮动后的标签是不占用原始文档流空间的，成为高度塌陷；
解决：清除浮动影响，把父标签自动撑开，撑为与浮动标签高度相同。style=“clear:left”;

float:left;
<div style="clear:left;"></div>

定位position

相对定位relative

相对定位的参照物是其本身，移动后原来的空间还是被占用，不用脱离文档流
position:reative;开启相对定位，而后设置left top right bottom 等

绝对定位absolute

绝对定位的参照物会变，是以离它最近的祖先标签进行定位，如果所有祖先都没有开启定位，则会相对浏览器窗口进行定位；开启绝对定位标签会脱离文档流
position:absolute:开启绝对定位
一般情况下开启子标签的绝对定位，就会开启父标签相对定位

固定定位fixed

<!-- 相对定位 -->
position: relative;
<!-- 绝对定位 -->
position: absolute;
<!-- 固定定位 -->
        <a href="#top" style="position: fixed;right: 20px; bottom: 20px;">返回顶部</a>

码农公寓