其实在写这篇博客的时候已经学了很久，也写了不少代码，特别是很枯燥的看完整个html部分，因为不带有CSS写出来的东西干巴巴的一点也不好看。

直到展开CSS学习才开来补上博客，嗯，这是个好习惯。

这是运行后的效果。

文字同样，在百度瞎几把copy的。

<body>

    <h1>h1 Management Team</h1>

    <h2>h2 Introducing Java SE 11</h2>

    <p class="intro">P(intro) The <a class="breed" target="_blank" href="https://www.oracle.com/technetwork/java/javase/downloads/index.html">A DOWNLOAD JAVA 11</a>

    ,How time flies!  Over the last several months,

     Oracle announced changes to evolve the Java platform ensuring

     it continues forward with a vibrant future for users.

      Those advances included:</p>

      <h3>h3 Introducing the Java SE Subscription</h3>

      <p class="intro2">

        P(intro2) Oracle announced the Java SE Subscription over the summer,

        a new model that covers all Java SE licensing and support

        needs to further support for the millions of worldwide businesses

         running Java in production. The subscription complements the

         long-standing free Oracle OpenJDK offering, which enables

         developers and organizations that do not need commercial support.

      </p>

      <p class="credits">P(credits) by ShiFu</p>

</body>

那个链接是下载java的链接，因为当初知道甲骨文的官网是全英文，故意进去copy的。
当然，这里HTML只附有主代码。

body{

    padding: 50px;

}

h1,h2,h3,a{

    font-weight: normal;

    color:#0088dd;

    margin:0px;

}

h1{

    font-family: "华文行楷",Georgia,Times,serif;

    font-size: 250%;

    text-shadow: 5px 5px 20px #666666;

    padding-bottom: 20px;

}

h2{

    font-family:"Gill Sans",Arial, sans-serif;

    font-size: 90%;

    text-transform: uppercase;/*转换为大写*/

    letter-spacing: 0.2em;

}

h3{

    font-size: 150%;

}

p{

    font-family:Arial, Verdana, sans-serif;

    line-height: 1.4em;

    color: #665544;

}

p.intro::first-line{

    font-weight: bold;

}

.credits{

    font-style: italic;

    text-align:right;

}

a{

    text-decoration: none;

}

a:hover{

    text-decoration: underline;

}

CSS则是全部代码，实实在在学到这个地步才知道HTML&CSS脚本语言是有多简单。特别是CSS，简直就是说明补丁123。
首先是html关联CSS文件，特别简单：

版权归作者所有，任何形式转载请联系作者。
作者：云端与海底（来自豆瓣）
来源：https://book.douban.com/review/7736617/

基本选择器
通用选择器＊｛｝匹配所有元素
类型选择器p｛｝匹配某一类型元素
类选择器.class｛｝匹配class属性相同的元素
ID选择器＃id｛｝匹配id属性相同的元素
子元素选择器p>a｛｝匹配指定元素的直接子元素
后代选择器p a｛｝匹配指定元素的后代元素
相邻兄弟选择器h1+p｛｝匹配指定元素的下一个元素
普通兄弟选择器h1～p｛｝匹配指定元素的下一类元素
－特性选择器
简单选择器p［class］匹配一种具有特定属性的元素
精确选择器p［class＝“css”］匹配一个具有特定属性值的元素，该属性值唯一
部分选择器p［class～＝“css”］匹配一个具有特定属性值的元素，该属性值不唯一
开头选择器p［attr^=“c”］匹配一个具有特定属性值的元素，该属性值以某字符串开头
包含选择器p［attr*=“css”］匹配一个具有特定属性值的元素，该属性值包含某字符串
结尾选择器p［attr$=“s”］匹配一个具有特定属性值的元素，该属性值以某字符串结尾

【HTML&CSS】文本的基本处理的更多相关文章

  1. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  2. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  3. css文本格式详解

    一.css文本主体内容: 二.css文本详解:  1.文本缩进 语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...

  4. CSS文本与连接

    CSS文本 CSS文本属性可以定义文本外观,通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进等等. 常用的文本属性 属性 描述 color 文本颜色 direction 文本 ...

  5. [CSS]文本属性（Text）

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  6. CSS 文本、字体、链接

    CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...

  7. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

  8. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  9. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  10. css文本属性用法总结

    稍稍总结了下css文本的一些属性用法,自己忘记的时候也可以用来查查,不用去查网站那么麻烦. 下面是部分总结,也希望对其他人有用 文本修饰 (1)text-decoration:  文本修饰(横线) 4 ...

随机推荐

  1. WinForm 修改App.config不起作用（但是调试没有异常）

    修改Bin下的.exe.config文件,就能达到效果了. appconfig的修改,会保留在项目中,似乎不会实时地更改到.exe.config中..

  2. Qt 学习之路 2（73）：Qt 线程相关类

    Home / Qt 学习之路 2 / Qt 学习之路 2(73):Qt 线程相关类 Qt 学习之路 2(73):Qt 线程相关类  豆子  2013年11月26日  Qt 学习之路 2  7条评论 希 ...

  3. samtools软件作用

    samtools的说明文档:http://samtools.sourceforge.net/samtools.shtml samtools是一个用于操作sam和bam文件的工具合集,包含有许多命令.以 ...

  4. 【原创】elasticsearch入门

    示例 示例一: 示例二: 示例三: 示例四: ES介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Ela ...

  5. fread 快速读入 （神奇挂！）

    注意这里是将后台的所有数据都读入在计算 #include<bits/stdc++.h> using namespace std; #define ll long long namespac ...

  6. 【总结】ettercap工具之DNS劫持

    在arp欺骗成功基础上开始进行dns劫持,,, 1.修改/etc/ettercap/etter.dns文件内容,如下图所示. 将所有域名解析到192.168.1.250地址上,,, 2.etterca ...

  7. PIE SDK正射校正

    1. 算法功能简介 正射校正是对影像空间和几何畸变进行校正生成多中心投影平面正射图像的处理过程.它除了能纠正一般系统因素产生的几何畸变外,还可以消除地形引起的几何畸变 PIE支持算法功能的执行,下面对 ...

  8. VUE项目引入微信jssdk

    npm i -S weixin-js-sdkimport wx from 'weixin-js-sdk'

  9. oracle OEM安装(一)

    01,用户解锁添加密码 [oracle@oracle01 ~]$ sqlplus / as sysdba SQL Production :: Copyright (c) , , Oracle. All ...

  10. 参考美团、饿了么 && localStorage

    localStorage使用.        为什么要使用 localStorage?       因为在之前的讨论过程中,问题:每次添加一件商品和去掉一个商品都需要发送一个http请求来更新购物车, ...