CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

简介:

1.css层叠的含义

 后面的会覆盖前面的样式

 

2.每个元素生成一个框,也称盒。
 
3.替换元素和非替换元素。
img如果不指定src的外部路径,该元素就没有意义。他由文档本身之外的一个图像文件来替换。
大多数都是非替换元素。span中的内容由用户代理。
 

4.元素间的父子与祖先

如果一个元素在另外一个元素的直接上一层,他们就有父子关系

如果是从一个元素到另外一个元素的路径要经过两层或多层,那这个就是祖先与后代的关系

 
5.animate的动画叠加解决办法
使用的时候在animate前面放上stop
 
6.特殊性,继承,层叠
 
7.声明优先级的内在原因
o,o,o,o中的第一个0就是为内连样式声明保留的。内联样式优先级最高。当然还有一个是使用:!important,来强制改变优先级。
 
8.继承的方向
只能往下继承,不能往上继承。
有一个例外:body元素的背景样式可以向上到html元素。
 
9.伪类
    (1)使用伪类的选择器就是伪类选择器
    (2)伪元素选择器:CSS2.1中定义了4个伪元素
            :first-letter(应用于块级元素)
            :first-line(应用于块级元素)
            :before
            :after           
    
10.border就不能继承
 
11.html与xhtml将类选择器和id选择器定义为区分大小写
 
12.css中导入多个css:使用@important
@important url(styl.css)
 
13.字体下载问题
css2支持下载样式,并定义了响应属性,不过web浏览器总是拒绝下载字体。
 
14.字体:font-family:‘X X’,'XX',AA
字体中如果有特殊符号或者有空格,必须要用引号括起来 ,这是一种推荐做法。
 
15.文本处理
(1)水平对齐
text-align:应用于块状元素
与center不一样,它会使得元素居中不只是文本
 
(2)段落缩进
text-indent:应用于块状元素,可以是正值也可以是负值。负值用于悬挂缩进。
如果是行内元素的话,可以使用左内边距。
 
(3)垂直对齐 
行高:line-height指的是文本行的基线间的距离。
       一种是显示的设置每个元素的行高,这种方式不是很实用。
       另外一种是设定一个缩放因子。
 
        构造文本行:
        文本行中的每个元素都会生成一个内容区,这个由字体的大小确定。    
        这个内容区则会生成一个行内框,如果不存在其他因素,这个行内框完全等于该元素的内容区。
        由line-height产生的行间距就是增加或减少各行内框高度的因素之一。
  
 
vertical-align:作用于行内元素和替换元素 
 
(4)子间隔和字母间隔
字间隔:word-spacing
            这个长度会增加到字之间的标准间隔。
字母间隔:letter-spacing
这两者的区别在于:字母间隔修改的是字符或字母之间的间隔。
 
(5)文本转换
    text-transform
 
(6)文本装饰
    text-decoration
 
(7)文本阴影
    text-shadow
 
(8)处理空白符:其实HTML已经做到了这点,它将任何空白压缩成单个空白符。
    white-space
转载: http://www.cnblogs.com/zqzjs/p/5030885.html
目录
相关文章
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
192 1
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
357 2
CSS3 新增伪类有那些
CSS3 引入了多种新伪类,增强了样式控制的灵活性。新增的结构伪类如 `:nth-child(n)` 和 `:first-of-type` 可以根据元素的位置和类型进行选择;状态伪类如 `:enabled` 和 `:checked` 则根据元素的状态进行选择;动态伪类如 `:hover` 和 `:active` 则基于用户的交互行为。这些伪类让样式定制更加多样和强大。
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
280 0
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
256 3
|
XML 前端开发 安全
如何使用 CSS 中的 :root 伪类选择器
如何使用 CSS 中的 :root 伪类选择器
371 0
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记(3)
理解CSS | 青训营笔记(3)
127 0
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记(2)
理解CSS | 青训营笔记
210 0
|
前端开发 容器
理解CSS | 青训营笔记(1)
理解CSS | 青训营笔记
155 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    238
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    226
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    165
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    133
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    277
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    409
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    177
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    112
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    192
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    262