css选择器和文本样式实例分析

本篇内容介绍了“css选择器和文本样式实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联公司专注于企业营销型网站建设、网站重做改版、察哈尔右翼中旗网站定制设计、自适应品牌网站建设、H5响应式网站、商城网站定制开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为察哈尔右翼中旗等各大城市提供网站开发制作服务。

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

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;

   
   
   
   
    *{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;
    }   

   


    
        
CSS vertical-align 属性