您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

web前端入门到实战:css选择器和css文本样式相关

来源:网络整理 浏览:293次 时间:2020-09-25

【文章来源微信公众号:每天学编程】---关注,后台领取编程资源

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

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

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


链接伪类的顺序

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

或者

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


选择器的优先级:

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

web前端入门到实战: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;

专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)<!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>

 web前端入门到实战: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>

web前端入门到实战:css选择器和css文本样式相关


文本样式demo2:

专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)<!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>

web前端入门到实战:css选择器和css文本样式相关


推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com