❤️ Author: 老九
☕️ 个人博客:老九的CSDN博客
🙏 个人名言:不可控之事 乐观面对
😍 系列专栏:
文章目录
媒体查询
- 这段代码是屏幕大于等于600px小于等于1000px的情况下,颜色是红色的。
- media query不会改变选择器的优先级,即使它包裹在media query中
- 在less和sass中,可以用选择器包裹media query,而在原生的编辑器中不行。
@media
@media(min-width:600px) and (max-width:1000px)
{
div{color:red}
}
import结合media使用
link中使用media属性
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media(max-width:700px) {
div {
color: red;
}
}
@media(max-width:800px) {
div {
color: blue;
}
}
@media(min-width:800px) and (max-width:1000px) {
div {
color: yellow;
}
}
@media(min-width:1200px) {
div {
color: olive;
}
}
</style>
</head>
<body>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est, necessitatibus. Officia commodi pariatur nulla
odio libero delectus, necessitatibus praesentium accusamus a repellat repellendus, corporis debitis distinctio nemo
placeat voluptas minima!</div>
</body>
</html>
选择器
选中类名以 ui- 开头的元素
- 注意第一个*选择器的ui-前面有一个空格
[class*=" ui-"],[class^="ui-"]{
color:red;
}
选中类名以er结尾的元素
[class*="er "],[class$="er"]{
color:red;
}
选中float元素
- 必须要加波浪线,代表值里面有left即可,这样防止left前面或后面有其他东西
[float~=left]{
float:left;
}
伪类与伪元素
- 伪类是某一个实际元素在特定条件下的情况,例如::hover,:active::focus,:nth-child(),:first-child(),:nth-of-type() ;伪元素是一个新的元素,为结构添加内容的,例如:::scrollbar,::placeholder,::before,::after::first-letter(第一个实际字符的前面),::first-line,::selection(这个是被鼠标选中的,可以切换背景色之类的,但是不能切换边框,使用的时候直接::selection{})
:target
- 这个伪类是选中目标元素,那么何为目标元素,目标元素就是当前地址栏中#后部分所指示的元素,#后面是谁的id,谁就是目标元素,所以也可以说选中id的值为地址中#后面的内容元素
:target{
color:red;
background-color:yellow;
}
:disable/:enable
- 这个搭配input使用,disable是不可以选中的时候,enable是可选中的时候,这两个是互斥的
:valid/:invalid
- 填对了和没填对
:required/:optional
- 必填项和选填项
:indeterminate
- input状态下的checkbox类型,在处于中间状态的时候,可以触发:indeterminate伪类
checkbox:indeterminate{
}
通过outline画出一个十字架
- outline是不占据空间的,默认显示在border的外面
- outline最常用的就是将a元素类型元素,设置outline:none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
outline: 1px solid red;
font-size: 0;
}
em {
display: inline-block;
height: 50px;
width: 10px;
vertical-align: middle;
}
b {
display: inline-block;
width: 20px;
height: 10px;
vertical-align: middle;
}
</style>
</head>
<body>
<span><b></b><em></em><b></b></span>
</body>
</html>
@font-face
- 这个可以加载网络上的任何字体,在部署静态资源的时,将HTML/CSS/JavaScript/Font一起部署在静态服务器
**第一步:**在字体网站上下载一个字体,默认下载下来的是ttf文件
字体网站链接
**第二步:**使用字体,首先将字体放在对应的目录中,然后通过@font-face引入字体
@font-face {
/*起名字*/
font-family: 我的在线字体;
/*在线的字体*/
src: url(https://www.baidu.com/foo/bar/baz.ttf);
/*可以设定字体的类型,这样font-family就可以是一样的名字,然后可以区分是斜体字等等。。*/
font-style:italic;
}
italic是专门设计的斜体字,而oblique是倾斜得来的。
**第三步:**使用字体
FOUT/FOUC
- 字体加载的时候,可能会因为网 速的问题,导致特殊的字体加载的慢一些,变换的时候会发生突变,这种情况就叫做FOUT
- FOUC是flash of unstyled content,这个会先展现html的页面,在网速不是特别好的情况下,页面突然闪一下才能加载出css的代码,下面这两个写法是一样的
- 他们的解决方案:把(更优的方式是把首屏的样式)样式直接写在页面的style里,而不使用import或者是link,然后把其他的样式写进link标签的href中的css中。
resize属性
- 这个可以设置类似于textarea一样调整大小,值有both,horizontal,vertical,需要搭配overflow:auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
resize: both;
overflow: auto;
direction: rtl;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est, necessitatibus. Officia commodi pariatur nulla
odio libero delectus, necessitatibus praesentium accusamus a repellat repellendus, corporis debitis distinctio nemo
placeat voluptas minima!</div>
</body>
</html>
精灵图 、雪碧图、CSS Sprite
- 将各种小图片合并到一张图片上,然后利用CSS的背景定位来显示对应的图片部分
- CSS精灵图的好处:1.减少网页的http请求数量,加快网页响应速度,减轻服务器的压力2.减小图片总大小3.解决了图片命名的困扰,只需要针对一张集合的图片命名
- 精灵图的原理就是通过只显示图片的很小一部分来展示
字体图标
字体可以设计成各式各样的形状,那么我们也可以把字体设计成图标的样子
优势:1.矢量图,无损放大2.可以随意变色3.很好维护,增减图标不用像css精灵图一样考虑图标的位置4.用到很多个图标时,文件相对图片较小,节省空间
劣势:1.一个图标整体只能是一种颜色2.不能动画
字体图标链接
字体图标使用步骤:
1、通过link引入iconfont.css文件
2、使用字体图标
使用字体图标有两种方式
1.通过对应字体的图标的Unicode来显示代码
2.利用已经编写好的class,直接使用即可
例子:五角星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<style>
span {
font-family: FontAwesome;
display: inline-flex;
flex-direction: row-reverse;
}
span i {
font-style: normal;
}
span i::before {
content: '\F006';
}
span i:hover::before{
content:'\F005';}
span i:hover~i::before {
content: '\F005'
}
</style>
</head>
<body>
<span>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</span>
</body>
</html>
svg
- 优势:svg是矢量图,放大也不会模糊,不是像素点的;一个图标可以是多种颜色组成;可以动画;
- 劣势:使用起来不如字体图标方便,因为用的时候要< s v g ><u s e href=“#xxx” / >< svg> ,而字体图标就一个i标签就可以实现了;页面的顶部还得再放一个很大的svg元素。
- z是闭合,具体的查文档即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg height=300 width=600>
<!-- <circle cx="20" cy="30" r="18" fill="red" stroke="black" stroke-width="4 "></circle>
<rect x="30" y="50" width="80" height="100" fill="pink" stroke="blue" stroke-width="8" rx="15" ry="30" ></rect>
<ellipse cx="200" cy="100" rx="50" ry="30"
fill="blue"
stroke="red"
stroke-width="9"
></ellipse>
<line x1=0 y1=0 x2=60 y2=100 stroke="violet" stroke-width="13"></line>
/*折线*/
<polyline points=" 10 0 30 10 40 100 100 30 200 5" stroke="black" stroke-width="2" fill="none"></polyline>
<polygon points=" 10 0 30 10 40 100 100 30 200 5" stroke="black" stroke-width="2" fill="none"></polygon> -->
<path d="M 20 20 L 50 50 V 80 H 100 A 40 40 93 1 1 100 100 C 180 40 , 270 45,250 128 S 217 247 108 225 z" stroke="black" stroke-width="8" fill="none"></path>
</svg>
</body>
</html>
- 之后把svg的格式变成xml的写法,上面要加上
cusor
可以设置光标在元素上面时的显示样式
————————————————————————
♥♥♥码字不易,大家的支持就是我坚持下去的动力♥♥♥
版权声明:本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章