欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

css基础-css选择器和css文本样式相关

程序员文章站 2024-02-03 17:55:40
css基础-css选择器和css文本样式相关： 使用link链入外部样式，页面加载时会同时加载样式 @import url(“*.css”);使用导入式，页面加载完后，才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> ......

css基础-css选择器和css文本样式相关：

使用link链入外部样式，页面加载时会同时加载样式

@import url(“*.css”);使用导入式，页面加载完后，才会加载样式

 

链接伪类的顺序

:link-> :visited ->:hover-> :active

或者

: visited -> : link ->:hover-> :active

 

选择器的优先级：

id选择器>class选择器>标签选择器

css基础-css选择器和css文本样式相关

 

 

 

如果设置了同样的类样式，类样式与元素里类的顺序没有关系，取决于哪个样式离需要引用样式的元素最近就用哪个，所以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 h1{ 
        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">
        <h1>css vertical-align 属性</h1>      
    </div>
      <div class="warp2">
        <div class="content">
            <p>vertical-align 属性设置元素的垂直对齐方式</p>
            <p>该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。</p>
        </div>
    </div>    

</body>
</html>

 css基础-css选择器和css文本样式相关

文本大小写：

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>

css基础-css选择器和css文本样式相关

文本样式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选择器和css文本样式相关

上一篇： jni 文件切割合并

下一篇： 《地下城与勇士》手游开启预约：61个经典职业

推荐阅读