1200字范文 > Day03_css选择器 css样式大全引入css样式表常用标签属性形变和动画

Day03_css选择器 css样式大全引入css样式表常用标签属性形变和动画

时间：2022-03-14 13:29:05

03.01_css选择器-属性选择器

针对中写明了某些属性的标签进行设置

选择器[属性名]{属性名称1：值1；属性名称2：值2；....}选择器[属性名="属性值"]{属性名称1：值1；属性名称2：值2；....}

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">[title]{width: 300px;background-color: red;}p[title]{height: 50px;}</style></head><body><img src="../Day02/img/1.jpg" title="img01"/><br /><a href="#" title="本地连接01" style="display: block;">登瓦官阁</a><p title="context01">晨登瓦官阁，极眺金陵城。</p><p>钟山对北户，淮水入南荣。</p></body></html>

03.02_css选择器-包含选择器：

安照标签在代码中的位置层级选择父级标签必须写在前面，子级写在后面，可以跨级操作名称可以使用标签名/类名/id。。。

先辈和后辈标签中间可以跨级操作先辈选择器后辈选择器{属性名称1：值1；属性名称2：值2；....}

包含选择器案例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div table tr td p{font-size: 30px;}#box01 td{background-color: gray;}</style></head><body><div id="box01"><table border="1" cellspacing="0" cellpadding="0"><tr><td>漫漫雨花落，</td><td>嘈嘈天乐鸣。</td></tr><tr><td>两廊振法鼓，</td><td>四角吟风筝。</td></tr><tr><td>杳出霄汉上，</td><td><p>仰攀日月行。</p></td></tr></table><p>山空霸气灭，地古寒阴生。</p></div></body></html>

查找直接子标签

父标签选择器>子标签选择器{只能是父级>子级中间不能跨级，否则无效属性名称1：值1；属性名称2：值2；....}

父子选择器案例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div td{color: red;}div>table{font-size: 30px;}</style></head><body><div id="box01"><table border="1" cellspacing="0" cellpadding="0"><caption>登瓦官阁</caption><tr><td>晨登瓦官阁，极眺金陵城。</td><td>钟山对北户，淮水入南荣。</td></tr><tr><td>漫漫雨花落，嘈嘈天乐鸣。</td><td>两廊振法鼓，四角吟风筝。</td></tr><tr><td class="context">杳出霄汉上，仰攀日月行。</td><td id="context06">山空霸气灭，地古寒阴生。</td></tr></table></div></body></html>

03.03_css选择器-组合选择器：

可以把标签名、类名、id写在一起修饰多个标签使用，分割

选择器1，选择器2，。。。。{属性名称1：值1；属性名称2：值2；....}

组合选择器案例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">h2, p, span{background-color: gold;}h2, #span01, .a01{font-size: 30px;}</style></head><body><div id="box01"><h2>登瓦官阁</h2><p>晨登瓦官阁，极眺金陵城。</p><p>钟山对北户，淮水入南荣。</p><p>漫漫雨花落，嘈嘈天乐鸣。</p><p>两廊振法鼓，四角吟风筝。</p><span id="span01">杳出霄汉上，仰攀日月行。</span><br /><a class="a01" href="#">山空霸气灭，地古寒阴生。</a></div></body></html>

03.04_css选择器-伪类选择器

当标签处于某种状态的时候，显示不同样式

类/id/标签名选择器：特定的设置{属性名称1：值1；属性名称2：值2；....}

伪类选择器案例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">a{color: red;}/* 光标悬浮 */a:hover{font-size: 30px;}/* 点击 */a:active{color: blue;}/* 访问过后 */a:visited{color: black;}</style></head><body><a href="#">点我点我</a></body></html>

通配选择器

给当前标签内部的所有内容设置样式使用 *{} 的方式选择

通配选择器案例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;font-size: 50px;}body{background-color: greenyellow;}</style></head><body><div id="box01"><table border="1" cellspacing="0" cellpadding="0"><tr><td>漫漫雨花落，</td><td>嘈嘈天乐鸣。</td></tr><tr><td>两廊振法鼓，</td><td>四角吟风筝。</td></tr><tr><td>杳出霄汉上，</td><td><p>仰攀日月行。</p></td></tr></table><p>山空霸气灭，地古寒阴生。</p></div></body></html>

03.05_CSS和html的结合方式–行内样式

属性和值写在标签内部，适合单独修饰特殊的标签属性内个行内样式只能修改一个标签作用和写在头部基本相同，可以使用style

行内样式案例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><h2 style="font-size: 30px;background-color: cornsilk;width: 400px;">蝶恋花·伫倚危楼风细细</h2><p style="background-color: gold;">伫倚危楼风细细，望极春愁，黯黯生天际。</p><p style="background-color: grey;">草色烟光残照里，无言谁会凭阑意。</p><p style="background-color: burlywood;">拟把疏狂图一醉，对酒当歌，强乐还无味。</p><p>衣带渐宽终不悔，为伊消得人憔悴。</p></body></html>

03.06_CSS和html的结合方式–内嵌样式

css样式表写在头部能一次修饰所有同名的标签能单独修饰某一个标签需要使用包裹

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">p{font-size: 18px;}#context01{background-color: chartreuse;}#context02{background-color: gainsboro;}#context03{background-color: cornflowerblue;}#context04{background-color: yellowgreen;}</style></head><body><h2>清平乐·画堂晨起</h2><p id="context01">画堂晨起，来报雪花坠。</p><p id="context02">高卷帘栊看佳瑞，皓色远迷庭砌。</p><p id="context03">盛气光引炉烟，素草寒生玉佩。</p><p id="context04">应是天仙狂醉，乱把白云揉碎。</p></body></html>

03.07_CSS和html的结合方式–链接样式

在文件外部编写css代码形成单独的文件使用引入css样式表作用和内嵌样式/行内样式相同样式和标签分开，代码更清晰同一个样式表可以修饰多个HTML文件，提高开发效率

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/main10.css" /></head><body><h3 id="title">赤壁歌送别</h3><p id="context001">二龙争战决雌雄，赤壁楼船扫地空。</p><p id="context002">烈火张天照云海，周瑜于此破曹公。</p><p id="context003">君去沧江望澄碧，鲸鲵唐突留馀迹。</p><p id="context004">一一书来报故人，我欲因之壮心魄。</p></body></html>

03.08_CSS和html的结合方式–导入样式

使用@import url(“css/main10.css”);带入css样式表作用和外部链接link导入一样

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">@import url("css/main10.css");#context004{background-color: maroon;}</style></head><body><h3 id="title">春宿左省</h3><p id="context001">花隐掖垣暮，啾啾栖鸟过。</p><p id="context002">星临万户动，月傍九霄多。</p><p id="context003">不寝听金钥，因风想玉珂。</p><p id="context004">明朝有封事，数问夜如何。</p></body></html>

03.09_CSS和html的结合方式–各种样式的优先级问题

就近原则 – 哪个距离标签近哪个就生效

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#context004{background-color: chartreuse;}#context001{background-color: yellow;}</style><link rel="stylesheet" href="css/main10.css" /></head><body><h3 id="title">迢迢牵牛星</h3><p id="context001">迢迢牵牛星，皎皎河汉女。</p><p id="context002">纤纤擢素手，札札弄机杼。</p><p id="context003">终日不成章，泣涕零如雨。</p><p id="context004">河汉清且浅，相去复几许！</p><p id="context005" style="background-color: darkgreen;">盈盈一水间，脉脉不得语。</p></body></html>

03.10_css中的属性–字体属性

font-family oblique 真正的斜体italic 意大利体normal 正常显示 font-stylefont-weight 字体加粗取值范围100~900之间，数值越大，字体越粗normal:正常bold：加粗bolder：比bold还加粗lighter:比normal更细 font-size px和em1em = 16px em可以随性分辨率的变化改变字体大小–能自适应 12pt = 16px

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#context1405{/*font: bold;*//*font-family: "bookman old style";*/color: red;font-weight: normal;font-style:initial;/*font-size: 2em;*//*font-size: 16px;*/font-size: 12pt;}</style></head><body><h3>欲与元八卜邻先有是赠</h3><p id="context1401">平生心迹最相亲，欲隐墙东不为身。</p><p id="context1402">明月好同三径夜，绿杨宜作两家春。</p><p id="context1403">每因暂出犹思伴，岂得安居不择邻。</p><p id="context1404">可独终身数相见，子孙长作隔墙人。</p><font id="context1405">平生心迹最相亲，欲隐墙东不为身。</font></body></html>

03.11_css中的属性–文本属性

text-decoration 文本装饰none:正常underline:下划线line-through:删除线overline:顶线blink:文字闪烁【不是所有的浏览器都支持】 text-indent 段落缩进：em word-spacing 单词间距 letter-spacing 字符间距 text-align 内容位置left，right，center direction 文本方向ltrrtl

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#con1502{text-indent: 2em;/*letter-spacing: 1em;*/word-spacing: 1em;}#con1505{width: 1000px;height: 300px;/*word-spacing: 2em;*/letter-spacing: 2em;direction: rtl;border: 1px red solid;}#con1503{border: 1px red solid;text-align: center;}#con1504{/*text-decoration: underline;*//*text-decoration: line-through;*/text-decoration: blink;background-color: red;color: blue;}</style></head><body><h3 id="con1501">琵琶行</h3><p id="con1502">元和十年，予左迁九江郡司马。明年秋，送客湓浦口，闻舟中夜弹琵琶者，听其音，铮铮然有京都声。问其人，本长安倡女，尝学琵琶于穆、曹二善才，年长色衰，委身为贾人妇。遂命酒，使快弹数曲。曲罢悯然，自叙少小时欢乐事，今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。因为长句，歌以赠之，凡六百一十六言，命曰《琵琶行》。</p><p id="con1503">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</p><p id="con1504">醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。</p><p>寻声暗问弹者谁？琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。</p><p id="con1505">hello world good morning</p></body></html>

03.12_css中的属性–盒子属性

border 边框属性border-topborder-top:border-bottom:border-left:border-right:border-width:边框的宽度border-style:边框样式，实线，虚线 dotted：点画线dashed:虚线solid:实线double：双画线 border-color:边框的颜色 padding 内边距paddingpadding-left:padding-right:padding-top:padding-bottom: margin 外边距margin-leftmargin-rightmargin-topmargin-bottom

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1601{border: 3px red solid;margin: 30px;padding: 30px;}h3,p{border: 1px blue solid;}#con1601{margin-left: 100px;margin-bottom: 100px;}#con1602{padding-left: 50px;padding-right: 50px;}#con1606{border-top: 1px;border-bottom: 1px;border-style:double;border-color: red;}</style></head><body><div id="box1601"><h3 id="con1601">琵琶行</h3><p id="con1602">元和十年，予左迁九江郡司马。明年秋，送客湓浦口，闻舟中夜弹琵琶者，听其音，铮铮然有京都声。问其人，本长安倡女，尝学琵琶于穆、曹二善才，年长色衰，委身为贾人妇。遂命酒，使快弹数曲。曲罢悯然，自叙少小时欢乐事，今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。因为长句，歌以赠之，凡六百一十六言，命曰《琵琶行》。</p><p id="con1603">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</p><p id="con1604">醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。</p><p>寻声暗问弹者谁？琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。</p><p id="con1605">hello world good morning</p><span id="con1606">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</span></div></body></html>

03.13_css中的属性–尺寸属性

width 宽度 height 高度 line-height 行高px

03.14_css中的属性–背景属性

background linear-gradient(to right bottom,red,blue) 渐变色 background-colorbackground-imagebackground-repeatbackground-attachment 背景状态 background-position 背景位置 left right top bottom center

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">/*body{background: url(../Day01/img/pic01.jpg);background-repeat: no-repeat;background-size: 100%;}*//*body{background-image: url(../Day01/img/pic02.jpg);background-repeat: no-repeat;background-size: 100%;}*//*body{background: url(../Day01/img/pic05.jpg);background-attachment: scroll;background-size: 100%;background-repeat: no-repeat;}*/body{background-image: url(../Day02/img/2.jpg);background-repeat: no-repeat;background-position: center;}</style></head><body><div id="box2001"><h3 id="con2001">琵琶行</h3><p id="con2002">元和十年，予左迁九江郡司马。明年秋，送客湓浦口，闻舟中夜弹琵琶者，听其音，铮铮然有京都声。问其人，本长安倡女，尝学琵琶于穆、曹二善才，年长色衰，委身为贾人妇。遂命酒，使快弹数曲。曲罢悯然，自叙少小时欢乐事，今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。因为长句，歌以赠之，凡六百一十六言，命曰《琵琶行》。</p><p id="con">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</p><p id="con">醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。</p><p>寻声暗问弹者谁？琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。</p><p id="con">hello world good morning</p><span id="con">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</span></div><ol><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li></ol></body></html>

03.15_css中的属性–列表相关的属性

background-colorlist-stylelist-style-imagelist-style-position

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">ol{background-color: aquamarine;line-height: 50px;/*list-style: none;*/list-style-image: url(img/QQ.png);list-style-position: outside;}</style></head><body><ol><li>行政部</li><li>人事部</li><li>财务部</li><li>市场部</li><li>后勤部</li></ol></body></html>

03.16_css中的属性–浮动属性

float 浮动属性div是块标签，在页面中独占一行，从上向下依次排列，这种排列方式称为流经典案例：百度百科

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#img1901{width: 100px;float: right;}#con1901{margin-left: 300px;}</style></head><body><div id="box1901"><img id="img1901" src="img/pic01.jpg" /><p id="con1901">东坡肉相传为北宋词人苏东坡（四川眉山人）所创制，最早发源地是四川眉山。原型是徐州回赠肉，为徐州“东坡四珍”之一。宋神宗熙宁十年（1077年）四月，苏轼赴任徐州知州。七月七日，黄河在澶州曹村埽一带决口，至八月二十一日洪水围困徐州，水位竟高达二丈八尺。苏轼以身卒之，亲荷畚插，率领禁军武卫营，和全城百姓抗洪筑堤保城。经过七十多个昼夜的艰苦奋战，终于保住了徐州城。全城百姓无不欢欣鼓舞，他们为感谢这位领导有方，与徐州人民同呼吸、共存亡的好知州，纷纷杀猪宰羊，担酒携菜上府慰劳。苏轼推辞不掉，收下后亲自指点家人制成红烧肉，又回赠给参加抗洪的百姓。百姓食后，都觉得此肉肥而不腻、酥香味美，一致称他为“回赠肉”。此后，“回赠肉”就在徐州一带流传，并成徐州传统名菜。这在《徐州文史资料》、《徐州风物志》、《徐州古今名馔》中都有记述 [1] 。元丰三年(公元1080年)二月一日，苏轼被贬到黄州任团练副使。他自己开荒种地，便把此地号称“东坡居士”。这就是“苏东坡”的由来。在黄州期间，他亲自动手烹饪红烧肉并将经验写入《食猪肉诗》中。苏轼在徐州及黄州时烹制的红烧肉，只是在当地有影响，在全国并没有多大名气。真正叫得响并闻名全国的红烧肉，是苏轼第二次在杭州时的“东坡肉” [2] 。</p></div></body></html>

03.17_css中的属性–定位属性

absolute: 绝对定位，将对象从文档流中拖出，可以使用top，bottom等属性设置定位不会保留位置 fixed 固定定位一般应用在广告中，参照物为窗体 z-index 叠加元素默认值是0，设置的值越大显示时越在上层

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">/*img{position: absolute;left: 100px;top: 100px;}*//*img{position: fixed;left: 100px;top: 300px;}*/span{display: block;border: 2px blue solid;}#span2201{position: absolute;left: 500px;top: 100px;height: 200px;width: 500px;text-align: right;z-index: 1000;}#span2202{position: absolute;left: 500px;top: 100px;height: 200px;width: 500px;text-align: center;z-index: 20;}#span2203{position: absolute;left: 500px;top: 100px;height: 200px;width: 500px;text-align: left;z-index: 100;}</style></head><body><img src="../Day02/img/2.jpg" alt="" /><span id="span2201" onclick="alert('AAAAA')">AAAAAAAAAAAAAAAAAAAAAAAA</span><span id="span2202" onclick="alert('BBBBB')">BBBBBBBBBBBBBBBBBBBBBB</span><span id="span2203" onclick="alert('CCCCC')">CCCCCCCCCCCCCCCCCC</span><ol><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li><li>hallo</li></ol></body></html>

03.18_形变

transform rotateskewscaletranslate

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#img2301{position: absolute;width: 300px;left: 300px;top: 200px;}#img2301:hover{/*transform: scale(1.5);*//*transform: rotate(30deg);*//*transform: translate(100px);*//*transform: skew(30deg);*/transform: scale(1.5) rotate(30deg);}</style></head><body><a href="22.定位属性.html"><img id="img2301" src="../Day02/img/game01.jpg"/></a></body></html>

03.19_动画animation

@keyframe

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">img {width: 300px;position: absolute;left: 300px;top: 200px;}img:hover {animation: 5s anim;}@keyframes anim {from {left: 300px;top: 200px;transform: scale(1) rotate(0deg);}to {left: 600px;top: 100px;transform: scale(1.5) rotate(360deg);}}</style></head><body><img src="../Day01/img/pic05.jpg" /></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。