基本CSS样式的使用介绍！_css样式的使用方式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40733505/article/details/106891520

1.CSS
(1)概念：Cacading Style Sheet 层叠样式表
(2)动静分离（独立的js文件）
(3)内容和表现分离（独立的css文件）
(4)HTML页面中嵌入CSS样式的方式
行内样式 <tag style=””></tag>
内部样式

<head>
       ...
<style></style>
       ...
</head>

外部样式

创建独立的css文件     xxx.css    与html页面同名
<head>
<link rel=”stylesheet” type=”text/css” href=”path” />
</head>

(5)选择器
基础选择器：
id 选择器 #name{…} name必须具有唯一性
class 选择器 .name{…} name不唯一性，重用，组合使用
tag 选择器 tagName{…} tag必须为标签名，同名标签自动响应
行为伪类选择器：
悬浮伪类：选择器：selector:hover{…} 鼠标进入
点击伪类：选择器：selector:active{…} 鼠标左键单击
结构伪类
前置伪类：selector::before{…}
后置伪类：selector::after{…}
(6)样式
文字样式:font: 12px/1.2 arial,”microsoft yahei” 1.2倍行距（复合样式）
文字类型：font-style:italic; italic斜体
文字粗细：font-weight:bold;
文字大小：font-size: int px; 正文字体12~14px之间;
字族：font-family:arial,”宋体”;
文本样式
文本颜色：color:color-word/rgba/#000000~ffffff; a透明度用于背景
#333/#666/#999 transparent透明色
行距：line-height:1.2em/int px;
字符间距：letter-spacing:int px;
首行缩进：text-indent:2em/int px;
文本装饰: text-decoration:none/line-through/underline;
水平对齐：text-align:left/center/right/justify(两端对齐);
文本溢出：text-overflow:ellipsis(省略);
文本换行：white-space:wrap/nowrap(不允许换行)
文本选择：user-select:none/all;
列表样式: list-style: none url(path) inside;
列表的图标:list-style-type:none;
列表图片:list-style-image:url(…/imgs/xx.png);
列表图片位置：list-style-position:outside/inside;默认是outside li=>overflow:hidden
盒子模型
宽:width int px;
高:height: int px;
边框样式:
outline:none; 去除表单输入元素的默认焦点框
border:color width style;
border-top color width style;
border-right color width style;
border-bottom color width style;
border-left color width style;

border-color: top-color right-color bottom-color left-color
border-width: top-width right-width bottom-width left-width
border-style:top-style right-style bottom-style left-style

border-top-color:color;
圆角
border-radius:int px;
阴影
box-shadow:offset-x(px) offset-y(px) shadow-radius(px) shadow-color;
x,y轴>0 向右向下移动，阴影面积大，x,y轴<0 向左向上移动，阴影面积大
内边距：padding:int px; 嵌套(父子)
外边距: margin: int px; 并列(兄弟)
盒子类型 box-sizing:content-box/border-box;
内容盒子 content-box(默认盒子类型)
宽度：左右外边距+左右边框宽度+左右内边距+内容宽度
高度：上下外边距+上下边框宽度+上下内边距+内容高度
边框盒子 border-box
宽度：左右外边距+盒子宽度
高度：上下外边距+盒子高度
背景样式
background-color:见颜色
background-image:url(path)
background-posotion:
相对位置:
水平：left/center/right
垂直:top/center/bottom
绝对位置
水平：int px;
垂直：int px;
background-repeat
no-repeat:不平铺
repeat-x:横向平铺
repeat-y:纵向平铺
repeat:双向平铺(默认)
background-size
相对大小:over(填满窗口)
绝对大小:width(px) height(px)
弹性盒子(取代：浮动)
父选择器
display:flex; //声明当前盒子为弹性盒子
flex-direction:row/row-reverse/column/column-reverse; //控制子盒子的弹性
flex-wrap:nowrap/wrap; //控制子盒子是否允许换行
justify-content:行子盒子水平对齐/列子盒子垂直对齐
flex-start(左对齐)/
flex-end/(右对齐)
center/(居中)
space-around(等左右外边距)/
space-between(两两等间距)
align-items:当行子盒子垂直对齐/单列子盒子水平对齐方式
flex-start(上对齐)/
flex-end/(下对齐)
center/(居中)
align-content:多行子盒子垂直对齐/多列子盒子水平对齐方式
flex-start(左对齐)/
flex-end/(右对齐)
center/(居中)
space-around(等左右外边距)/
space-between(两两等间距)

子选择器
algin
越大越近
body内二维 left/right/bottom/left z-index
定位: position 标准文档流偏移 z轴
静态(默认二维)：static 是否否
相对定位：relative 是是(参考其原有位置) 是
绝对定位：absolute 否是是
参考其父辈定位元素
否则参考body
固定定位：fixed 否是(只参考浏览器窗口) 是

其他:
cursor:pointer; 修改鼠标图标类型为手
四边或四角
val 同值
val1 val2 上下边/左上右下角左右边/右上左下角
val1 val2 val3 上边/左下角左右边/右上左下角下边/右下角
val1 val2 val3 val4 都不一样

盒子类型转换：行内->行内块->块
display:
inline:行内元素
inline-block:行内块元素
block:块元素
none:隐藏
flex:弹性盒子

关于两个居中
文字在父容器中的水平垂直位置
水平：text-align:left（默认）,right,center,justify
垂直：height:xxx px;
line-height:xxx px;
盒子在父容器中的水平垂直位置
水平：子盒子:margin:0 auto;
垂直：父盒子:padding:n px 0;