• 读书笔记《CSS权威指南》


    阅读本书主要目的:

    自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解。 

    第1章 CSS和文档

    1.1 WEB的衰落(为了表现增加很多标记元素如font等,这些阻碍了页面的结构化)

    1.2 CSS作救星(95年W3C发布正在进行的CSS计划)

      CSS特点:丰富的样式;易于使用和维护;可以在多个页面重复使用;方便层叠;缩减文件大小;为将来做准备(为解决HTML结构化而生,实现结构和表现分离)

    1.3 元素(文档结构的基础,至少在CSS2.1中,每个元素生成一个框,也成为盒)

      替换元素:用来替换元素内容的部分并未由文档内容直接表示,如img、input等

      非替换元素:大多数都属于非替换元素,内容由用户在元素本身生成的框中显示,如段落、标题、单元格等

      元素显示角色(块级元素:生成一个元素框,它会填充其父元素的内容区;行内元素:在一个文本行内生成元素框,而不会打断这行文本)

      在HTML和XHTML中块级元素不能嵌套在行内元素中,但在CSS中对嵌套没有任何限制

    1.4 结合CSS和XHTML(外部、内联、导入、行内)

    <link rel="stylesheet" type="text/css" href="sheet.css" media="all" />
    <!--link标记(外部样式表),link必须放在head内,rel“关系”(relation),media样式应用的媒体类型(大部分类型不被支持)-->
    <style type="text/css">
    ...
    </style><!--style元素(内联样式表)-->
    @import url(sheet2.css);
    /*@import指令(导入样式表),此指令写在样式文件中或style元素内*/
    <p style="...">test</p><!--行内样式表,不推荐,因为不利于内容和表现的分离-->

    第2章 选择器

    2.1 基本规则

      CSS的核心特性是向文档中的一组元素类型应用某些规则;每个规则由选择器声明块组成

      

    2.2 分组

    h2,p{ color:green}/*选择器分组:为多个元素应用同一样式*/
    /*声明分组:为一个元素应用多个声明*/
    h3{color:orange;}
    h3{ font-size:18px;}

    2.3 类选择器和ID选择器

      多类选择器:通过将多个类选择器连接在一起,仅可选择同时包含这些类的元素(类名顺序不限)

    .warning.urgent{background:red;}/*注意中间不含空格:同时包含不限顺序,可以是class="urgent warning"*/

      ID选择器与类选择器类似,但它仅适用一次

    2.4 属性选择器

    img[alt]{border:solid 1px red;}  /*简单属性选择,选择有此属性的元素,不论属性是何值*/
    a[title="w3c"]{color:red;} /*根据具体属性值选择,选择属性值为指定值的元素*/
    p[class~="warning"]{color:red;} /*根据部分属性值选择,选择属性值含有指定值的元素*/
    *[foo^="bar"]{color:red;}/*选择foo属性以“bar”开头的所有元素*/
    *[foo$="bar"]{color:red;}/*选择foo属性以“bar”结尾的所有元素*/
    *[foo*="bar"]{color:red;}/*选择foo属性包含“bar”的所有元素*/
    *[lang|="en"]{color:red;}/*选择lang属性等于“en”或以“en-”开头的所有元素*/

    2.5 使用文档结构

    h1 em{color:red;} /*后代选择器*/
    h2>strong{color:red;} /*选择子元素,即只选择h2的子元素(而不是后代元素)strong元素*/
    h3+p{color:red;} /*选择相邻元素,即选择h3紧接的p元素,且两者有相同父元素*/

    2.6 伪类和伪元素

    a:link{color:blue;}   /*选择超链接(含有href属性)*/
    a:visited{color:purple;} /*已访问状态的超链接*/
    a:hover{color:red;}    /*鼠标悬停状态的超链接*/
    a:active{color:orange;}    /*鼠标激活(按下)状态的超链接*/
    input:focus{color:green;} /*获取焦点状态的输入框*/
    p:first-child{color:red;} /*选择第一个元素,即第一个p元素*/
    *:lang( ) /*等价于|=属性选择器*/
    a:link:hover{color:red;}/*结合伪类,即合并书写,注意不要把互斥的伪类结合使用*/
    p:first-letter{color:red;} /*首字母,只用于标记或段落*/
    p:first-line{color:red;} /*首行,只用于标记或段落*/
    h2:before{content:" ";}/*之前元素,伪元素特有属性content*/
    h2:after{content:" ";} /*之后元素,设置content才能使其置于文档结构中*/

    第3章 结构和层叠

    3.1 特殊性

    /*特殊性值表示为:0,0,0,0(即:行内,ID,类或属性或伪类,元素或伪元素)*/
    p+em{color:red;} /*0,0,0,2*/
    .warning em{color:red;} /*0,0,1,1*/
    ul#menu li.active{color:red;}  /*0,1,1,2*/
    *{color:black;}/*0,0,0,0,通配符特殊行为0*/
    div[id="nav"]{} /*0,0,1,1,ID属性选择区别于ID选择器*/
    p.drak{color:#333 !important;} /*重要声明,此规则总会优先*/

    3.2 继承(继承没有特殊性,连0都没有,所以通配符的0特殊性>继承的无特殊性)

    3.3 层叠(按权重和来源排序,按特殊性排序,按顺序排序(链接伪类顺序LVHA))

    第4章 值和单位

    4.1 数字

    4.2 百分数

    4.3 颜色(命名,RGB,十六进制)

    /*CSS中定义的17个颜色名*/
    aqua(浅绿)  fuchsia(紫红)  lime(绿黄)   olive(橄榄)   red     white
    black     gray       maroon(褐红) orange      silver   yellow
    blue     green       navy(深蓝)   purple(紫色)  teal(青色)

    4.4 长度单位

      绝对长度(web几乎不用):英寸(in)、厘米(cm)、毫米(mm)、点(pt)、派卡(pc)

      相对长度:em和ex,像素长度(px),相对根元素rem

    4.5 URL

    4.6 CSS2单位

      角度值:度(deg)、梯度(grad)和弧度(rad),直角可以声明为90deg=100grad=1.57rad

      时间值:毫秒(ms、秒(s),时间不能为负值

      频率值:赫兹(Hz)、兆赫(MHz)

    4.7 其他值

      关键字:none(空值)、inherit(继承)

    第5章 字体

    5.1 字体系列(font-family)

    5.2 字体加粗(font-weight)

    5.3 字体大小(font-size)

    5.4 风格和变形(font-style和font-variant)

    5.5 拉伸和调整字体(font-stretch和font-size-adjust)

    5.6 font属性

    5.7 字体匹配 

      CSS2可以通过@font-face对字体匹配更多控制,可以在文档中下载一个远程字体来使用

    @font-face {font-family: DeliciousRoman;src: url('Delicious-Roman.otf');}
    /*先引入,再使用*/
    p {font-family: DeliciousRoman, Helvetica, Arial, sans-serif;}

    第6章 文本属性

    6.1 缩进和水平对齐(text-indent和text-align)

    6.2 垂直对齐(line-height)

      垂直对齐文本(vertical-align)只应用于行内元素和替换元素,如图像和表单;上标和下标super和sub;

    6.3 字间隔和字母间隔(word-spacing和letter-spacing)

    6.4 文本转换(text-transform:大小写转换)

    6.5 文本装饰(text-decoration)

    6.6 文本阴影(text-shadow) 

    第7章 基本视觉格式化

    7.1 基本框

    7.2 块级元素(block)

    7.3 行内元素(inline)

    7.4 改变元素显示(display设置)

      行内块元素(inline-block)

    第8章 内边距、边框和外边距

    8.1 基本元素框

    8.2 外边距(margin)

    8.3 边框(border)

    8.4 内边距(padding)

    第9章 颜色和背景

    9.1 颜色

    9.2 前景色(color)

    9.3 背景(background或background-color、background-images)

    第10章 浮动和定位

    10.1 浮动(float:left|right|none|inherit)

      清除浮动(clear:left|right|both|none|inherit)

    10.2 定位(position:static|relative|absolute|fixed|inherit)

      偏移属性(top|right|bottom|left)

      内容溢出(overflow:visible|hidden|scroll|auto|inherit)

      内容剪裁(clip:ract(top,right,bottom,left)|auto|inherit)

      元素可见性(visibility:visible|hidden|collapse|inherit)

      Z轴上的放置(z-index)

    第11章 表布局

    11.1 表格式化

      表显示值display:inline-table、table-row(tr)、table-row-group(tbody)、table-header-group(thead)、table-footer-group(tfoot)、table-column(col)、table-column-group(colgroup)、table-cell(th或td)、table-caption

    11.2 表单元格边框

      表格边框模型(border-collapse:collapse(合并)|separate(分隔)|inherit)

      边框间隔(border-spacing:<length><length>?|inherit)

    11.3 表大小

      宽度:固定布局和自动布局

      高度和对齐

    第12章 列表与生成内容

    12.1 列表

      列表类型(list-style-type)、列表项图像(list-style-image)、列表项位置(list-style-position)

    12.2 生成内容

       使用before和after伪类生成,设置content值;计数器的应用

    第13章 用户和界面样式

    13.1 系统字体和颜色

    13.2 光标(cursor)

    13.3 轮廓(outline)

      

    第14章 非屏幕媒体

    14.1 设计特定于媒体的样式表

    14.2 分页媒体

    14.3 声音样式

  • 相关阅读:
    C# DictionaryHelper
    C# Autofac 的 BeanFactory
    正则替换
    java页面表格导出为Excel实现
    CentOS 7 下安装Nginx
    认识Java 虚拟机的架构
    06 查看网卡实时流量
    05 找出占用CPU、内存过高的进程
    04 一键查看服务器资源利用率
    03 批量创建100个用户并设置随机密码
  • 原文地址:https://www.cnblogs.com/gulei/p/6371335.html
Copyright © 2020-2023  润新知