前端基础CSS--草莓味小企鹅

CSS

CSS的中文叫做层叠样式表(英文全称：Cascading Style Sheets)，是用来表现HTML的样式的一种计算机语言，CSS的三要素：选择器 属性 属性值

CSS级联样式

1：内联样式，元素标签内的style标签属性添加标签属性值
2：内部样式，把代码写在 head 标签里的style标签内，需要用样式选择器来确定元素
3：外部样式，将样式单独写成一个css文件，使用时用link标签引用这个文件

❤注释
</…/> 注释 用在head里面, html注释只能用在body里面

选择器

❤选择器：
1：标签选择器 标签名{属性:属性值}
2：类选择器 .类名{属性:属性值} 可以重名 class=“c2 c3” 给他两个类名 都可以给他设置样式
3：ID选择器 #id名{属性:属性值}
4：后代选择器：选取的是指定元素的元素的后代标签，通过空格相连
p strong:选取了P标签里面的strong标签
.head1 li{} 定义的时class名下head1元素下所有li元素的样式
5：并集选择器：同时选中多种选择器合并使用
.c1,#d1,h2{ color:#111;} 表示同时选取类=c1,id=d1,g2标签三种元素给与一样的元素值
6：伪类选择器 a:hover 鼠标悬停在a显示的效果
.head1 li{float:left;} 鼠标移动到class名下为head1元素下a元素上的效果
.head1 a:hover{color:#F00;}
7：* 通配符选择器，表示对所有的元素都进行了这个操作

属性 属性值

❤ 盒子模型
内边距 padding
表示本区域内容与本区域各个边框之间的距离
padding-left/top/right/bottom：100Px;内容与左 上 右 下边框之间格外增加100像素
padding：50px; 内容上下左右都是距离50像素
padding：50px 60px; 区域增加与边框上下距离为50像素，左右距离为60像素
padding：50px 60px 70px 80px； 区域增加与边框上右下左距离为50,60,70,80像素
注意：使用内边距区域会拉伸
二：外边距 margin
表示本区域对外的距离
margin-left/top/right/bottom：100px;区域与左 上 右 下边框之间格外增加的10像素
margin：50px; 区域距离上下左右都是距离50像素
margin：50px 60px; 区域距离上下为50像素，左右为60像素
margin：50px 60px 70px 80px； 区域距离上右下左为50,60,70,80像素
margin：0 auto; 区域距离上下为0，左右水平居中
三：边框
border: 1px dashed #CCFF33; 粗细 类型 颜色
border-width:10px; 边框粗细
border-color:#CCFF33; 边框 颜色
边框类型 border-style:solid; 实线 dashed; 虚线

❤ 定位 position
一 默认定位 position：static
系统默认的，可以省略不写
二 相对定位 position：relative
相对自己本身进行定位，相对原本位置的四个边框进行定位
使用相对定位，原本的位置空间会保留。往右边移动，就是左边加多少区域，因为相当于原来的区域的左边增加了多少区域。往下移动就是top加正的多少或者bottom加上负的多少。
参照物是自己
三 绝对定位 position：absolute
参照物是父级区域 可以随意定位 可以在父级区域里面也可以在外面
1 父级区域不是默认定位
根据父级区域进行定位，根据父级区域的四个边框进行定位
2 父级区域是默认定位
绝对定位的元素的位置相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（body）
使用绝对定位，原本的位置空间不会保留
4 固定定位 position：fixed
以浏览器窗口的四个边框进行定位
特点：不会随着鼠标滚动而动
层级： z-index:9； 0是最里层，9表示层数。这个区域浮动在这个区域原本的0层地方的第9层。

❤隐藏和显现
isibility::hidden;/* 隐藏 保留位置空间*/
visibility:visible;/* 显现*/
display:none;/* 隐藏 不保留位置空间*/
display:block;/显现/
opacity:0；/透明度的变化 范围是0-1 0为透明 1为不透明

❤优先级
大到小是：内联样式(10000 )——ID选择器(1000)——类选择器(100)——元素选择器(10)
！Importan 最高优先级别 叠加的选择器用数字相加 越大的就优先级越高

❤页面布局样式（css样式）
1：字体样式： font-**
font-size：字体大小 单位是像素px
font-weight：粗细
font-family：字体
font-style：italic 字体风格 斜体
font: italic bolder 78px “楷体”; 在一个里面设置字体所有属性
2：文本样式
color：颜色
line-height：字体添加 行高 每行的高度
text-align:center; left right 居中对齐 左对齐 右对齐
text-indent:2em; 字体缩进2个字符 em表示单位，一个汉字的大小也可以用像素作为单位
text-decoration:underline; 下划线； overline；上划线；none;去下划线 （文本装饰）
list-style：none ; 去点 (使用ul li时候常用样式)
3：背景样式 background:颜色 图片 定位 平铺方式
背景颜色 background-color： ；
背景图片 background-image：（url） ；
背景定位 background-position:0px 10px;} X轴 y轴
背景平铺方式 background-repeat:no-repeat;不平铺 X-repeat; X轴平铺 Y-repeat; Y轴平铺
4：其他
outline:1px dashed; /边框 1像素 虚线/ 边框，轮廓线 不占用实际的像素

本文地址：https://blog.csdn.net/Libra99WU/article/details/107372295