首页 > 其他分享> 文章详细

【无标题】css基础

2022-02-27 15:34:09 阅读：126 来源： 互联网

标签：定位 style 标签基础无标题样式表 position 选择器 css

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>

标签：定位,style,标签,基础,无标题,样式表,position,选择器,css
来源： https://blog.csdn.net/qq_46015410/article/details/123164808

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9