CSS
简介：CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
css 概述
1、CSS 指层叠样式表 (Cascading Style Sheets)
2、 样式定义如何显示 HTML 元素
3、 样式通常存储在样式表中
4、 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5、外部样式表可以极大提高工作效率
6、外部样式表通常存储在 CSS 文件中
7、多个样式定义可层叠为一个
css 基本样式
1、文档流的顺序：上左下右
2、行级标签：按照文档流的顺序依次排列
3、块级标签：独占一行
一、基本样式
宽：width：100px;
高：height：100px;
背景颜色：background-color:coral;
注意：行级标签设置的宽高不起作用，行级标签的宽高根据内容的大小自适应
二、css 中颜色表示
单词表示：red、green、blue… 十六进制表示:取值范围 (0～9 && a～f)
RGB 三原色表示:取值范围 (0～255)
三、CSS3 新增颜色：
RGBA：在 rgb 基础上增加了 Alpha 透明度
alpha 取值介于 0.0 完全透明与 1.0 不透明
HSL：分别代表色相、饱和度、亮度
H:0/360 红色 120 绿色 240 蓝色 (0～360)
HSLA：hsl 基础上加了透明度
CSS 注释以 /* 开始, 以 */ 结束
css 引入方式
1、内部样式表
<stely>
div{
width:200px;
height:400px;
background-color:yellow;
}
</stely>
< stely>标签在文档头部定义内部样式
2、内联样式表
<body>
<div stely="width:200px; height=400px; background-color:blue">内联样式</div>
</body>
3.外部样式表
<link rel="stylesheet" href="......">
<body>
<div>外部样式表</div>
</body>
css 样式表优先级
就近原则
相同样式优先级：
当设置相同样式时，后面的优先级较高。
但不建议重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式
优先级相同，如果都设置相同样式
那么后写的样式优先级更高
单一样式优先级
style 行间 > id > class >tag > * > 继承
注： ！important 强制优先
css 中的冲突、层叠、继承
继承： 在子父关系中，文本样式可以被继承，布局样式不能被继承（块级元素可以继承宽）
层叠： 同一元素使用了不同的样式表，所有的样式进行叠加就叫层叠。
冲突： 同一元素设置相同的属性会造成冲突，遵循就近原则选择属性值。
CSS 选择器
1、标签选择器
2、全局选择器
{
margin: 0;
padding: 0;
}
3、class 选择器 .
. q{background-color: aqua;}
4、id # 独一无二
#q{background-color: yellow;}
5、群组选择器 ，
b , a{
background-color: red;
}
6、层次选择器
子代选择器 ：
ul>li{color: red;}
后代选择器 用 空格隔开
相邻兄弟 +
.uu + a{background-color: blue;}
通用兄弟 ~
.uu>li ~ a ~ p{background-color: chartreuse;}
7、伪类选择器
ui 伪类 a标签使用
默认状态
b+a:link{background-color: yellowgreen;}
访问过后的状态
b+a:visited{background-color: aqua;}
鼠标悬浮
b+a:hover{background-color: red;}
鼠标按下
b+a:active{background-color: orange;}
结构伪类
ul li:nth-child(3){background-color: orangered;}
a:nth-child(4){background-color: gold;}
ul p:nth-child(18){background-color: antiquewhite;}
去除无序列表的点
.uu li{list-style: none;}
CSS样式
文字样式
font-size：文字大小
font-style：文字倾斜
font-weight：bold；加粗
@font-face ：自定义引入字体
font-style：指定文本的字体样式
font-variant：mall-caps; 小型大写字母
font-family： “宋体”；字体
文本样式
文本阴影： text-shadow: 水平方向位移 竖直方向上位移 模糊度 颜色；
设置文本颜色： color：red;
去线： text-decoration: none;
下划线： text-decoration:underline
删除线： line-through;
首字母大写： text-transform: capitalize;
文本缩进2个字符 （应用于p段落标签上） text-indent: 2em;
文本居中： text-align: center;
文本行高： line-height: 100px; （一般用来做竖直位置上的居中效果）
文本换行： word-wrap: break-word;
文本不换行 white-space: nowrap;
背景样式
背景颜色： background-color: aquamarine;
背景照片： background-image: url(./img/1.jpg);
背景不重复： background-repeat: no-repeat;
背景定位： background-position:center;
背景覆盖完全，照片可能不完全展示。contain照片宽或高一边完全覆盖，图片展示完全：background-size: cover/100%;
背景固定： background-attachment: fixed;
背景盒模型定位默认从padding开始定位 ：background-origin:content-box;
背景裁剪 ： background-clip: content-box;
盒模型和浮动
边框样式 border
border: 线宽 线样式 颜色；
边框样式：boder: 线宽 线样式 线颜色
盒阴影：box-shadow
boder-redius:50%;（圆边框）
margin：
margin：一个参数代表上下左右
两个参数第一个参数代表上下，第二个参数代表左右
三个参数第一个参数代表上，第二个参数代表右，第三个参数代表下
四个参数第一个代表上，第二个代表右，第三个代表下，第四个代表左
box-sizing:border-box;(怪异盒模型)
rgba:带透明度的颜色
transparent:透明色
opacity：0.3；透明度
overfiow:hidden(溢出的部分隐藏)
overfiow:scroll(滚动条)
overfiow:auto(自适应)
overfiow:visible(默认，溢出显示)
dispiay:none(隐藏)
display：block（显示）
浮动（float）：
文档流：包含元素的布局宽高背景颜色等等
文本流：包含文字元素内容
左浮：不脱离文本流脱离文档流
右浮：既脱离文本流也脱离文档流
浮动带来的问题：
对自身有影响（都脱离文档流，对兄弟改变了布局，对父级造成了坍塌）
清除浮动：
1、给父设高（不推荐）
2、给使用浮动元素后添加一个空的块级元素clear：both；
定位
定位：默认值static
定位机制：{1、普通流：按普通流的顺序走
2、浮动：本行左浮或右浮
3、绝对定位}
position:static;默认按照普通流排序
position:relative:相对定位：（既不脱离文本流也不脱离文档流）
1、当没有偏移量时，原来位置不变
2、相对定位根据原来位置定位
position:absdute：绝对定位（既脱离文本流，也脱离文档流）
1、绝对定位父级没定位根据窗口定位
2、绝对定位父级有定位根据父级定位
固定定位：position:fixed（脱离文档流也脱离文档流）
【固定定位永远根据窗口定位】
粘性定位：position:stick
【当没有达到偏移量时是相对定位，达到偏移量是固定定位】
z-index(调整优先级)
css动画transform
渐变
线型渐变： background-image:linear-gradient( color, color) {颜色}
【渐变方向默认从上往下】
background-image:linear-gradient(to right,color,color);
【改变方向自左往右】
background-image:linear-gradient(to right bottom,color,color);
【角渐变】
background-image:linear-gradient(60deg,color,color);
【角度（deg）渐变】
重复性渐变： background-image:repeating-linear-gradient(color _px,color _px);
静态渐变：background-radial-gradient
位移：【translate】 transform:translate(x,y);
缩放：【scale】 transform:scale(0.5);
旋转：【rotate】 transform:rotate(_deg)；旋转角度
基准点： transform:origin:right bottom;
过渡: transition:0.3s
倾斜： transform: skew(xdeg,ydeg)
布局
表格布局: display:table-cell;
浮动：
对自身影响，脱离文档流，使用元素独立起来并且可以设置宽高。
对兄弟元素影响，改变兄弟元素布局
对父容器影响：造成坍塌
定位：
固定布局：使用标准px单位
流式布局：使用百分比%
多列布局：
column-width:200px; 列宽
column- gap: 2em; 列与列之间的间距为2em
column-count: 5; 分五列（写几分几列）
弹性布局：
display ：flex；默认主轴方向是X轴，起始线是左边开始
flex-direction:column; 改变主轴方向,row x为主轴，column y为主轴
flex-direction:row-reverse x为主轴，起始线从右开始
flex-direction: column-reverse y为主轴，起始线从下开始
flex-wap:wap:默认是nowap不换行，子元素在父元素中换行。
flex-flow:column-reverse nowarp以上两种的综合属性
justify-content:设置子元素在父容器中主轴的排列位置
justify-content:space-between;两端对齐，有空余分配给每个子元素中间
justify-content: spance-around;将剩余空间分为元素2倍，分别在元素左右分配
justify-content:spance-evenly;平均分配剩余空间
align-items:center;设置侧轴上居中
align-self:flex-end 设置元素在侧轴的位置
layui特点:
(1) layui属于轻量级框架,简单美化.是用于开发后端模式,它在服务端页面上有非常好的效果.
(2) layui是提供给后端开发人员的ui框架,基于DOM驱动.
layui的使用：
引入layui的核心css文件
< link rel=“stylesheet” type=“text/css” href=“layui.css文件路径”>
引入layui的hexinjs文件(模块化引入)
< script src=“layui.js文件路径” type=“text/javascript”>
layui模块化的特点
- 模块定义：在Layui中，每个功能模块都是一个独立的文件，通过layui.define来定义模块。
- 依赖加载：模块之间可以通过layui.use来指定依赖关系，确保依赖的模块在使用时已经加载完毕。
- 模块接口：在模块定义中，通过导出接口的方式来提供模块的功能和方法。其他模块或页面可以通过导入模块并使用导出的接口来调用模块的功能。
扫一扫
1467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
