对于一个网页来说，css是网页的门面，对于一个前端初学者来说，css更是他们必经之路，通过这篇文章我就来带大家好好认识一下css吧！
在学习css之前，我们首先要清楚页面元素。
特点：默认宽100%父，高包裹内容，独占一行。
例如：div(无意义的块元素，不知道使用哪个块元素的时候使用)
html、body、head、h1~h6、p、ul(无序，…)、ol(有序，123) 、li、dl>dt(dl为自定义列表，
dt为标题，dd为列表项(看起来是这样…,其实两者没有区别，可以通过css
把dd的内边距去掉即与dt相同))、dl>dd、H5新增的语义化标签(与div相比，
div没有语义，而语义化标签能方便阅读理解)：content、header、article…
特点：不能通过css为其指定宽高。宽高由自身来决定。与其他行内元素共享一行空间。
例如: span、a(超链接 href 相对地址 当前目录: . 上级目录：…)、H5过期的语义化标签(依旧能
使用)：i(斜体样式)、em(强调)、strong(加粗)、video、audio、img
table：表格，用于展现列表数据，层次结构，自动换行。
form：收集用户数据，与后端交互
iframe:将一个页面嵌入当前页面中。
css又称作重叠样式表，它主要用于对网页中的元素进行精准控制及修改，实现对网页内对象的编辑和处理。
1).将css规则直接写在style中 (耦合性太高，不好，现在多追求高内聚，低耦合)
我要评论<div style="background-color: blue;"></div> <!--直接写在标签中,效果为块元素的背景色为蓝色-->
2).将样式嵌入到style标签中 (样式和html还是没有分开，当样式过多，就会复杂起来)
<head>
<style>
div{
background-color: blue;
}
</style>
</head>
<body>
<div>--将css规则直接写在style中,效果为所有div元素的背景色为蓝色--</div>
</body>
3).将样式写在.css文件中，再通过link引入
link.css文件：
div{
background-color: blue;
}
html文件:
<link rel="stylesheet" href="link.css"> <!--外链引入-->
选择器：
{
属性:值;
…
属性:值;
}
类选择器：.类名{}
注：不同的html元素class值可以重复，即一个类选择器可以被重复使用
<head>
<style>
.uls
{
background-color: burlywood;
}
</style>
</head>
<body>
<p class="uls"></p>
<div class="uls"></div>
</body>
标签选择器(元素选择器)： 标签名{}
注：所有的该标签都会被选择，范围太大，不具体. 如div{}、p{}等等
<head>
<style>
div
{
background-color: burlywood;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
id选择器(优先级高于类选择器)：#id{}
注：一个id选择器只能被使用一次
<head>
<style>
#box
{
background-color: burlywood;
}
</style>
</head>
<body>
<div id="box">1</div>
</body>
组合选择器:div,p{}
注：所有的div标签和p标签都被选择了
<head>
<style>
div,p
{
background-color: burlywood;
}
</style>
</head>
<body>
<p>1</p>
<div>2</div>
<p>3</p>
</body>
并且选择器：div.box{}
注：标签为div且class为box
<head>
<style>
div.box
{
background-color: burlywood;
}
</style>
</head>
<body>
<div class="box">1</div>
<div>2</div>
</body>
普遍选择器： *{}
注：页面中所有的标签都选上
补充：关于css的命名规则，大家可以去下面的链接学习
命名规则
父子选择器：用于找到子元素,满足条件的子元素都会被选择，并不是找到第一个以后就停止不找了。
格式：父 > 子
例：ul>li{} 、 .var>li{} 、 .var>#ls{} .var> *{}
后代选择器：用于找到后代元素,父子选择器里面只找到儿子就行了，后代选择器则是满足条件的儿子的儿子…的 儿子也会找到
格式：父 后代 //中间是空格
例：ul li{} //多重嵌套的li也能找到
<ul>
<li class="first">
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="second">
</li>
</ul>
<!-- 对于父子选择器 ul>li： 他只能找到类名为first和second的li
而对于后代选择器ul li，他还能找到类名为first的li下面的所有li-->
下一个兄弟选择器(直接兄弟选择器)： 兄弟就是跟他有同一父元素的元素
格式：p + *{} //不管p后面是什么都会选择
p + a{} //如果下一个是a标签，会选择，否则不会选择
注：只会看他的下一个兄弟，不管他是否满足条件都不会继续向后寻找
之后所有兄弟选择器
p ~ *{} //选择p后面所有的兄弟
含义：过滤器，在已经选择到的元素上再进一步筛选
格式(列举的为常用的)：
1.锚伪类选择器
元素：状态{} //当元素的状态改变为设置的状态时，进行{}里面的操作。
a:link {color:blue;} //未访问时该链接的字体颜色为blue
a:active{color:#99999;}//鼠标点击时该链接的字体颜色为#999999
a:hover{color:#666666;}//鼠标停留在该链接时的字体颜色为#666666
a:visited{color:#333333;}//该链接被访问时的字体颜色为#333333
2.nth选择器
ul > li:first-child {} //选择ul下的第一个li
ul> li:nth-child(3) {} //选择第三个li
ul> li:nth-child(2n+1) {} //n从0开始每次加1，有几个li则n最大为几。 如果有四个li,则会选择第1，3个li
格式：元素::位置{}
例：
div::first-letter{} //选中元素的第一个字;
div::first-line{} //选中元素第一行；
div::selection{} //选中被选择的文本元素
div::before{content:“hello”} //在元素的首位添加内容 hello
div::after{content:“world”} //在元素内的末尾添加内容,常用于在内部元素浮动后导致块元素高度为0的问题，这个会在后面讲到。
<head>
<style>
div.box::first-letter{
font-size: 20px;
color: blue;
}
div.box::first-line{
font-size: 20px;
}
div.box::selection{
color: red;
}
div::before{
content:"hello"
}
div::after{
content:"world"
}
</style>
</head>
<body>
<div class="box">伪元素的使用</div>
</body>
效果：
鼠标选中了“的使用”
ul>li[class = ls]{} //选择ul下的li中类为ls的li元素
name*=e,包含e
name^=e 以e开头
name$=e，以e结尾
等等很多种筛选方式。
解释：有时候，我们写了几个不同的选择器，但是他们都对同一标签的一个属性进行了赋值，这时就涉及到了优先级的问题，谁的优先级大听谁的。
例如：
<head>
<style>
div.box{
color: blue;
}
div{
color: red;
}
</style>
</head>
<body>
<div class="box">优先级</div>
</body
效果：
!important //例如： color: #333 !important ;
注：当一个属性被赋予特权后，相当于优先级达到最高
style属性(直接写在标签里的) 1000
#id 100
class、伪类选择器 10
标签选择器 1
在上面的例子中，div.box选择器的优先级：1+10=11，div选择器的优先级：1，所以color的属性值有div.box选择器决定
注：如果一样大，则后者覆盖前者
px
em， em是相对于当前元素的字体大小 .3em 表示 0.3个em
rem，rem相对于html元素的字体大小
<head>
<style>
html{
font-size: 20px;
}
div{
color: #ffffff;
background-color: crimson;
margin-bottom: 1px;
padding: 1em; /* 内边距的距离为1字体大小 box1为10px box2为20px,box3为10px */
}
.box1{
font-size: 10px;
}
.box2{
font-size: 20px;
}
.box3{
font-size: 10px;
/* .box3优先级大于div选择器，内边距改为 html中的1字体单位 20px */
padding: 1rem;
}
</style>
</head>
<body>
<div class="box1">hello</div>
<div class="box2">hello</div>
<div class="box3">hello</div>
</body>
针对于块元素内部的元素，具有可继承性，即给块元素施加规则以后，他的后代元素都能继承这个规则
用途：
text-align:conter; //使块元素的内容居中
vertical-align:middle（垂直居中）; //调整行内元素或者表格单元格的垂直对齐方式
line-align:xpx //通过指定行高使得内容垂直居中
overflow:hidden; //隐藏溢出的内容
visible(默认) ; //显示溢出的内容
scroll; //溢出的内容通过滚动条可以访问
overflow-x、overflow-y:分别在x和y轴上 隐藏内容
text-decoration: //文本装饰 none 文本装饰为空
text-decoration-line://线的内容 line-through 将一条线覆盖在字体中间
text-decoration-style://线的类型 solid 实线
text-indent: xem //首段x个像素缩进
text-transform: //大小写转换
<head>
<style>
span.span1{
background-color: blanchedalmond;
}
/* overflow 对溢出的内容进行处理 */
.overflow{
width: 200px;
height: 100px;
border: 1px solid #333333;
overflow: scroll;
}
.overflowson{
width: 600px;
height: 400px;
background-color: crimson;
}
</style>
</head>
<body>
<!-- 内容居中 -->
<div style="text-align: center;">
<span class="span1"> 123</span>
</div>
<!-- 文本垂直居中 -->
<div style="line-height: 53px; background-color: blue; ">
<span>234</span>
</div>
<div class="overflow">
<div class="overflowson">
<span></span>
</div>
<!--文本装饰 -->
<div>
<a href="" style="text-decoration-line: line-through; ">文本装饰</a>
</div>
</body>
用途：对盒子内容进行修饰
font-family: //字体样式
font: font-size/line-height font-family;
例: 12px/1.5 (字体为12px，行高为字体的1.5倍) , '微软雅黑'...;
font-weight(加粗):normal/bold; //可以写数字(100-900)或者bold，一般用bold
font-style(是否斜体):normal/italic;
color：//字体颜色
速写形式：
font：normal normal 12px/1.5 "微软雅黑" //font-style、font-weight、font-size、line-height、font-family //前两个可以缺省，即不写
//表示空格
< //表示<
> //表示>
background(速写形式):url()
background-color:
background-image:url();
linear-gradient(Green,Yellow); //渐变色
radial-gradient(Green,Yellow); //镜像
background-position(背景图片的位置)
background-repeat:norepeat(背景图片不重复)
background-size(指定背景图片的大小，为了不变形，一般等比例):auto(图片原来的大小)、contain
background-clip(裁切)：padding-box(边框的不要，从内容开始裁)
background-origin(铺的起点) border-box(从边框开始) content-box(从内容区开始铺)
<head>
<style>
html,body{
padding: 0px;
margin: 0px;
}
div.container{
height: 1000px;
}
div.box{
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
position: absolute;
/* 使用动画 */
/* 指定使用的动画的名字 */
animation-name: move;
/* 运动的时间，可以是毫秒或秒 */
animation-duration: 3s;
/* 运动曲线 */
animation-timing-function: linear; /*匀速*/
/* 运行按步数执行 */
animation-timing-function: steps(4);
/* 动画循环的方式 */
animation-direction: alternate; /*来回运行*/
/* 动画执行次数 */
animation-iteration-count: 3;
/* animation-iteration-count: infinite; 永远 */
/* 动画运行完成后的状态 */
animation-fill-mode: forwards; /*最后一帧前的状态*/
/* animation-fill-mode: backwards; 最后一帧后的状态 */
/* 开始的延迟 */
animation-delay: 1s;
}
.box:hover{
/* 动画的状态 */
animation-play-state: paused;
}
/* 定义关键帧 */
@keyframes move {
from{
margin-left: 300px;
}to{
margin-left: 1000px;
margin-top: 300px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
1.更加简单的动画，没有动画帧
2.需要触发：如:hover
transition：all 2s delay timing（速写形式） 后两个可以省略
/* 需要过渡的属性 */
transition-property: all;
/* 变化时长 */
transition-duration: 2s;
/* 变化方式 */
transition-timing-function: linear;
/* 延迟时间 */
transition-delay：0s
transform-origin: 10px 20px //指定元素变形的点
transform-scale(2) //放大的倍数（宽和高都放大两倍）
transform-rotate(45deg) //旋转45°
transform-skewX(45deg) //对X方向不变，沿着Y方向旋转45度，（即逆时针旋转45°）
transform-translateX(200px) //沿着x轴平移200px
例：(过渡加变形)
<head>
<style>
div{
margin: 0px;
border: 5px solid #cccccc;
border-radius: 50%;
}
div.outer{
margin-left: 500px;
margin-top: 100px;
box-sizing: border-box;
width: 200px;
height: 200px;
padding: 20px;
/* 发生变化的属性 */
transition-property: all;
/* 变化时长 */
transition-duration: 2s;
/* 变化方式 */
transition-timing-function: linear;
}
div.outer>div.inter{
box-sizing: border-box;
height: 100%;
}
div.outer:hover{
background-image: url(图片的地址);
transform: rotate(360deg);
padding: 40px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inter"></div>
</div>
</body>
display:inline-block; //变为行内块元素，有行和块的特点 即不独占一行且可以指定宽高
bolck; //使该元素变为块元素
inline;//使该元素变为行内元素
opacity:.3//透明度 0-1
列表样式：list-style：none;
表格样式： border-collapse:collapse; //当td添加边框，加在table上，可以合并隔壁的边框
关于css的规则还有很多很多…，本人目前水平有限，见谅。
本文地址：https://blog.csdn.net/qq_40548854/article/details/107573806
如对本文有疑问， 点击进行留言回复！！
网友评论