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

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-style
font-weight
- 字体加粗
- 取值范围100~900之间，数值越大，字体越粗
- normal:正常
- bold：加粗
- bolder：比bold还加粗
- lighter:比normal更细
font-size
- px和em
- 1em = 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
- 文本方向
- ltr
- rtl

<!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-top
- border-top:
- border-bottom:
- border-left:
- border-right:
- border-width:边框的宽度
- border-style:边框样式，实线，虚线
  - dotted：点画线
  - dashed:虚线
  - solid:实线
  - double：双画线
- border-color:边框的颜色
padding
- 内边距
- padding
- padding-left:
- padding-right:
- padding-top:
- padding-bottom:
margin
- 外边距
- margin-left
- margin-right
- margin-top
- margin-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-color
background-image
background-repeat
background-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="con2003">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</p><p id="con2004">醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。</p><p>寻声暗问弹者谁？琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。</p><p id="con2005">hello world good morning</p><span id="con2006">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</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-color
list-style
list-style-image
list-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
- rotate
- skew
- scale
- translate

<!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>

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

CSS基础(part1)--引入CSS的方式
学习笔记,仅供参考,有错必纠文章目录 CSS CSS的定义引入CSS的方式行内样式嵌入样式外联CSS样式导入样式 CSS CSS的定义什么是CSS? CSS 指层叠样式表 (Cascad ...
在html中加入外部css样式,如何引入CSS样式表？
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式行内式也称内联样式 ...
HTML/CSS常用标签属性及样式
1.常用布局样式: 参数描述 width 宽度 height 高度 background 背景颜色 border 边框 padding 内边距 margin 外边距 float 浮动 clear 清 ...
前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并
HTML引入CSS的方法 1,嵌入式通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
tp5怎么引用.css.php,tp5分页css tp5怎么引入css，js文件
$Page = new Page($count,5);// 实例化分页类传入总记录数和每页显示的记录数 thinkphp5中直接调用分页为什么样式是竖排的啊? tp5怎么实现搜索分页能保留搜索条件 ...
CSS初学之引入css的三种方式（一）
1.引入css的三种方式一.第一种简介第一种:行内样式每一个元素都具备style属性,通过该属性可以设置元素的相关样式缺点: 复用性不高,样式更新麻烦不复合网页标准,h ...
html，css，js简单介绍，html常用标签
目录简单介绍 HTML常用标签 1.html骨架标签 2.标题标签 3.段落标签 4.换行标签 5.文本格式化标签 6.div标签,span标签和pre标签 7.图像标签 8.超链接标签 9.注释标 ...
CSS设置阴影样式大全包含所有样式有图有代码
常用的样式: 下面还有特殊的效果 <html> <head><title></title><style type="text/css&q ...
CSS阴影样式大全(包含所有样式： demo代码全)看图看代码
常用的阴影样式 <html> <head><title></title><style type="text/css">d ...

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

03.01_css选择器-属性选择器

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

包含选择器案例

父子选择器案例

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

组合选择器案例

03.04_css选择器-伪类选择器

伪类选择器案例

通配选择器

通配选择器案例

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

行内样式案例

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

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

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

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

03.10_css中的属性–字体属性

03.11_css中的属性–文本属性

03.12_css中的属性–盒子属性

03.13_css中的属性–尺寸属性

03.14_css中的属性–背景属性

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

03.16_css中的属性–浮动属性

03.17_css中的属性–定位属性

03.18_形变

03.19_动画animation

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

最新文章

热门文章