• 精通CSS-笔记1基础


    第一部分.基础知识

    Chapter1

    本书中的所有示例代码都可以通过以下网址来访问:www .cssmastery .com / www .friendsofed .com。

    命名类与Id:完全使用小写,使用-连字符。

    微格式:是一组开发人员开发的一套关于命名约定和标记模式,它可以用于标记人物、地点或日期等。简而言之是一套命名规则。

    DOCTYPE当前有两种风格:严格(strict)和过渡(transitional)。过渡允许使用已经废弃的元素,而严格不允许。

    浏览器模式:标准模式和混杂模式(quirks mode)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。Mozzilla与Safari还有第三种模式:“几乎标准的模式”,只在处理表格的方式上有一些细微的差异之处。

    DOCTYPE不存在或形式不正确都会导致HTML和XHTML文档以混杂模式呈现。

    Chapter2.Css选择器

    2.1常用选择器:

    类型选择器(如p、h1)、后代选择器(如blockquote p)、ID选择器(#id)、类选择器(.class)。

    将一个类或ID用于它们的祖先,然后使用后代选择器定位它们。

    伪类::link和:visited称为链接伪类,只能应用于锚元素。:hover、:active和:focus称为动态伪类,理论上可以应用于任何元素。IE7忽略:active和:focus。

           通过把伪类连接在一起,可以创建更复杂的行为,如在已经访问链接和未访问链接上实现不同的鼠标悬停效果,a:visited:hover、a:link:hover。

    2.2通用选择器:*

    2.3高级选择器//IE6-不支持

    如果浏览器不理解某个选择器,就会忽略整条style。但在对于站点功能或布局很重要的元素上,都应该避免使用这些高级选择器。

    子选择器和相邻同胞选择器:

           子选择器只选择元素的直接后代,如#nav>li。IE7+支持,但IE7中有一bug,如果在父元素和子元素之间有HTML注释,就会出问题。在IE6-中,可以通过#nav li{}去设置所有li的样式,再通过#nav li *{}去覆盖这种样式。

           相邻同胞选择器:用于定位同一父元素下某个元素之后的元素,如h2+p。如果在目标元素之间有注释,IE7也会有bug。

    属性选择器:

           可以根据某个属性是否存在或属性的值来寻找元素。

    根据某个元素是否具有某个属性来选择,如:选择acronym具有title属性的元素可以写成acronym[title]{},acronym[title]:hover, acronym[title]:focus{}。

    根据该元素的某个属性值来确定:a [ rel =“nofollow”]。IE7+支持。也可以这样使用[ rel = ”nofollow” ]和这样使用[title]。

    假如属性有多个值,属性选择器允许根据属性值之一寻找元素:a[rel~=”co–worker”]。

    伪元素选择器:

           如p:first-letter{},向p元素的第一个字母添加特殊样式;

           如p:first-line{},向p元素的首行添加特殊样式;

           如p:before{content:url(logo.gif);},在p元素之前添加内容;

           如p:after{content:url(logo.gif);},在p元素之后添加内容;

    层叠和特殊性:

           层叠:寻找到同一元素的方法可以有多种,CSS通过一个称为层叠的过程处理这种冲突。层叠给每个规则分配一个重要度。大维度上的重要度:标有!important的用户样式>标有!important的作者样式>站点开发者编写的样式(作者样式)>浏览器用户自定义(用户样式)>浏览器样式表。

    小维度上的重要度:根据选择器的特殊性决定规则的次序。特殊性:特殊选择器>一般选择器。若两个规则的特殊性相同,那么后定义的规则优先。

    站点开发者编写的样式(作者样式)中,行内样式优先级>其他。ID选择器>类、伪类和属性选择器>类型选择器和伪元素选择器(相邻同胞选择器、子选择器不作为优先级考虑对象)。

    继承:

           应用样式的元素的后代会继承样式的某些属性,比如颜色和字号。IE和Netscapes在继承表格字号存在bug。

           直接应用于元素的任何样式(包括浏览器默认样式)总会覆盖继承而来的样式(因为继承而来的样式的特殊性为空)。

    2.4规划、组织和维护样式表(管理代码的方法)

    推荐使用单一CSS外联样式表。但建议在这一样式表内进行分割代码。以/*开头,以*/结果,进行注释。

    设计代码的结构:

           最前面一般的规则/*group general styles-----*/:主体样式、全局reset、链接、标题、其他元素等。

           辅助样式/*group helper styles-----*/:表单、通知和错误、一致的条目。

           页面结构/*group page structure-----*/:标题、页脚和导航;布局;其他页面结构元素。

           页面组件/*group page components-----*/:各个页面。

           最后覆盖/*group overrides -----*/:这里使用一种风格统一的大注释块分隔每个部分。

    使用注释的自我提醒:@colordef/@todo/@bugfix/@workaround,例:/* @todo: just write some words to remember something */。

    Chapter3 浮动、定位和盒模型

    3.1盒模型概述

    *{margin:0;padding:0;}不要这样设置。

    IE6-的盒模型与W3C标准中的盒模型不同,回避这个问题的方法:不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素或子元素。

    外边距叠加(普通文档流中块框的垂直外边距):当两个或更多垂直外边距相遇时,它们将形成一个外边距,且等于两个发生叠加的外边距的高度中的较大者。两个元素位置可以是上下排列,也可以是一个元素包围另外一个元素。也可是同一个元素:空元素且有外边距无边框无内边距,在这种情况下,顶外边距与底外边距就碰到了一起,发生叠加;即使发生这种情况,在遇到另一个元素时,还会叠加。

    3.2定位概述(position)

    Display:none不占用文档中的空间且不显示。

    CSS中的3种定位机制:普通流、浮动和绝对定位。

    块级框(display:block):外边距叠加,从上到下垂直排列。

    行内元素(行内框display:inline)特点,可以设置水平方向上的内外边距、边框,但不能设置宽度。垂直方向上的设置无任何显示。由一行形成的水平框称为行框,行框的高度足以容纳所有行内框,也可以对行框设置行高。行内框可修改的尺寸:行高、水平边框、水平内外边距。

    Display:inline-block元素:能够设置宽度、高度、垂直与水平外边距和垂直与水平内边距、且水平排列。IE8+支持。

    匿名块框:将一些文本添加到一个块级元素的开关时,会被当作块级元素对待。无法直接对其进行应用样式。但也可以使用:first-line伪元素选择器。

    相对定位position:relative:相对自身位置变动,但原来空间仍然存在(并且仍然会外边距叠加),会覆盖其他框,left/top/right/bottom,默认z-index为0;

    绝对定位position:absolute:脱离普通文档流。位置设置相对于离它最近的已定位的祖先元素。如无,则相对画布或HTML元素(初始包含块)。IE6-存在一个bug。

    固定定位position:fixed:绝对定位的一种,脱离普通文档流,相对于视口(viewport)。IE6-不支持,IE7部分支持。

    普通文档流position:static。

    浮动float:left/right:脱离普通文档流,左右流动到外边缘碰到包含框或另一个浮动框的边缘。浮动元素后面的框会表现得像浮动不存在,但框内容会受到浮动元素的影响,妤选框被缩短,给浮动元素留出空间。

    清除浮动clear:left/right/both/none:在清理元素时,浏览器在元素顶上添加足够的外边距,直到下降到浮动框下面。

    利用溢出overflow:hidden/auto/visible(默认)/scroll:hidden/auto属性值有一个副作用,会自动清理包含的任何浮动元素。

    利用伪类:after以及content”.”;height:0;visibility:hidden;display:block;clear:both;进行清理。IE6-不支持。

    利用JS。

  • 相关阅读:
    MMoE论文笔记
    李宏毅-ELMO, BERT, GPT
    vue 手写一个时间选择器
    this 的几种使用场景
    如何使用markdown编辑器编写文章
    sublime text 3 入门技巧与常见问题解决
    Flex布局介绍
    在github上实现页面托管预览功能
    数据挖掘经典算法——最大期望算法
    数据挖掘经典算法——先验算法
  • 原文地址:https://www.cnblogs.com/carrie-hong/p/4943120.html
Copyright © 2020-2023  润新知