CSS从原理到熟练
目录
css基础介绍
1、行内样式法
介绍：找到对应的标，添加style属性，静态页面还原中用的不多
<p style="color : red"> 我是红色 </p> <p style="color : blue"> 我是蓝色 </p>
2、内部样式表
在head标签中加入style标签
选择器：在样式表中选到指定的标签名
1、标签选择器 直接知道对应的标签名 统一设置样式
2、id选择器 对应的元素名称 #+id名陈
3、class选择器 对应标签给一个class属性 根据class属性找到标签元素
！！！选择器的权重值 如果多个选择器同时选到同一个元素，并且设置的属性相同 谁的权重值大 就听水
id 100>class 10>标签 1
<style>
p{
color: red;
}
.pink{
color: pink;
}
#blue{
color: blue;
}
</style>
<p> 我是红色 </p> <p id="blue"> 我是蓝色 </p> <p class="pink"> 我是粉色 </p>
3、外部样式表
在head标签中使用link标签，利用href属性引入css文件
！！！css文件是和内部样式表中style中的内容一样
<link rel="stylesheet" href="css/css原理.css">
背景基本属性
背景颜色
background-coloe
定义：
1、直接定义法
2、16进制定义法 #xxxxxx （0-f）
3、三原色定义法rgb(x,x) (0-255)
背景图：
如果不足以覆盖 则会自动重复 以至于铺满整个元素
background-image:url(图片路径)
background-repeat：no-repeat 只需要一个图片 不需要铺满元素
background-repeat:repeat-x 横向铺满元素 -y竖着铺满元素
背景图的位置：
background-position
水平：left center right 垂直：top center bottom 还可以写对应的像素值
background-position：center center 或者 background-position ：30px 30px
简写：节约代码
background:颜色 路径 repeat 位置
<style>
#text{
height: 8000px;
width: 8000px;
/* background-color: red;
background-image: url(../2023_01_28/img/1.webp);
background-repeat: no-repeat;
background-position: left bottom; */
background: red url(../2023_01_28/img/1.webp) no-repeat left bottom
}
</style>
基础文本属性
字体基本属性
颜色属性：
color
字号：
font-size：30px
字体：
font-family："宋体" --中文字体必须加引号 英文不需要加引号
加粗：
font-weight：bold --也可以数字加粗 font-weight：30
倾斜：
font-style：italic
<style>
.yanse {
color: red;
}
.zihao {
font-size: 30px;
}
.ziti {
font-family: "宋体";
}
.jiacu {
font-weight: bold;
}
.qingxie {
font-style: italic;
}
</style>
<p class="yanse">颜色属性</P> <p class="zihao">字号</P> <p class="ziti">字体</P> <p class="jiacu">加粗</P> <p class="qingxie">倾斜</P>
文本基本属性
水平对其方式:
text-align：right left center （右 中 左）
text-align：justify:两端对其 应用于多行文本
首行缩进
text-indent: 10px;
文本转换
text-transform:
lowercase 小写 uppercase 大写capitalize 首字母大写
文本修饰线
text-decoration：
underline下划线 overline 上划线 line-through 删除线 none 取消装饰线
行高属性：
line-height 20px:
字母(中文)之间的间距
letter-spacing:20xp;
单词之间的间距
word-spacing : 20px;
<style>
#text{
background-color: black;
color: white;
width: 300px;
text-align: justify;
text-transform:none;
text-decoration: nono;
line-height: 20px;
word-spacing: 20px;
}
</style>
表格和列表属性
表格 ：
1、边框重合
作用于table： border-collapse: collapse；
2、标题
作用于table： caption-side:bottom; 下方
caption-side:top;上方
标题没有左右，只有上下
前提是table标签中有 <caption>标题</caption>标签
3、文字位置：
作用于td： vertical-align：top 上面
middle 居中 默认 bottom下面
列表：
无序列表符号的类型：
作用于ul： list-style-type:square 实心方块 circle空心圆
none 清除列表符合（常用）
将列表符号改为图片（了解）
list-style-image:url(路径);列表符号的位置（了解）
list-style-position:inside
简写
最重要
！！！list-style:none + 图片路径 + inside
一般list-style:none 即可
ul{
list-style-type: none;
list-style-image: url(../3.webp) 20px 20px;
}
边框属性和盒模型
边框三要素：
1、宽度
2、线型
(solid实线 dashed虚线 dotted点划线)
3、边框颜色
border-width
border-style
boedre-color
简写：border : 宽度 线型 颜色
border-bottom :下边框
lfter 左边框
right 右边框
top 上边框
.box{
height: 100px;
width: 100px;
background-color: red;
border-width: 10px;
border-color: green;
/* border-style: solid;
border-color: green;
border: 5px dotted blue; */
border-left: solid;
border-right: dotted;
border-bottom: dashed;
border-top: solid;
}
盒模型
边框：会增加元素的实际站位
一个元素（标签）实际在网页中所在位置的大小
宽：width+左右border
高：height+上下border
盒模型：元素的内容+内边距（padding）+边框（border）+外边距（margin）组成
外边距和内填充
内填充
padding四周都加上填充 内容和容器的距离
padding：
padding-left 左填充
padding-right 右填充
padding-top 右填充
padding-bttom 下填充
p{
padding-left: 10px;
padding-right: 20px;
padding-top: 30px;
padding-bottom: 40px;
}
padding:上 右 下 左
padding: 10px 20px 30px 40px;
外边距
四个值：上右下左
两个值：上下相同 左右相同
margin ： 上 右 下 左
元素和元素之间的距离
margin: auto水平居中
.box{
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
.a{
height: 100px;
width: 100px;
background-color: blue;
margin:10px 20px 30px 40px;
}
margin: auto水平居中 两边的margin值是一样
margin:10px 20px 30px 40px; 上 右 下 左
浮动
浮动的作用：块元素并排显示：
想要让谁并排就给谁加浮动
浮动的元素不占位置
float ：flet 谁并排和谁加
清除浮动的影响 对谁有影响对谁加
clear :both 清除全部影响
.box{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.a{
height: 100px;
width: 100px;
background-color: blue;
float: left;
}
.b{
height: 100px;
width: 100px;
background-color: green;
clear: both;
}
元素转化
行元素转换为块元素
display：bolck 块元素各自一行
块元素转换为行元素（了解）
display:inline 不可以编辑宽高 宽高由字数撑起来 并排
行级块元素（好用）
display:inline-block 可以编辑宽度 可以并排
隐藏元素
display：none 把这个元素隐藏 不显示
a {
display: block;
display: none;
}
.a {
height: 100px;
width: 100px;
background-color: red;
display: inline-block;
}
.b {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
}
.c {
height: 100px;
width: 100px;
background-color: green;
display: inline;
}
.d {
height: 100px;
width: 100px;
background-color: pink;
display: inline;
}
高级选择器
通配符选择器
网页中所有的标签
样式重置
默认的元素中，有些自带有margin值和padding值 ，以ul为例
则 需要重置 margin 和 padding 值
*{
margin:0;
padding:0;
}
分组选择器
可以同时选到多个元素 统一添加相同的样式 选择器 ，选择器，选择器{}
.a,.b {
height: 100px;
width: 100px;
background-color: red;
}
后代选择器
先选择父级（祖先级）容器 再找后代（常用）
父级容器+空格+后代 {} 查找所有的后代
.a,.b {
height: 100px;
width: 100px;
background-color: blue;
}
.a p{
color: red;
}
<div class="a"> <div class="c"> <p>hello word</p> </div> </div>
子选择器 （少用）
父级容器>子集{} 只查找一级
.a>p{
color: red;
}
相邻兄弟选择器
相邻兄弟选择器 找的是下方第一个元素
选择器+p{} 下方第一个
选择器~p{} 下方所有
.c+p{
color: green;
}
.c~p{
color: red;
}
下方第一个：
下方所有:
定位属性
相对定位
依然占的初始位置： 距离自己初始位置定位 定位的坐标点 是自己本身
positiion:relative;
left:距离左上角多少
top:距离上方多少
right:距离自己右边移动多少
bottom:距离自己下边移动多少
绝对定位
不占位置
采用了绝对定位的元素 会先向上查找其父级 是否采用了相对定位 如果采用了就以父级的左上角为坐标点
如果没采用 那么接着向上找 直到找到body
position:absolute
left:相对于父级或者body左边移动
top:相对于父级或者body右边移动
.a{
height: 100px;
width: 100px;
background-color: red;
position: relative;
right: 20px;
}
.b{
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
right: 20px;
}
.c{
height: 100px;
width: 100px;
background-color: green;
}
固定定位
不占位置 默认相对于body
position:fixed;
left:左边
top:上方
z-index调整定位元素的显示层级 z-index越大 层级越高 默认为0
z-index = 10
.b{
height: 100px;
width: 100px;
background-color: black;
position: fixed;
z-index: 10;
top: 200px;
right: 20px;
}
扫一扫
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
