css基础

Posted 2021-12-02 an5456

什么是css:
css(层叠样式表)用来规定html文件的展示的形式

css声明:
css属性和值使用冒号分隔,每条样式结束后加分号

选择器:
class选择器
用来将多个元素归成一类,并且可以对这一类的元素应用样式,使用小数点 . 进项选择
id选择器:
id的值不允许重复
标签选择器:
h2
css选择器的权重:
!important > id选择器 > class选择器 > 元素选择器
ul li{color: darkgrey !important;}
后代选择器:
同个选择器,先选择元素多的
ul li{color: rebeccapurple;}
行内样式:写在标签里面的
段落样式:
color:字体颜色

font-size:字体颜色

font-family:文字字体

font-style:字体分格
font-style:italic 表示倾斜

font-weight:文字加粗
normal表示正常 400
bold 表示加粗 700

letter-spacing:字符间距
line-height:行高
word-spacing:空格的宽度
text-align:对齐,对齐方式(letf,centor,right)
text-indent:首行缩进,一个汉字16px宽
text-decoration:文本描述,装饰文本
underline:表示下划线
overline:表示上划线
line-through:表示删除线
去除a标签的下划线:text-decoration: none;
去除无序列表的前面的小黑圆点:list-style:none

背景样式:
background-width:背景宽度
background-height:背景高度
background-color:背景颜色
background-image:url(‘图片位置‘)
background-repeat:背景重复
no-repeat:不重复
repeat-x:水平方向平铺
repeat-y:垂直方向平铺
background-position:背景位移

div:
1.默认宽度,自动将盒子拉伸到最大宽度
2.默认高度为0,可以有子元素将父元素的高度撑起来,因为父元素会始终包裹子元素
3.和h标签类似,前后元素会被换行
4.前后会被换行的标签叫做:块级标签
h,p,ul,ol,dl,li,form,div,body,html都是块级标签
外边距:
1.外边距:如果没有宽度就没有右边的外边距,因为要遵循前后元素都被换行,反之,就没有宽度可以设置
既然块级元素,默认占一行,怎么会有有外边距那(除了没有宽度的元素),右边不能放元素
margin-top:距离上边的外边距的距离
margin-right:距离右边的外边距的距离
margin-left:距离左边的外边距的距离
margin-bottom:距离下边的外边距的距离
margin: 0 0 0 0 ;四个0分别代表:上,右,下,左
margin: 0 0 ; 两个0分别代表垂直方向外边距一样,水平方向的外边距一样
margin:0 ;代表四个方向的外边距都是一样的
2.html排列方向,从左往右,从上往下,文档流的形式
3.内联元素:没有垂直方向的外边距,但是可以有左右方向的外边距(margin-left和margin-right)
4.块级元素居中:自适应 有宽度的元素才能居中 有空隙才能居中,没有空隙不如自动拉伸宽度的块级就没有了,只有外边距才有居中
margin-left:auto
margin-right:auto
内边距:
1.没有负数,也没有auto
2.撑大体积,填充东西(内部白)
3.不会改变内容的主要区域
padding:top
padding:right
padding:bottom
padding:left
边框:
1.边框会增大体积
border-width:边框的宽度 例如:5px
border-color: 边框的颜色 例如:red
border-style:边框的风格 例如:solid(实线)
border-style:dotted 点状
border-style:dashed 虚线
border-double 双线
2.简写方式: border: 5px red solid
3.针对某一边添加边框的样式
border-top-width:上边框的宽度
border-top-color:上边框的颜色
border-top-style:上边框的风格
简写:上边框的宽度 上边框的颜色 上边框的风格
border-top: 5px red solid
border-right: 5px red blue
border-bottom,: 5px red blue
border-left: 5px red blue
获取箭头朝右的三角形:在块级元素上制作
transparent:表示颜色是透明的
三角形腰上的宽度一定要写
width:0
height:0
border-top:20px transparent solid;
border-right:20px transparent solid;
border-bottom:20px transparent solid;
border-left:20px blue solid;
transform:rotate(1deg) 图片旋转一个角度
外边距重合:
1.一个元素的外边距和下一个元素的外边距碰在一起发生重合,外边距会顶着时间的内容边缘
2.两个元素的外边距碰撞,用谁的外边距:哪个大就是用哪个,如果是负数,哪个负的的多就使用那个负的的多的外边距
解决外边距重合的方法:
1.添加一个父元素,border: 1px solid transparend;
2.在父元素上面添加一个 overflow:hidden
浮动:
1.文字不会被盖在浮动层下面，会被挤出来
float：left 左浮动
float： right 右浮动
clear：left 清除左边的浮动
clear：right 清除右边的浮动
clear：both 清除两边的浮动
2.清除浮动：
#方法一 在同级块级元素最后边，添加一个空的块级元素，其属性为：clear：both
#方法二 在父级元素里面，添加属性： overflow：hidden
定位：随心所欲将元素摆放任意位置，并且可以不影响其他元素的位置
相对定位（relative）：只要使用了定位（除过static）都拥有top right bottom left
1.还占据原来的位置
2.相对原来的位置进行定位
绝对定位（absolute）：
1.不占据任何空间
2.相对定位父（除过static以外的父级元素使用了的定位）级进行移动，相对与浏览器进行移动
固定定位（fixed）：
1.不占据任何空间
2.相对于浏览器窗口进行“固定”，不会根据滚动而滚动

z-index调整层级关系：
1.只针对除过static以外的“定位元素”，调整层级关系
2.值越大显示越靠前，如果值相等，按顺序进行重叠覆盖

css回顾：
1.块级元素
前后元素会被换行的元素，可以设置宽高度
使用了脱离文档流的样式，（float,absolute,fixed）元素作为块级元素显示并且无法正常方式显示
2.内联元素（行内元素）
在一行的元素，前后元素不会被换行，且无法设置宽高和上下外边距
3.内联块（行内块）
在一行的元素但是拥有块级元素的特质（除了占一行）
display:block 块级元素
display:inline 内联元素
display:inline-block 内联块
内联元素可以通过设置display:block变为块级元素
去除间隙，设置图片属性为vertical-align: bottom;
overflow:
1.overflow:hidden 超出的部分隐藏
2.overflow:auto 默认不超出原样显示，超出了自动添加滚动条
3.overflow： scroll 不管超不超出都添加滚动条
透明度：
opacity: 0.6 透明40% 0.2透明80% 会将子元素也透明
background：rgba(0~255,0~255,0~255,0~1) 不会将子元素透明
r:red代表的是红色 即255
g:green代表绿色 即255
b:blue代表蓝色 即255
a: 0~1:代表的是透明度，0完全透明，1不透明
盒子和文字的阴影：
盒子外部阴影： box-shadow: 15px 29px 19px red;
盒子内部阴影： box-shadow: inset 15px 29px 19px red;
第一个数值：偏离x值方向的数值
第二个数值：偏离y值方向的数值
第三个数值：表示虚化的程度或者模糊程度
第四个数值：表示虚化的颜色
文字的阴影： text-shadow:5px 5px 19px red
第一个数值：偏离x值方向的数值
第二个数值：偏离y值方向的数值
第三个数值：表示虚化的程度或者模糊程度
第四个数值：表示虚化的颜色
css3筛选：
1./*筛选第一个列标签*/
.list li:first-child
2./*表示第二个列标签*/
.list li:first-child + li
3./*筛选最后一个列标签*/
.list li:last-child
4./*指定筛选正向数即第三个列标签*/
.list li:nth-child(3)
5./*指定筛选倒着数即倒数第二个列标签*/
.list li:nth-last-child(2)
6./*只有在两个以上元素时选择最后一个，not表示除过或者不包括*/
.list li:last-child:not(:first-child)
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
7./*筛选class属性为box下的所有的div标签（除过class属性为box2的div标签）*/
.box div:not(.box2)

<div class="box">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box2">4</div>
<div class="box3">5</div>
</div>
a标签的锚伪类：
1. /*访问之前链接的样式*/
.a2:link
2. /*访问过后链接的样式*/
.a2:visited
3. /*鼠标滑上去时的样式*/
.a2:hover
4. /*鼠标按下的样式*/
.a2:active
<a class="a2" href="http://www.baidu.com">跳转到百度</a>

隐藏和圆角：
1. /*完全隐藏，不占空间*/
display: none;
2. /*隐藏，占空间*/
visibility: hidden;
圆角：宽高度必须一样，bordr-radiux:50%就是一个圆
width: 150px;
height: 150px;
background: skyblue;
margin: auto;
margin-top: 30px;
border-radius: 50%;
border-top-right-radius: 30px;右上角变圆程度
border-top-left-radius: 30px;左上角变圆的程度
border-bottom-right-radius: 30px;右下角变圆的程度
border-bottom-left-radius: 30px;左下角变圆的程度

伪类：内联元素，在标签的后面添加样式
.list li:after{
content: "";
border-top: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
right: 5px;
top: 8px;
}
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>