목차
 
div和span:
微格式(microformat):
文档类型定义DTD:
选择器(selector):
层叠(cascade)和特殊性:
继承:
规划组织和维护样式表:管理代码的方法
CSS文档结构
颜色参考值表
CSS优化
盒模型
可视化格式模型
CSS三种定位机制:
IE和盒模型
웹 프론트엔드 HTML 튜토리얼 【读书笔记】精通CSS 第二版_html/css_WEB-ITnose

【读书笔记】精通CSS 第二版_html/css_WEB-ITnose

Jun 24, 2016 am 11:54 AM

 

div和span:

div用来对块级元素分组,span用来对行级元素分组。div代表division,它可以将文档分隔为几个有意义的部分,应该只在没有现有元素能实现区域分隔的情况下使用div。

微格式(microformat):

HTML中缺少相应的元素,很难突出显示人,地点,日期等类型的信息

参考:  微格式

文档类型定义DTD:

DTD是一组机器可读的规则,它们定义XML或HTML的特定版本中允许有什么不允许有什么,在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施

  • DOCTYPE当前有两种风格,严格(strict)和过渡(transitional)
  • 浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性,他们创建了

  • 标准模式
  • 混杂模式(quirks mode)
  • 几乎标准的模式(almost standard mode)
  • 选择器(selector):

  • 元素选择器
  • 后代选择器:由两个选择器之间的空格表示
  • ID选择器
  • 类选择器
  • 伪类选择器:
  •                              :link 和:visited称为链接伪类,只能用于锚元素

                                :hover :active 和 :focus称为动态伪类,理论上可以用于任何元素

  • 通用选择器:*,可以用来对某个元素的所有后代应用样式,或者跳过一级后代
  • 子选择器:>  ,只选择元素的直接后代,即子元素
  • 相邻同胞选择器:+ , 用于定位同一个父元素下某个元素之后的元素
  • 属性选择器:根据某个属性是否存在或属性的值来寻找元素
  • 层叠(cascade)和特殊性:

    !important提高重要度。

    作者的样式表即站点开发者最重要,用户其次,最后是浏览器或者用户代理使用的默认样式表

    如果两个规则的特殊性相同,那么最后定义的优先

    层叠采用以下重要度次序:

    1. 标有!important的用户样式
    2. 标有!improtant的作者样式
    3. 作者样式
    4. 用户样式
    5. 浏览器/用户代理应用的样式

    继承:

    应用样式的元素的后代会继承样式的某些属性

    直接应用于元素的任何样式总会覆盖继承而来的样式,这是因为继承而来的样式特殊性为空

    规划组织和维护样式表:管理代码的方法

    最近的浏览器基准测试已经表明:导入样式表比链接样式表慢

    多个文件会导致从服务器发送更多的数据包,这些数据包的数量(而不是内容)会影响下载时间

    浏览器只能从同一个域同时下载数量有限的文件(老式浏览器2个,现代浏览器8个)

    CSS使用c风格的/* */注释,建议在每个注释头中添加一个标志@注释,便于搜索

    链接:  CSSDoc项目:CSS模块化注释

    CSS文档结构

    /* @group general styles一般性样式

    ---------------------------------------------------------------------*/

    1. 主体样式
    2. reset样式
    3. 链接
    4. 标题
    5. 其他元素

    /* @group helper styles辅助样式

    ---------------------------------------------------------------------*/

     

    1. 表单
    2. 通知和错误
    3. 一致的条目

    /* @group page structures 页面结构

    ---------------------------------------------------------------------*/

     

    1. 标题,页脚和导航
    2. 布局
    3. 其他页面结构元素

    /* @group page components页面组件

    ---------------------------------------------------------------------*/

     

    1. 各个页面

    /* @group overrides 覆盖

    ---------------------------------------------------------------------*/

    颜色参考值表

    开发前在样式表头部以注释方式添加颜色查询表,完成后删除

    /* Color Variables

    @colordef #434343;  dark gray;

    @………………………………………….

    */

    CSS优化

    删除注释,删除空白

    链接:

    服务器端压缩:Apache 的mod_gzip或者mod_deflate

    盒模型

    如果在元素上添加背景,那么背景会应用于由内容和内边距组成的区域,因此我们常常使用内边距在元素周围创建一个隔离带,使内容不会与背景混在一起,添加边框会在内边距的外边添加一条线,在边框外的是外边距,外边距是透明的,一般使用它控制元素之间的间隔。

    css2.1还包括outline属性,与border属性不同,轮廓绘制在元素框之上,所以它们不影响元素的大小和定位,因此outline有助于修复bug,因为它们不影响页面布局,大多数现代浏览器(包括IE8)支持轮廓。

    内边距,边框,外边距都是可选的,默认为0。但是许多元素将由用户代理样式表设置外边距和内边距。

    外边距可以为负值

    外边距叠加:当两个或者更多垂直外边距相遇时,它们将会形成一个外边距,这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。当一个元素包含在另一个元素中,假设没有内边距或者边框将它们分开,它们的顶和底外边距也会叠加。空元素如果只有外边距没有内边距和边框,它自身的顶外边距和底外边距也会发生叠加。

    外边距叠加实际上有重要的意义,它使有若干段落组成的文本页面各处的距离一致。

    只有普通文档刘中块框的垂直外边距才会发生叠加,行内框,浮动框或绝对定位框之间的外边距不会叠加。

    可视化格式模型

    display:改变生成的框的类型

  • block:块级元素,块框,从上到下一个接一个垂直排列,框之间的垂直距离由框的垂直外边距计算出来,=
  • inline:行内元素,行内框,在一行中水平排列,可以用水平内边距,边框和外边距调整水平间距,但是垂直内边距,边框,外边距不影响行内框的高度。在行内框上设置显示的高度或者宽度也没有影响。
  •                        由一行形成的水平框称为行框,行框的高度总是足以容纳它所包含的所有行内框,但是设置行高可以增加这个框的高度,因此修改行内框尺寸的唯一方法是修改行高或者水平边框内边距外边距。

  • none:不显示,生成的元素根本没有框,不占用文档空间
  • inline-block 顾名思义,这个声明让元素像行内元素一样水平排列,但是框的行为依然符合块级框的行为
  • 理解屏幕上看到的所有东西都会形成某种框

  • 匿名块框:将一些文本添加到一个块级元素(比如div)的开头时,这些文本会被当成块级元素对待
  • 匿名行框:块级元素内的文本行,假设一个包含三行文本的段落,每行文本形成一个匿名行框
  • 无法直接对匿名块或行框应用样式,除非使用不常用的: first-line伪元素

    CSS三种定位机制:

  • 普通流:元素框的位置由元素在HTML中的位置决定
  •                          相对定位:position:relative ;

    相对定位实际上被看做普通流定位模型的一部分,因为元素的位置是相对于它在普通流的初始位置偏移的,但无论是否移动,元素仍然占据原来的空间,因此移动元素会导致它覆盖其他框。

  • 浮动:
  • 浮动的框可以左右移动,直到它的外边缘碰到包含框或者另一个浮动框的边缘。因为浮动框不在普通文档流中,所以普通文档流中的块框表现的就像浮动框不存在一样

    实际上,浮动框并不是完全不影响不浮动的元素,如果浮动的元素后面有一个文档流中的元素,那么这个元素的框会表现得浮动根本不存在一样,但是,框的文本内容会受到浮动元素的影响,会移动以留出空间。用技术术语来说,浮动元素旁边的行框被缩短,从而给浮动元素留出空间,因此行框围绕浮动框(实际上浮动的设计目的就是为了实现文字环绕效果)。

    要想阻止行框围绕在浮动框的外边,就需要对包含这些行框的元素应用clear属性,clear属性的值可以使left,right,both,none,它表示框的哪些边不应该挨着浮动框。在清理元素时,浏览器在元素顶部添加足够的外边距,使元素的顶边缘垂直下降到浮动框的下面。

    浮动元素脱离了文档流不影响周围的元素,但是对元素进行清理实际上为前面的浮动元素留出了垂直空间。

  • 绝对定位:position:absolute ;
  • 绝对定位使元素位置与文档流无关,它不占据空间,普通文档流中的其它元素的布局就像绝对定位的元素不存在一时样。如果扩大绝对定位的框(例如通过增加字号)周围的框不会被重新定位,因此尺寸的任何改变都有可能导致绝对定位的框产生重叠,从而破坏精心调整过的布局

    绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素,如果不存在,那么相对于初始包含块。

    因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素,可以通过z-index属性来控制这些框的叠放次序,z-index值越高,框在栈中的位置就越高。

                         固定定位:position:fixed;

                固定定位使绝对定位的一种,差异在于固定元素的包含块是浏览器视窗(viewport),这使我们能创建出总是出现在窗口相同位置的浮动元素

    IE和盒模型

    IE的早期版本包括IE6,在混杂模式中使用自己的非标准盒模型,这些浏览器的width属性不是内容的宽度,而是内容,内边距和边框的宽度总和。所以IE专有的盒模型使元素比预期的要小。

    IE6不支持固定定位,IE7部分支持,有许多bug

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

    공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

    HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

    이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

    HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

    기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

    웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

    이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

    & lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

    이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

    & lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

    이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

    html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

    이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

    & lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

    이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

    See all articles