当前位置: article > 正文

css-选择器-三大属性-图标库_css图标库

作者：花生_TL007 | 2024-02-19 09:42:23

踩

css图标库

http协议
   (HyperText Transfer Protocol) 超文本传输协议
   客户端()浏览器和服务器端请求应答通信协议
   客户端发送给服务器端的数据会被封装成请求报文
   请求报文:
       请求行:get url http1.1
       请求头:content-type:application/json 浏览器内核
       空行:空格回车分割内容
       请求体:get请求参数携带在url地址栏 post携带数据携带在请求体中
   服务器端响应给客户端数据会被封装成响应报文
   响应报文:
           响应行 http1.1 状态码 200 OK 500 Internal Serve Error
           响应头 content-type:application/json
           响应体 {status,message:"查询成功",data:[{id,name},{}],timestamp:时间戳}
2.get参数 1kb 2kb 2kb-8kb 写在地址栏上
3.css(Cascading Style Sheets)层叠样式表修饰html文档
   1.语法:
       1.规则集: 选择器{} {声明块 }一个属性就是一个声明
       声明块规则:属性名和属性值之间:隔开多对属性之间使用;隔开最后一对属性可以不加; 建议加
       2.注释 /**/
       3.速记写法 border:width style color;
       笔试题:三角形:width:0 height:0 border:100px solid transparent;
       border-top:100px solid red;
   2.引入css方式
       1.行内样式内联样式 style属性
       2.内部样式表 style标签
       3.外部样式表
           1.使用link标签引入css文件
           2.使用@import引入不建议使用
       优先级:行内样式>内部样式/外部样式 (就近原则)
       link和@import区别:
           所属范围:link属于html标签 @import属于css
           加载:link同时加载html 和 css @import优先加载css
           兼容性:link无兼容性 @import支持ie5+
   3.css选择器
       1.标签选择器 div{}
       2.id选择器 #id{}
       3.class选择器 .类名{}
       4.后代选择器 div p{}
       5.子代选择器 div>p{} 表示选中直接子元素
       6.交集选择器 p.p1
       7.并集选择器(组合选择器) div,#one,.two{}
       8.序选择器(伪类选择器) div:frist-child{} last-child nth-child(n/odd/even/3n+1)
       9.兄弟选择器 css2兄弟选择器(除去本身) .div1+div{} / css3 .div~div{}
       10.动态伪类选择器 link visited hover active love hate
       11.否定伪类

<!DOCTYPE html>

<head>

</style>

<title>Document</title>

<style>

/* 否定伪类选择器从某类元素中剔除一些元素 */

p:not(.p2){

background-color: red;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 伪元素选择器以::开头 */

p::before{ /* 在文本最前面添加文字 */

content: "我是::before";

color: #31c50c;

}

.hh::after{ /* 在文本最后面添加文字 */

content: "我是::after";

}

/* 给标签第一个字符添加样式 */

p::first-letter{

font-size: 30px;

color: aquamarine;

}

/* 给标签第一行添加样式 */

p::first-line{

color: burlywood;

}

</style>

</head>

<body>

段落标签段落标签段落标签段落标签段落标签段落标签<br>

</p>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 选中属性为user的标签（如何属性都算）*/

div[id='one']{

background-color: #ee2e2e;

}

input[type='text']{

background-color: #1e7aa5;

}

/* 选中以user开头属性 css2 [ name|='user'] 只能选中以-隔开的属性名!!

input[name|='user']{

background-color: coral;

}*/

/* css3.属性选择器以user开头 */

input[name^='user']{

background-color: #2fe41f;

}

/* 属性选择器以name结尾 */

input[name$=name]{

height: 30px;

}

/* 属性里包含name的标签(css2) */

input[name*='username']{

width: 10px;

}

</style>

</head>

<body>

<div id="one">我是div</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 通配符选择器普遍选择器选中所有标签一般用于去除标签默认样式 */

color: red;

list-style: none;

text-decoration: none;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

<div>我是div</div>

<ul>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<!-- 3.优先级权重 !important优先级最高

行内样式style属性权重1000

id选择器权重100

类选择器,伪类选择器,属性选择器权重10

标签选择器,伪元素选择器权重1

通配符选择器/普通选择器.权重0

-->

<style>

#parent{

color:red ;

text-align:center;

line-height:30px;

font-size: 20px; /* 可继承 */

}

background-color: #0f21c4;

}

color: #15cfdf !important;

}

</style>

</head>

<body>

<div id="parent">父亲

<div >儿子

</div>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

/* 1.设置颜色关键字

color: yellow; */

/* 2.十六进制0-f 0-9 a-f 3/4/6(有效长度)

color: #22cfd0; */

/* 3.rgb 三原色（red green blue）取值范围0-255 （取值越大越接近三原色，越小越接近黑色） */

/* 4.rgba a为透明度：取值范围0-1 0完全透明，1完全不透明 */

color: rgba(red, green, blue, alpha);

}

</style>

</head>

<body>

<div>wosbq </div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

@font-face{font-family:'ZoomlaFangZhuan-A054'; /*逐浪方篆体*/

src: url('https://code.z01.com/font/ZoomlaFangZhuan-A054.eot?#iefix'); /* IE9 */

src: url('https://code.z01.com/font/ZoomlaFangZhuan-A054.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */

url('https://code.z01.com/font/ZoomlaFangZhuan-A054.woff') format("woff"), /* chrome、firefox */

url('https://code.z01.com/font/ZoomlaFangZhuan-A054.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */

url('https://code.z01.com/font/ZoomlaFangZhuan-A054.svg#ZoomlaFangZhuan-A054') format("svg"); /* iOS 4.1- */

font-style: normal; font-weight: normal;}

@font-face{font-family:'ZoomlaXiangJiao-A025';/*逐浪湘教钢笔体*/

src: url('https://code.z01.com/font/ZoomlaXiangJiao-A025.eot?#iefix'); /* IE9 */

src: url('https://code.z01.com/font/ZoomlaXiangJiao-A025.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */

url('https://code.z01.com/font/ZoomlaXiangJiao-A025.woff') format("woff"), /* chrome、firefox */

url('https://code.z01.com/font/ZoomlaXiangJiao-A025.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */

url('https://code.z01.com/font/ZoomlaXiangJiao-A025.svg#ZoomlaXiangJiao-A025') format("svg"); /* iOS 4.1- */

font-style: normal; font-weight: normal;}

font-style: initial; /* 开启斜体，默认为normal */

font-weight: bold; /* 文本加粗 100-900/bold/bolder */

font-size: medium; /* 文本大小 */

font-family: 'ZoomlaFangZhuan-A054', Courier, monospace; /* 设置字体 */

/* 简写形式font:style Weight size family style wegith可以省略 */

}

font:italic bold 10px "ZoomlaXiangJiao-A025";

color: #dc1919;

}

</style>

</head>

<div>wwww嗡嗡嗡</div>

<p>“普里希别叶夫，您被控告在今年9月3日用言语和行动侮辱乡村巡官席京、乡长阿里亚波夫、乡村警察叶非莫夫、公证人伊万诺夫和加富里洛夫以及其他6个农民，而且前三人是履行公务的时候被您侮辱的。您承认犯罪事实吗？”</p>

<p>普里希别叶夫是个中士。一张长刺的面孔布满皱纹。此刻他手两贴在裤缝线上，做立正的姿势，用沙哑的，闷声闷气的声音答话。他把每一个字咬得清清楚楚，就像下命令那样。</p>

<p>“老爷，调解法官先生！依据法律条款，当然可以让双方当事人说明情况。有罪的不是我，是他们那些人。这件事完全是由那具死尸引起的——愿他的灵魂升到天堂！本月3日我和我老婆心平气和、安闲自在地走路。一瞧，各式各样的人站立在河滩上，一大群。老百姓怎么聚集在一起啦！我要请问，他们有什么权利？难道有法律规定老百姓可以成群结伙吗？我大喊了一声：散开！我推那些人，叫他们各回各家。叫乡警揪着他们的脖子，驱赶他们……”</p>

<p>“让我插一句，您既不是巡官，又不是村长，难道驱散人群也是您的事吗？”

“不是他的事，不是他的事！”从法庭的各个角落响起了声音，“老爷，自从有了他，我们简直活不下去啦！有15年啦！打他从军队回来那一天起，我们就恨不得逃出去才好。他把我们大家可折磨苦啦！”</p>

<p>“老爷，正是这样！”出庭作证的村长说，“全村的人都在抱怨：无论如何也没办法跟他住在一个村子里啦！不管我们举行宗教仪式抬着神像游行也好，不管我们办喜事也好，不管出了什么事情，他准跑来，大喊大叫，闹得乱哄哄的。他给什么事儿都立规矩。他揪小伙子的耳朵，还暗地里盯着女人的一举一动，生怕出什么事儿，倒好似他是她们的公公……前几天，他跑到全村各家各户吩咐大家不得唱歌，不得点灯。他说没有哪一条法律上写着准许唱歌。”</p>

<p>“请您等一下，一会儿还有机会发言，”调解法官说，“现在让普里希别叶夫说下去。普里希别叶夫，请您说下去！”</p>

<p>“是，先生！”中士声音沙哑地说，“老爷，驱散人群怎么不是我的事……很好，先生……可是万一发生不合规矩的事，那怎么办？难道能让老百姓胡闹吗？哪个法律写着可以让老百姓任着性子去干？先生，我可不答应。我要是不去赶他们，管他们，那谁去管他们呢？对真正的规矩，这里的人谁都不懂。老爷，这么说吧：全村的人中只有我才懂得怎么管老百姓。老爷，我什么都懂。我不是农民，我是士官，退伍军需中士，在华沙当过差，在司令部里，先生。后来，如果您想知道的话，我服满兵役正式退了伍，当上消防队员。尔后，因为身体不好，离开消防队，在一所男子古文初级中学看了两年门……什么规矩我都懂，先生。农民是普通人，什么也不懂。他们应该听我的话，这对他们有好处。就拿眼前这件事来说吧……我是赶散了人，可是在岸边上却躺着一具从水里打捞上来的尸体。我要问，这具尸体他为什么还躺在那儿？是什么道理？合乎规矩吗？巡官净看着干什么？于是我就说道：‘巡官，你怎么不去报官？说不上淹死的人是投河自尽还是这里面有西伯利亚的气味呐。也许是一件刑事杀人案呢！’巡官席京若无其事，抽他的烟。他说：‘这人是谁呀？他是从哪儿来的，跑到这里发号施令？难道没有他我们就不会办事了不成？’我说：‘要是你站立在那里什么事也不管，那你这傻瓜就是什么事也不会办。’他说道：‘昨天我就报告本县巡警局长了。’我说：‘为什么要报告本县巡警局长呢？根据的是法律的哪一条？淹死、吊死这一类案子难道归县巡警局长管吗？’我说：‘这是刑事案，民事诉讼啊……’我说：‘眼下要紧的是写报告呈到侦察官和法官那里去。首先……’我又说：‘你应该写报告到调解法官那儿去。’可巡官呐，站在一边光是听着笑。老爷，那些庄稼汉全都笑。我敢起誓，这是千真万确的。我可以把他们指出来。这个人笑过，那个人也笑过。席京呢，他也笑过。我说：‘干什么呲着牙笑？’巡官却说：‘这种案子不归调解法官管。’一听这句话，我马上浑身发热。巡官，你说过这样的话，对吗？”中士转过身对席京说。</p>

<p>“说过。”

“大家都听见你当着老百姓的面说过‘这种案子不归调解法官管。’大家都听见你说过……我浑身发热，老爷。真的，我吓坏了。我说：‘你再说一遍。你这个混蛋，把你说过的话再说一遍！他果然又说了一遍……我就走到他跟前去。我说：‘你说到调解法官大人的时候，怎么能说这种话？你身为巡官要反对政府吗？你知道，要是调解法官愿意，他们就凭你说的这句话，定你行为不端，把你送到省宪兵队去。’我说：‘你知道调解法官大人会因为你有这种政治色彩而把你送到哪儿去吗？’可是乡长他说：‘调解法官不能管他权限以外的事。他只管小案子。’他就是这么说的，大家都听到的……我说：‘你怎么敢无视当局，老兄，你可不要跟我闹着玩，你要倒霉的。’我在华沙当差的时候，后来在男子古文初级中学当看门人的时候，一听到不成体统的话，就往大街上望，找宪兵。我说：‘长官，请到这里来。’我就原原本本地向他报告。可是在这村子里，你向谁报告呢？……我气不打一处来。我一见到有人犯上，就火冒三丈，把胳膊就抡起来了……其实打得不重，只不过正正经经，轻松地给了他一下，好叫他再不敢说那种话来侮辱您老人家……巡官却向着村长，所以呢，我也就给了他一下……这以后可就乱打一通啦……老爷，这也是我一时性起。不过，不打人也办不到。要是瞧见了不明事理的人还不动手，那你的灵魂就要受谴责。何况我这是为了正经的事……出了破坏秩序的事……”

“让我说一句！维持秩序，有人负责。有巡官，村长，还有巡警呀……”

“巡官不能将件件事都管到，况且，他又没有我懂得多……”

“可您得明白：这不是您的事！”

“先生，怎么能这么说？这怎么是与我无关的事呢？怪事，先生，老百姓闹事却与我无关！我该怎么办呢？鼓励他们还是怎么。他们还向您告状，说我不许他们唱歌……唱歌有什么好处？不干正经事，倒还唱起歌来啦……一到晚上就点灯聊天，已经形成风气。该是睡觉的时候，可他们聊天，嘻笑。我已经把他们都记下来了，先生！”

“您记下了什么？”

“记下了谁点灯聊天。”

普里希别叶夫从口袋里掏出一张油乎乎的纸片，戴上眼镜，念道：

“点灯闲谈的人计有：伊万·普罗霍罗夫、萨瓦·米基福罗夫、彼得·彼得罗夫，士兵的寡妇妻子舒斯特罗娃跟谢苗·基斯洛夫非法同居。伊格纳特斯韦尔乔克会巫术，他老婆是巫婆，深夜去挤别人奶牛的奶。”

“够了！”法官说，开始询问证人。

普里希别叶夫中士把眼镜推到前额，一双大眼睛惊讶地望着调解法官，那法官显然不给他支持。他两眼胀得鼓鼓的，鼻尖通红。他看看调解法官，又看看证人，无论如何也闹不明白法官为什么那么生气，为什么不时从法庭的各个角落里发出唏唏怨恨声，传出忍不住的笑声。他也弄不懂为什么判他坐牢一个月！

“为什么？”他说道，迷迷糊糊地摊开双臂，“这是哪一条法律呀？”

他一下子明白过来了：这个世界变了。他在这个世界上是再没法子活下去了。心境一下子沮丧到极点。可是一等到他走出法庭，一看见农民聚集在一块儿谈论着什么，一种他无法克制的莫名的习惯使他立刻做出立正的姿势，用沙哑的声音，愤怒地喊叫：

“老百姓，都散开！不许成群结伙！各回各的家去！”</p>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.iconfont{

color: blue;

}

.icon {

width: 1em; height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

</style>

</head>

<body>

</svg>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wuwu{

/* 上划线 */

text-decoration: overline;

}

/* 下划线 */

text-decoration: underline;

}

/* 删除线 */

h1{

text-decoration: line-through;

}

.haha{

width: 300px;

height: 300px;

background-color: #2fd811;

/* 文字水平居中 */

text-align: center;

/* 文字垂直居中 */

line-height: 300px;

}

.wala{

/* 首行缩进 */

text-indent: 2em;

/* 设置文本阴影 h-shadow:水平阴影的位置允许负值。 v-shadow:垂直阴影的位置允许负值 blur:模糊的距离. color */

text-shadow: 5px 5px 5px #FF0000;

}

section{

/* 设置形变，可以设置单词全部大写uppercase，全部小写lowercase，首字母大写capitalize，等宽字体full-width */

text-transform: uppercase;

}

</style>

</head>

<body>

<div class="wuwu">我是一个div</div>

<p>wwww嗡嗡嗡</p>

<h1>awsfawf</h1>

段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签<br>

</p>

<section>hello css</section>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>

</div>

</svg>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 1.否定伪类选择器 */

div:not(.hh){

color: aqua;

}

/* 2.伪元素选择器 */

.hu::before{

content: "在段首添加文字";

color: #83e108;

font-size: 15px;

}

.hu::after{

content: "在段末添加文字";

color: #83e108;

font-size: 15px;

}

.hu::first-letter{

content: sss; /* 加content没用，只是改变第一个字样式罢了 */

color: #df950c;

font-size: 15px;

}

.hu::first-line{

content: sss; /* 加content没用，只是改变第一句话样式罢了 */

color: #df950c;

font-size: 15px;

}

/* 3.属性选择器 */

div[class=hh11]{

color: #ee1414;

}

div[class^=h]{

background-color: #b5e711;

}

div[class$=1]{

background-color: #027ed0;

}

div[class*=1]{

text-align: center;

}

/* 4.通配符选择器 */

background-color: rgba(100, 100, 20, 0.3);

}

/* 5.三大属性

继承性：子标签继承父标签的color font- text- line

层叠性: 多个css选择器摆弄一个标签，属性会叠加

优先性：id>class=伪类>伪元素（>属性）=标签=伪元素>通配符

/* 6.颜色属性 */

#a{ color: red; }

#b{ color: #027ed0;}

#c{color: rgb(47, 190, 111)}

#d{color: rgba(106, 12, 214, 0.3);}

/* 7.文本属性 */

/* font-weight：粗细 bold

font-size: 大小

font-style: 斜体initial/normal

(font-family) 字体

</style>

</head>

<body>

伪元素选择器伪元素选择器伪元素选择器<br>

</div>

<div class="hh11">属性选择器1属性选择器</div>

<div class="hq21">属性选择器2属性选择器</div>

<div class="ha31">属性选择器3属性选择器</div>

<div class="hz41">属性选择器4属性选择器</div>

<p id="a">直接写颜色英语</p>

</body>

</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/113999