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;

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.    <meta charset="UTF-8">
  5.    <title>vertical-align</title>
  6.    <style type="text/css">
  7.     *{padding:0px;margin: 0px;}
  8.  
  9.     .warp1{
  10.         height:80px;
  11.         width: 100%;
  12.         background-color: #14191e;
  13.         line-height:80px;
  14.         text-align:center;
  15.     }
  16.  
  17.     .warp1 h1{
  18.         color:#fff;
  19.         font-size:24px;
  20.  
  21.     }
  22.  
  23.     .warp2{
  24.         height:400px;
  25.         width: 100%;
  26.         border:1px  #14191e solid;
  27.         display:table;
  28.     }
  29.  
  30.     .content{
  31.         display:table-cell;
  32.         vertical-align:middle;
  33.     }
  34.  
  35.     .content  p{
  36.         width:500px;
  37.         font-family: "微软雅黑";
  38.         line-height:1.5em;
  39.         font-size:14px;
  40.         margin:0 auto;
  41.     }   
  42.  
  43.    </style>
  44. </head>
  45. <body>
  46.     <div class="warp1">
  47.         <h1>CSS vertical-align 属性</h1>
  48.     </div>
  49.       <div class="warp2">
  50.         <div class="content">
  51.             <p>vertical-align 属性设置元素的垂直对齐方式</p>
  52.             <p>该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。</p>
  53.         </div>
  54.     </div>    
  55.  
  56. </body>
  57. </html>

文本大小写：

text-transform：capitalize/uppercase/lowercase/none

文本装饰线：

text-decoration: underline/overline/line-through

文本样式应用demo：

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.    <meta charset="UTF-8">
  5.    <title>vertical-align</title>
  6.    <style type="text/css">
  7.     *{padding:0px;margin: 0px;}
  8.  
  9.     .wrap{
  10.         height:200px;
  11.         line-height:200px;
  12.         width:100%;
  13.         text-align:center;
  14.         background-color: #abcdef;
  15.         font-family: "宋体";
  16.     }
  17.     span.words{
  18.         font-size: 28px;
  19.         color: gray;
  20.         text-decoration: underline;
  21.         letter-spacing: 5px;
  22.         margin-left: 10px;
  23.         vertical-align: 12px;
  24.     }
  25.     span.name{
  26.         color:red;
  27.         font-size: 60px;
  28.         letter-spacing: 10px;
  29.         text-transform:uppercase;
  30.     }
  31.     span.mark{
  32.         font-style: italic;
  33.         color: gray;
  34.         font-weight: bold;
  35.         font-size: 60px;
  36.     }
  37.  
  38.    </style>
  39. </head>
  40. <body>
  41.     <div class="wrap">
  42.         <span class="name">cyy</span><span class="words">你会越来越棒棒</span><span class="mark">！</span>
  43.     </div>    
  44.  
  45. </body>
  46. </html>

文本样式demo2：

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.    <meta charset="UTF-8">
  5.    <title>vertical-align</title>
  6.    <style type="text/css">
  7.     *{padding:0px;margin: 0px;}
  8.  
  9.     .wrap{
  10.         height: 100px;
  11.         line-height: 34px;
  12.         width: 100%;
  13.         padding-left:10px;
  14.     }
  15.     hr{
  16.         margin:10px 0;
  17.     }
  18.     h3{
  19.         color:green;
  20.         margin: 10px 0;
  21.     }
  22.     a{
  23.         text-decoration: none;
  24.         color:#009;
  25.     }
  26.     span{
  27.         color:orange;
  28.     }
  29.    </style>
  30. </head>
  31. <body>
  32.     <div class="wrap">
  33.         <h3>大话西游之大圣娶亲的影评</h3>
  34.         <a href="#">热门</a>/<a href="#">最新</a>/<a href="#">好友</a>
  35.         <hr>
  36.         <p><a href="#">罗红霉素</a><span>★★★★★</span>2019-07-26</p>
  37.         <p>有人跟我比赛背台词么</p>
  38.         <p>阅读：1615 <a href="#">有用</a></p>
  39.         <hr>
  40.         <p><a href="#">十七只猫和鱼</a><span>★★★★</span>2019-04-26</p>
  41.         <p>任何时候任何场合都可以再看一遍的电影</p>
  42.         <p>阅读：515 <a href="#">有用</a></p>
  43.         <hr>
  44.         <p><a href="#">暖家男</a><span>★★★★</span>2019-04-22</p>
  45.         <p>一定有一些电影，永远都不能被超越</p>
  46.         <p>阅读：490 <a href="#">有用</a></p>
  47.         <hr>
  48.     </div>    
  49.  
  50. </body>
  51. </html>

css基础-css选择器和css文本样式相关的更多相关文章

  1. HTML&CSS基础-属性选择器

    HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  2. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  3. CSS基础和选择器

    什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...

  4. CSS 基础 优先级 选择器 继承

    1.样式优先级 (内联样式)Inline style     >    (内部样式)Internal style sheet     >     (外部样式)External style ...

  5. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  6. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. CSS中常见的6种文本样式

    前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...

  8. HTML&CSS基础学习笔记1.12—引入样式表

    引入样式表 我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. < ...

  9. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

随机推荐

  1. MySQL Router单点隐患通过Keepalived实现

    目录 一.介绍 二.环境准备 三.安装步骤 3.1下载软件包,解压 3.2源码安装 3.3配置keepalived 3.4修改keepalived配置文件 3.5启动keepalived 3.6查看V ...

  2. "@阅后即焚"上线了！

    前一阵发现了一个有趣的网站,他可以让你的文字在显示一次后销毁. 直到我把网站发给一个朋友,网站打不开了,于是就想着开发一个. 前端用的bootstrap这个框架,后端用PHP写的,没有后台,现在还不需 ...

  3. 2、TCP/IP

    TCP/IP协议栈:物理层.数据接口层.网络层.传输层.应用层或网络接口层.网络层.传输层.应用层 TCP/IP协议栈的核心协议:1.TCP2.UDP3.ICMP4.IGMP5.ARP:映射IP→Et ...

  4. Codeforces 977D Divide by three, multiply by two（拓扑排序）

      Polycarp likes to play with numbers. He takes some integer number xx, writes it down on the board, ...

  5. 《剑指Offer》第二章（一）题 9 -12

    第二章 面试题9:用两个栈实现队列 题目:如面试题,给你两个栈, 实现队列的先进先出,即在队列头删除一个元素以及在队列的尾部添加一个元素 思路:这个题的分析感觉很巧妙,从一个具体的例子入手,找出其中的 ...

  6. 强连通分量——tarjan算法

    概念: 有向图强连通分量:在有向图G中,如果两个顶点vi,vj间(vi>vj)有一条从vi到vj的有向路径,同时还有一条从vj到vi的有向路径,则称两个顶点强连通.如果有向图G的每两个顶点都强连 ...

  7. CentOS7时区和时间设置

    [root@saltstack-master ~]# timedatectl set-timezone Asia/Shanghai [root@saltstack-master ~]# ln -sf ...

  8. CentOS7.3yum安装MariaDB报错[Errno 256]

    在yum安装MariaDB时出现下面这个错误提示,然后着手排查,先检查了/etc/yum.repo.d/下的配置文件,没有错误. failure: repodata/repomd.xml from m ...

  9. springmvc maven idea 多模块开发（三）：建立子模块

    传统的多模块方式是建立domain.dao.service等,这种方式是按照软件架构进行分割,现在更多的应该是倾向按照功能来解耦,module前期可以配置成jar,后期也可以建立独有的页面,独立的站点 ...

  10. Flutter Widgets 之 FutureBuilder

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 展示异步任务状态 当有一个Future(异步)任务需要展示 ...