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;

<!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>

文本大小写：

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选择器和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. 共轭先验（conjugate prior）

    共轭是贝叶斯理论中的一个概念,一般共轭要说是一个先验分布与似然函数共轭: 那么就从贝叶斯理论中的先验概率,后验概率以及似然函数说起: 在概率论中有一个条件概率公式,有两个变量第一个是A,第二个是B , ...

  2. Centos7 下搭建STF平台

    STF,全名Smartphone Test Farm---智能手机测试平台,可以提供远程真机调试的功能,目前仅支持Android设备. 环境准备 1.Node.js 8 安装Node.js $ cur ...

  3. Powershell下git中文乱码

    问题 使用git log查看提交历史, 发现中文的部分出现了乱码, 如图 解决方案 powershell中输入下面的命令 git config --global core.quotepath fals ...

  4. 谈恋爱就像TCP连接

    这是一张很内涵的漫画--爱情是靠不住的,即使你使用TCP连接也是如此.一心要握手成功,却被RST的男人就是个彻底的杯具-- 小知识: 一个虚拟连接的建立是通过三次握手来实现的. 第一次握手:建立连接时 ...

  5. python3调用哈工大ltp

    运行环境ubuntu+python3 安装pyltp sudo pip3 install pyltp 下载ltp_data_v3.4.0模型 http://ltp.ai/ 分句 from pyltp ...

  6. POJ_1185_状态压缩dp

    http://poj.org/problem?id=1185 一次考虑两行,比一行略为复杂.sta保存每种状态炮兵位置,sum保存每种状态当行炮兵总数,a保存地形,dp[i][j][k]表示到第i行当 ...

  7. lua学习之复习汇总篇

    第六日笔记 1. 基础概念 程序块 定义 在 lua 中任何一个源代码文件或在交互模式中输入的一行代码 程序块可以是任意大小的 程序块可以是一连串语句或一条命令 也可由函数定义构成,一般将函数定义写在 ...

  8. zip压缩包伪加密技术

    一个 ZIP 文件由三个部分组成: 压缩源文件数据区 + 压缩源文件目录区 + 压缩源文件目录结束标志 压缩源文件数据区: 50 4B 03 04:这是头文件标记(0x04034b50) 14 00: ...

  9. ShiroConfig配置文件无法通过@Value加载yml变量的解决办法

    /** * 配置Shiro生命周期处理器 * 使用springboot整合shiro时,@value注解无法读取application.yml中的配置 *解决方法:将LifecycleBeanPost ...

  10. table-cell设置宽高、居中

    table-cell默认宽高由内容决定 <style type="text/css" rel="stylesheet"> .content { co ...