对于一个网页来说，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&g企业经营性质t; <li></li> <li></li> </ul> </li> <li class="cond"> </li> </ul> <!-- 对于父子选择器 ul>li： 他只能找到类名为first和cond的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;}//该链接被访问时的字体颜色为#3333332.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::lection{} //选中被选择的文本元素
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::lection{ 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选择器决定
注：如果一样大，则后者覆盖前者
pxem， 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> </d飞夺泸定桥的故事简介iv> <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，一般用boldfont-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(图片原来的大小)、containbackground-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: paud; } /* 定义关键帧 */ @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-collap:collap; //当td添加边框，加在table上，可以合并隔壁的边框
关于css的规则还有很多很多…，本人目前水平有限，见谅。
本文地址：https://blog.csdn.net/qq_40548854/article/details/107573806
本文发布于:2023-04-03 19:08:47，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/571e568dd790613b206b8a7c61939ba6.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS基础及用法.doc
本文 PDF 下载地址：CSS基础及用法.pdf
| 留言与评论（共有 0 条评论） |
