css基础-css选择器和css文本样式相关：
使用link链入外部样式，页面加载时会同时加载样式
@import url(“*.css”);使用导入式，页面加载完后，才会加载样式
链接伪类的顺序
:link-> :visited ->:hover-> :active
或者
: visited -> : link ->:hover-> :active
选择器的优先级：
id选择器>class选择器>标签选择器
如果设置了同样的类样式，类样式与元素里类的顺序没有关系，取决于哪个样式离需要引用样式的元素最近就用哪个，所以div里的文字颜色是“橘色“
选择器权值：
标签选择器：1
类和伪类选择器：10
id选择器：100
通配符选择器：0
行内样式：1000
!important：优先级最最高
权值不同时，根据权值判断样式；权值相同时，根据就近原则判断样式
常用选择器：
input:focus
p:first-letter p元素的首字母
p:first-line p元素的首行
rif字体和sans-rif字体的区别：
sans-rif有修饰
sans-rif无修饰
font-style:normal/italic/oblique
正常 斜体 倾斜
font简写顺序： font-style font-variant font-weight font-size font-family；
img水平居中：
img不是块级元素，不能使用img{text-align:center;}
可以在img外面包裹div，使用div{text-align:center;}
margin:0 auto也可以实现
vertical-align可以设置数值
单行文字水平垂直居中：
height与line-height相同，text-align:center;
多行文字水平垂直居中：
多行文字设置margin:0 auto；
文字外容器设置：display:table-cell;vertical-align:middle;
文字外容器的外容器设置：display:table;
<!doctype html><html> <head> <meta chart="utf-8"> <title>vertical-align</title> <style type="text/css"> *{padding:0px;margin: 0px;} .warp1{ height:80px; width: 100%; background-color: #14191e; line-height:80px; text-align:center; } .warp1 h1{ color:#fff; font-size:24px; } .warp2{ height:400px; width: 100%; border:1px #14191e solid; d生物课件isplay:table; } .content{ display:table-cell; vertical-align:middle; } .content p{ width:500px; font-family: "微软雅黑"; line-height:1.5em; font-size:14px; margin:0 auto; } </style></head><body> <div class="warp1"> <h1>css vertical-align 属性</h1> </div> <div class="warp2"> <div class="content"> <p>vertical-align 属性设置元素的垂直对齐方式</p> <p>该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。</p> </div> </div> </body></html>文本大小写：
text-transform：capitalize/upperca/lowerca/none
文本装饰线：
text-decoration: underline/overline/line-through
文本样式应用demo：
<!doctype html><html> <head> <meta chart="utf-8"> <title>vertical-align</title> <style type="text/css"> *{padding:0px;margin: 0px;} .wrap{ height:200px; line-height:200px; width:100%; 我国社会的主要矛盾 text-align:center; background-color: #abcdef; font-family: "宋体"; } span.words{ font-size: 28px; color: gray; text-decoration: underline; letter-spacing: 5px; margin-left: 10px; vertical-align: 12px; } s顷之pan.name{ color:red; font-size: 60px; letter-spacing: 10px; text-transform:upperca; } span.mark{ fo梦幻学校nt-style: italic; color: gray; font-weight: bold; font-size: 60px; } </style></head><body> <div class="wrap"> <span class="name">cyy</span><span class="words">你会越来越棒棒</span><span class="mark">！</span> </div> </body></html>文本样式demo2：
<!doctype html><html> <head> <meta chart="utf-8"> <title>vertical-align</title> <style type="text/css"> *{padding:0px;margin: 0px;} .wrap{ height: 100px; line-height: 34px; width: 100%; padding-left:10px; } hr{ margin:10px 0; } h3{ color:green; margin: 10px 0; } a{ text-decoration: none; color:#009; } span{ color:orange; } </style></head><body> <div class="wrap"> <h3>大话西游之大圣娶亲的影评</h3> <a href="#">热门</a>/<a href="#">最新</a>/<a href="#">好友</a> <hr> <p><a href="#">罗红霉素</a><span></span>2019-07-26</p> <p>有人跟我比赛背台词么</p> <p>阅读：1615 <a href="#">有用</a></p> <hr> <p><a href="#">十七只猫和鱼</a><span></span>2019-04-26</p> <p>任何时候任何场合都可以再看一遍的电影</p> <p>阅读：515 <a hr开心游乐园ef="#">有用</a></p> <hr> <p><a href="#">暖家男</a><span></span>2019-04-22</p> <p>一定有一些电影，永远都不能被超越</p> <p>阅读：490 <a href="#">有用</a></p> <hr> </div> </body></html>
本文发布于:2023-04-07 07:54:41，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/a3901811c081ddb8e26e8f33b4869317.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css基础.doc
本文 PDF 下载地址：css基础.pdf
| 留言与评论（共有 0 条评论） |
