• HTML学习5


    1、选择器的优先级(当使用不同的选择器选择同一个元素,并且设置相同的样式时,优先级高的优先显示)

      优先级规则   内联样式,优先级 1000

                           id选择器,优先级  100

                           类和伪类,优先级   10

                          元素选择器,优先级   1

                           统配*,优先级    0

                            继承样式,没有优先级

        (当选择器中包含多种选择器时,需要将多种选择器优先级相加再比较,p:1  、#p:100   、p#p:101)

    2、文本标签(em和strong)

       <em>标签用于表示一段内容中的着重点(语气强调,默认斜体显示)

       <strong>标签用于表示一个内容的重要性(表示强调内容,比em强烈,默认加粗)

       i          标签的内容会斜体显示(不表示强调)

       b         标签的内容会加粗显示(单纯加粗)

       small   标签的内容会比父元素中的文字小一些

       cite      网页中所有的加书名号的内容,表示参考        <p><cite>《论语》</cite>是最喜欢的一本书</p>

         q         短的引用(行内引用),会默认加引号

         blockquote    长引用(块级引用)

         sup     设置上标     <p>2  <sup>2</sup>  </p>表示2的2次方

         sub      设置下标    <p>H<sub>2</sub>O</p>表示水的化学式

         del       表示删除的内容,会自动添加删除线    <p><del>13.23 </del>  </p>

         ins        表示插入的内容,会自动添加下划线

          pre        一个预格式标签,会将代码中的格式保存,不会忽略多个空格

         code       专门用来表示代码,不会保留格式

    3、列表标签(1、无序列表  2、有序列表  3、定义列表)

        (1)无序列表(使用ul标签来创建一个无序列表,使用li在ul中创建一个一个列表项,一个li就是一个列表)

    例如:

                   <ul>  

                           <li>无序列表</li>

                           <li>有序列表</li>

                           <li>定义列表</li>

                 </ul>   

                    

            (2)有序列表(使用ol标签来创建一个有序列表,使用有序的序号来作为项目序号,type属性,可以指定序号的类型。可选值:1(默认)a/A(采用小写或大写字母作为序号)i/I(采用小写或大写的罗马数字作为序号))

    例如:

                  <ol    type=”1“>  

                        <li>无序列表</li>

                        <li>有序列表</li>

                        <li>定义列表</li>

                </ol>   

              

       (3)定义列表(用来对一些词汇或内容进行定义,dl中有两个子标签dt:被定义的内容dd:对定义内容的描述)

         <dl>

                <dt> 定义列表  </dt>

                <dd>用来对一些词汇或内容进行定义 </dd>

        </dl>

    4、长度单位

        像素(px):我们在网页中使用的最多的一个单位,一个像素相当于一个小点,但不能直接看。不同显示器一个像素大小也不一样

        百分比(%):将单位设置为一个百分比的形式,根据其父元素样式来设置该值。当父元素属性值发生变化,子元素也会根据百分值发生变化。

        em:与百分比类似,相当于当前元素字体大小来计算的,1em=1font-size。当字体大小发生改变时,em也会发生改变

    5、字体

      (1)font-family:字体的类型

              font-style:设置文字的斜体     。。。可选值(normal:默认值,文字正常显示   italic:文字会斜体显示     oblique:文字会倾斜的效果显示)

               font-weight:设置文本的加粗显示。。。可选值(normal:默认值,文字正常显示  bold:文字加粗显示)

    (2)行间距(css并没有直接为我们提供一个直接设置行间距的方式,我们只能通过设置行高来简洁的设置行间距,行高大的行间距越大)

           line-height:行高     font-size:字体大小

          行间距=行高-字体大小

         在font中也可以指定行高(在字体大小后可以添加/行高,来指定行高,如果不指定会选择默认)   语法:  font:50px/50px”宋体“       字体大小/行高”字体类型“

    6、文本样式

       (1)设置文本的大小写(text-transform)

              可选值:  none:默认值,不做任何处理

                               capitalize :单词的首字母大写       

            例如:

                   .a{ text-transform:capitalize; }

                  <p class="a">we should  start back.</p>

                          

                               uppercase:所有字母都大写

                                lowercase:所有字母都小写

     (2)文本修饰(text-decoration)

                 可选值:none:默认值,正常显示

                                 underline:为文本设置下划线

                                 overline:为文本设置上划线

                                 line-through:为文本添加删除线

         例如:    

                  .a {  text-transform:capitalize;
                         text-decoration:underline;}

                   <p class="a">we should  start back.</p>

                            

        (2) letter-spacing:设置字符之间的距离

                    word-spacing:设置单词之间的距离

        (3)text-aline:设置文本对齐方式

                   可选值:left:默认值,文本靠左对齐

                                  right:文本靠右对齐

                                  center:文本局中对齐

                                   justify:两端都齐

         (4)text-indent:设置首行缩进    语法:text-indent:2em

                  当给它指定一个正值时,会自动向右缩进指定的像素。如果是一个负值,会自动向左移动指定像素,这样可以将一些不想显示的文字隐藏起来

     7、表格标签(表格是由一个<table>标签以及一个或多个<tr><td>标签组成)

       (1)<table>标签是父标签,相当于整个表格的容器

                border:   表格边框的宽度。

                width:     表格的宽度。

                 cellpadding:单元边沿与其内容之间的空白。

                 cellspacing:单元格之间的空白。

                 bgcolor:表格的背景颜色。

        (2)<tr>标签用于定义行

        (3)<td>标签用于定义表格的单元格(1个列)

                  colspan:单元格可以横跨的列数。

                  rowspan:单元格可以横跨的行数。

                  align:     单元格的内容的水平对齐方式,取值:left 左  、right  右  、  center  居中。

                  nowrap:单元格中的内容是否折行。

         (4)<th>标签用于定义表头。单元格内的内容默认居中、加粗。

  • 相关阅读:
    WPF控件操作之改变父控件之TabControl示例
    WPF里面的DockPanel的Fill去哪了,如何填满整个空间
    [原创]winform自定义控件之类属性-多重属性-可折叠属性
    WinForm之DataBinding
    WinForm自定义控件之DefaultValue的误解
    code snippet:依赖属性propa的小技巧
    【原创】WinForm中实现单独Time控件的方式
    node.js安装本地模块遇到的目录锁定问题【新手问题】
    《程序员思维修炼》之德雷福斯模型
    IOptions、IOptionsMonitor以及IOptionsSnapshot
  • 原文地址:https://www.cnblogs.com/dixingchen/p/12269035.html
Copyright © 2020-2023  润新知