首页 网络技术
  1. 正文

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元素的首行

  serif字体和sans-serif字体的区别:

  sans-serif有修饰

  sans-serif无修饰

  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 charset="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 h2{

  color:#fff;

  font-size:24px;

  }

  .warp2{

  height:400px;

  width: 100%;

  border:1px  #14191e solid;

  display: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">

  <h2>CSS vertical-align 属性</h2>

  </div>

  <div class="warp2">

  <div class="content">

  <p>vertical-align 属性设置元素的垂直对齐方式</p>

  <p>该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。</p>

  </div>

  </div>

  </body>

  </html>

  文本大小写:

  text-transform:capitalize/uppercase/lowercase/none

  文本装饰线:

  text-decoration: underline/overline/line-through

  文本样式应用demo:

  <!DOCTYPE html>

  <html>

  <head>

  <meta charset="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;

  }

  span.name{

  color:red;

  font-size: 60px;

  letter-spacing: 10px;

  text-transform:uppercase;

  }

  span.mark{

  font-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 charset="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 href="#">有用</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>

本文标题:css选择器和css文本样式实例分析
本文链接:https://www.qqooo.cn/post/6958.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!