前端学习 -- Css -- 定义列表

定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中有两个子标签
dt ：被定义的内容
dd ：对定义内容的描述
同样dl和ul和ol之间都可以互相嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <dl>
            <dt>老王</dt>
            <dd>最爱John的男人</dd>
        </dl>
    </body>
</html>

效果：

时间： 2024-08-09 02:08:36

前端学习 -- Css -- 定义列表的相关文章

前端学习 -- Css -- 有序列表和无序列表

列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul中创建一个一个的列表项, 一个li就是一个列表项通过type属性可以修改无序列表的项目符号可选值: disc,默认值,实心的圆点 square,实心的方块 circle,空心的圆注意:默认的项目符号我们一般都不使用!! 如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置 ul和li

前端学习——css(初级)

1.Css盒模型(box model) web开发中,html的每个元素都是盒子,盒子可以装内容(content).可以有填充物(padding).有外壳(border) 和外保护层(margin) .下图为控制台中的盒子详解:浏览器的控制台是我们了解一个元素最好的一个工具,下图可以清晰的看出一个盒子所拥有的属性. 元素的实际宽高上图可清晰的看出元素实际的宽=border-left+padding-left+元素内容宽+padding-right+border-right 元素实际的高=b

前端学习 -- Css -- 选择器的优先级

当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示. 优先级的规则内联样式 , 优先级 1000 id选择器,优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配* , 优先级 0 继承的样式,没有优先级当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式.

前端学习-css(一)

一.CSS介绍 1.什么是CSS CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染) 2.CSS语法 css实例每个CSS样式由两个部分组成:选择器和声明.声明有包括属性和属性值.每个声明之后用分号结束. 3.CSS注释 /*这是注释*/ 二.CSS的几种引入方式 1.行内样式行内式是在标记的style属性中设定CSS样式.不推荐大规模使用 2.内

前端学习 -- Css -- 行间距

在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大.使用line-height来设置行高 .行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示.行间距 = 行高 - 字体大小. 通过设置line-height可以间接的设置行高,可以接收的值: 1.直接就收一个大小: 2.可以指定一个百分数,则会相对于字体去计算行高: 3.可以直接传一个数值,

前端学习 -- Css -- 兄弟元素选择器

为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 +

前端学习 -- Css -- 否定伪类

语法::not(.选择器) 作用:可以从已选中的元素中剔除出某些元素. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:not(.soyoungboy){ background-color: cadetblue; color: red } &l

前端学习 -- Css -- 字体的几个属性学习

font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的 - 一般我们只会使用italic font-weight可以用来设置文本的加粗效果可选值: normal,默认值,文字正常显示 bold,文字加粗显示该样式也可以指定100-900之间的9个值, 但是由于用户的计算机往往

前端学习 --Css -- 子元素的伪类

:first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序: :first-of-type 寻找指定类型中的第一个子元素 :last-of-type 寻找指定类型中的最后一个子元素 :nth-of-type 寻找指定类型中的指定子元素可以使用even,来找到偶数的子元素可以使用odd,来找到奇数的子元素 demo: <!DOCT