css权威指南学习笔记--列表与生成内容

列表属性

1.list-style-type:css2多于css2.1

2.list-style-image:有继承,子级列表会继承该图像

3.list-style-position:inside|outside|inherit   inside:列表符号在内容开始的地方,outside:列表符号单独列在列表内容的外面。

将前面三个属性合并:list-style ,有继承性,三个属性没有顺序要求,只有提供了一个值,其他值可以被忽略 例如:li {list-style:url(ji.gif) square inside}

列表标志位置

标志相对于内容绝对定位,css2用display:marker和marker-offset属性来调整标志的相对于内容的距离,css2.1觉笨拙,淘汰,css3草案定义使用maker伪元素来控制(简洁新方法)例:li::marker{margin-right:20px;}  浏览器现在并没有实现。

生成内容

1、插入生成内容:  伪元素:before 和:after ;content 属性值为插入的内容。生成内容放在元素框的内部。css2及css2.1明确地禁止浮动或定位:before和:after内容,且禁止使用列表样式属性和表属性。另外有2个限制:1.若这两个选择器的主体是块级元素,则display属性只接受值None、inline、block、和marker 其他值处理为block。2、若这个两个选择器的主体是行内元素,属性display只能接受none和inline。其他值处理为inline.

2、生成内容由与之关联的元素继承值(只应用于可继承的属性)。如:关联主体是绿色,生成内容也是绿色

指定内容

content 值:normal | [<string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no - open - quote | no-close-quote ] + | inherit

时间: 2024-12-29 11:31:35

css权威指南学习笔记--列表与生成内容的相关文章

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称

css权威指南学习笔记--第七章

由于之前一直没有系统的看过css相关的书籍,导致自己css方面一直都是处于零散状态.知其然,不知其所以然.所以买了<css权威指南>.虽然比较老了,但是应该也会收获很大. 1 水平方向上 margin-left +border-left+padding-left+width+padding-right+border-right+margin-right 其中红色的是可以设置为auto,当设置为auto时,浏览器会自动计算该值.基于的原则就是 外层包裹容器的width=被包裹元素的width+p

css权威指南学习笔记--第6章

line-height:定义文本行基线之间的距离 <p style="line-height: 20px;"> these are test words<br /> these are test words </p> 说到line-height就不能不说到行框中各个高度是怎么计算的,这里引用css权威指南中的图 文本行中的每个元素都会生成一个内容区,这由字体的大小确定.如果不存在其他因素(如line-height)那么这个内容区的高度就是行内框的高度

CSS权威指南学习笔记 —— HTML元素分类

HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种:替换元素和非替换元素.创建方式会对盒模型的表现有所影响,后续的笔记中会看到. 替换元素:这种元素的内容部分并非由文档直接显示,而是用其他内容来替换.最常见的替换元素img,它是由文档本身之外的一个图片文件来替换的.input也是替换元素,是根据类型的值来决定内容是什么,有时内容被替换成单选钮,有时

CSS权威指南学习笔记 —— 初步认识CSS

层叠样式表(Cascading Style Sheets,CSS)可以影响文档的表现.CSS是依附于文档的,如果不存在某种文档,CSS基本上是没有用的. 为什么会有CSS 在web早期(1990-1993),HTML由一些结构化元素组成,用于描述段落.超链接.列表和标题等.简单来说刚开始的时候,HTML是个非常有限的语言,并不关心外观,一篇文章,里面有一些超链接.大概张这个样子. 后来有了第一个图形浏览器Mosaic,把浏览网页的体验变得更好,各种网站就开始涌现了.然后人们对网页的需求也变得越来

css权威指南学习笔记

1,继承 一般大多数框模型属性都是不能继承的.如:padding .margin .border .background 都不能继承. 继承值,完全没有特殊性.(就是优先级最低) 2,缩进 text-indent: 属性 段落前空格.应用于块级元素 3,水平对齐: text-align   text-align:center 该属性只对元素中的内容进行位置的控制,标签<center>不仅控制内容位置,而且控制整个元素位置. 4,垂直对齐:  line-height,可应用于所有元素,可继承.

sencha touch权威指南---学习笔记5-经纬度获取计算直线距离

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <link rel="stylesheet" href="sdk-touch/resources/css/sencha-touch.

Git权威指南学习笔记(一)Git初始化

1.在Git中配置用户名和邮件地址 $ git config --global user.name "Jymn_Chen" $ git config --global user.email "[email protected]" 注意把用户名和邮件地址替换成你自己的资料. 在这里的参数global表示配置的作用范围是当前用户,如果将参数改为system,那么配置的作用范围是系统中的所有用户. 2.创建版本库 新建一个目录并cd到目录中,执行以下命令: $ git i

Git权威指南学习笔记(二)Git暂存区

如下图所示: 左侧为工作区,是我们的工作目录. 右侧为版本库,其中: index标记的是暂存区(stage),所处目录为.git/index,记录了文件的状态和变更信息. master标记的是master分支所代表的目录树.HEAD指向master分支. objects标记的是Git的对象库,所处目录为.git/objects,文件索引建立了文件和对象库中对象实体之间的映射关系. 通过该图我们可以清晰地看出add,commit等命令的转化关系.下面通过git diff和git status两条命