首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > html教程

CSS3-03 样式 2_html/css_WEB-ITnose

原创
2016-06-24 11:18:50 845浏览

前言 

在上一篇的博客中，阐述了 CSS 盒模型中的 Margin、Border、Padding 三个样式。但是总觉得，这些东西好像是 HTML 元素的包装样式，真正的要点是 HTML 元素（即：盒模型的内容）的样式。不知大家是怎么理解的，欢迎在评论中讨论。接下来，就来看看 HTML 元素都有哪些样式吧！大家都知道 HTML 元素是由标签（如：
）定义的，而标签是具有语意的，其本省包含着一定的格式。标签指定的 HTML 元素的格式，在这里请允许我称其为 HTML 样式；而对于 CSS 定义的 HTML 元素的样式，称其为 CSS 样式。
HTML 样式

  • 概述

    HTML 元素的重要内容是文本（当然也有图像、音频、视频等）。在 HTML 中内置了很多用来格式化文本的标签，这些标签定义的元素内容具有一定的格式，比如说：加粗、倾斜等。
  • 文本格式化
  • 样式标签

  • ：着重文本

    强调文本（<em>标签）

  • ：斜体字

    斜体文本（<i>标签）

  • ：加重语气

    加重语气文本（<strong>标签）

  • ：粗体文本

    粗体文本（<b>标签）

  • ：小号字

    小号字文本（<small>标签）

  • ：上标字

    上标文本上标（<sup>标签）

  • ：下标字

    下标文本下标（<sub>标签）

  • ：插入字

    插入的文本（<ins>标签）

  • ：删除字

    删除的文本文本（<del>标签）

  • 效果图

  • 计算机输出

  • 样式标签
  • ：计算机代码

    •     while (true) { }

  • ：键盘码

        control + e

  • ：计算机代码样本

    Hello World!

  • ：变量

    variable

  • ：预格式文本
         
          
        I        like            HTML
  • 示例

  • 代码

            CSS 样式 2    

     
     
    var variable = true;if (variable) {    print("Hello World!");} else {    // do nothing}
    程序运行结果: Hello World!

  • 效果图

  • 引文、引用和标签定义

  • 样式标签

  • ：缩写

    WWW

  • ：地址

        中国
          上海
        浦东新区
        杨高南路 799 号

  • ：文字方向

        direction
        direction

  • ：长的引用

        The Capon Lake Whipple Truss Bridge is a historic bridge across the Cacapon River in Capon Lake, West Virginia.

  • ：短的引用语

    One person said: Real dream is the other shore of reality.

  • ：引用、引证

    The blog, writed by Island, is so useful

  • ：项目

    Difine a new project at here.

  • 效果图

    • CSS 样式
  • 背景

  • 概述

    一个 HTML 元素，可能会有一个背景，这样才会更加突出元素的内容。正所谓，“鲜花还需绿叶衬”。

  • 可设置的背景样式属性

    属性 含义
    background 简写的背景，简写时按照以下顺序
    background-color 背景颜色
    background-image 背景图片
    background-repeat 背景图片是否及如何平铺
    background-attachment 背景图片是否固定或随着其他部分滚动
    background-position 背景图片的其实位置
  • 示例

  • 代码

    body {    /*背景色为 浅灰色*/    background-color: lightgray;    /*背景图片的 资源地址*/    background-image: url("background.png");    /*背景图片在 x 轴上平铺*/    background-repeat: repeat-x;    /*背景图片固定*/    background-attachment: fixed;    /*背景图片的其实位置为右上角*/    background-position: right top;}

  • 效果

  • 文本

  • 概述

    除了 HTML 标签定义的文本可是外，CSS 还定义了大量的文本样式属性。
  • 可设置的文本样式
  • 基本样式
  • 颜色

  • 语法

    h1 {color: blue;}

  • 颜色值得表示形式
  • 颜色名，如：blue
  • 十六进制数，如：#0000ff
  • rgb 值，如：rgb(0, 0, 255)
  • 字体
  • 作用
  • 定义字体，加粗，大小，文字样式

  • 可设置属性

    属性 含义
    font 字体的简写形式
    font-family 字体系列
    font-style 字体样式
    font-size 字体大小
    font-weight 字体粗细
    font-variant 以小型大写字体或者正常字体显示文本

  • 语法

    .varient {font-variant: small-caps;}

  • 修饰

  • 语法

    a {text-decoration: overline;}

  • 取值及含义

    属性值 含义
    none 标准文本，没有修饰（通常用来去除链接文本的下划线）
    underline 下划线
    line-through 中划线
    overline 中划线
    blink 闪烁文本
    inherit 从父元素那里继承属性值
  • 阴影

  • 语法

    #shadow {text-shadow: 2px 2px orange;}

  • 参数及含义
  • 前两个参数，偏移量（可以为负值）
  • 最后一个参数，颜色值
  • 转换

  • 语法

    #upper {text-transform: uppercase;}

  • 取值及含义

    属性值 含义
    none 默认
    capitalize 每个单词的首字母大写
    uppercase 全部大写
    lowercase 全部小写
    inherit 从父元素那里继承属性值
  • 缩进

  • 语法

    p {text-indent: 35px;}

  • 对齐方式
  • 水平

  • 语法

    h1 {text-align: center;}

  • 取值及含义

    属性值 含义
    left 靠左对齐
    center 居中
    right 靠右对齐
    justify 两端对齐
    inherit 从父元素那里继承属性值
  • 垂直

  • 语法(主要设置嵌入到文本中的元素基于文本的对其方式)

    img {vertical-align: top;}

  • 取值及含义

    属性值 含义
    baseline 默认。元素放置在父元素的基线上
    top 把元素的顶端与行中最高元素的顶端对齐
    middle 把此元素放置在父元素的中部
    bottom 把元素的顶端与行中最低的元素的顶端对齐
    text-top 把元素的顶端与父元素字体的顶端对齐
    text-bottom 把元素的底端与父元素字体的底端对齐
    super 垂直对齐文本的上标
    sub 垂直对齐文本的下标
    length 长度
    % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值
    inherit 规定应该从父元素继承 vertical-align 属性的值
  • 文字方向

  • 语法

    #direction {direction: rtl;}

  • 注意
  • 只作用于块级元素，只有块级元素会在其前后添加换行（及占据单独的一行）
  • 其他样式
  • 字符间距

  • 语法

    h1 {letter-spacing: 3px;}

  • 字间距

  • 语法

    p {word-spacing: 10px;}

  • 行高

  • 语法

    div {line-height: 50px;}

  • 空白的处理方式

  • 语法

    #direction {white-space: pre;}

  • 取值及含义

    属性值 含义
    normal 默认。空白会被浏览器忽略
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 
     标签
    nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
    标签为止
    pre-wrap 保留空白符序列，但是正常地进行换行
    pre-line 合并空白符序列，但是保留换行符
    inherit 规定应该从父元素继承 white-space 属性的值
  • 示例

  • HTML 文档

            CSS 样式 2    

     
     
        
            
    Subject
            
    The firstparagraph.图片
            
            
    The             second                                paragraph
            
    If you want to learn more about HTML, CSS, JavaScript, please click 世俗孤岛

  • css 文件

    div {line-height: 50px;}h1 {    color: blue;    letter-spacing: 3px;    text-align: center;}a {text-decoration: overline;}p {text-indent: 35px;}p {word-spacing: 10px;}img {vertical-align: top;}#upper {text-transform: uppercase;}#direction {    direction: rtl;    white-space: pre;}#shadow {text-shadow: 2px 2px orange;}.varient {font-variant: small-caps;}

  • 效果

    • 后记 
    写到这里，该 Blog 也该到一段落了。回顾一下在该 Blog 中，主要阐述了 HTML 文档中，文本的格式化公式，包括：HTML 样式和 CSS 样式。再接下来的 Blog 中，会详述其他 HTML 元素的 CSS 样式的设置方式。

    CSS3-03 样式 2PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
    上一条：[记录]关于vertical-align单/多选框与说明文字对齐效果_html/css_WEB-ITnose 下一条：元素显示隐藏的9种思路_html/css_WEB-ITnose

    相关文章

    查看更多
    • 热门课程
    打开APP，随时随地在线学习！