《HTML5与CSS3权威指南下册》读书笔记（1）_html5与css3权威指南第4版下载-CSDN博客

本文链接：https://blog.csdn.net/qq_25740691/article/details/105955985

文章目录

第19章选择器

CSS3中的属性选择器

[att=val]*：如果元素用att表示的属性的值中包含用val指定的字符，则该元素使用这个样式

[id*=divbox]{
color:red;
}
//[id=divbox_1] [id=divbox_2]都使用该样式

[att^=val]：如果元素用att表示的属性的属性值的开头字符用val指定的字符话，则该元素使用这个样式

[id^=divbox]{
color:red;
}
//[id=divbox_1] [id=divbox_2]都使用该样式

[att$=val]：如果元素用att表示的属性的属性值的开头字符用val指定的字符话，则该元素使用这个样式

[id$=divbox]{
color:red;
}
//[id=Adivbox] [id=Bdivbox]都使用该样式

根据超链接不同的文件扩展符使用不同样式

a[href$=\/]:after,a[href$=htm]:after,a[href$=html]:after{
    color:blue;
    content:"Web网页";
}
a[href$=jpg]:after{
   color:green;
    content:"JPEG图片"; 
}

结构性伪类选择器

a:link{color:#FF0000;text-decoration:none;}
a:visited{color:#00FF00;text-decoration:none;}
a:hover{color:#FF00FF;text-decoration:underline;}
a:active{color:#0000FF;text-decoration:underline;}

选择器:伪元素{属性:值}
选择器.类名:伪元素{属性:值}

first-line：用于向某个元素的第一行文字使用样式

p:first-line{
    color:blue;
}

first-letter：用于向某个元素的文字的首字母（欧美文字）或第一个字（中文日文等汉字）使用样式

p:first-letter{
    font-size:30px;
}

before:用于在某个元素之前插入一些内容

<元素>:before{
    content:"插入文字";
}
<元素>:before{
content:url("多媒体内容.wav");
}

after:用于在某个元素之后插入一些内容

<元素>:after{
    content:"插入文字";
}
<元素>:after{
    content:url("test.wav");
}

root:将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中的指包含着整个页面的<html>部分

:root{
    background:yellow;
}
body{
    background:green;
}

not:如果对某个结构元素使用样式，但想排除这个结构元素下面的子结构元素，让它不用这个样式时，可以使用not选择器。

body *:not(h1){
    background:yellow;
}

empty：指定当元素中内容为空白时使用的样式，如表格某单元格内容空白时使用该样式

:empty{
   background-color:yellow;
}

target:对页面中某个target元素(钙元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

<style type="text/css">
    :target{
        background-color:yellow;
    }
</style>
<p id="menu">
    <a href="#text1">text1</a>
     <a href="#text2">text2</a><!--点击a[href='#text2']-->
     <a href="#text3">text3</a>
</p>
<div id="text1">
    text1
    ……
</div>
<div id="text2"><!--点击a[href='#text2'],此模块背景颜色变为黄色-->
    text2
    ……
</div>
<div id="text3">
    text3
    ……
</div>

first-child,last-child：对第一个元素（最后一个元素）使用样式

<style type="text/css">
    li:first-child{
        color:red;
    }
    li:last-child{
        color:blue;
    }
</style>
<ul>
    <li>item1</li><!--red-->
    <li>item2</li>
    <li>item3</li>
    <li>item4</li><!--blue-->
</ul>

nth-child，nth-last-child：指定对第几个元素（倒数第几个）使用样式

<style type="text/css">
    li:nth-child(2){
        color:red;
    }
    li:nth-last-child(2){
        color:blue;
    }
</style>
<ul>
    <li>item1</li>
    <li>item2</li><!--red-->
    <li>item3</li><!--blue-->
    <li>item4</li>
</ul>

//奇数个子元素使用样式
<子元素>:nth-child(odd){
   
}
//倒数奇数个子元素使用样式
<子元素>:nth-last-child(odd){
   
}
//偶数个子元素使用样式
<子元素>:nth-child(even){
   
}
//倒数偶数个子元素使用样式
<子元素>:nth-last-child(even){
   
}

【注意】nth-child选择器在计算子元素是奇数或偶数个元素时，是连同父元素中的所有子元素一起计算的。换句话而言，h2:nth-child(odd)不是指父元素中第奇数个h2子元素使用样式，而是指父元素中的第奇数个子元素如果是h2子元素时使用。

nth-of-type，nth-last-of-type：对同类型子元素的第n个元素使用样式

li:nth-of-type(odd){
        color:red;
    }
    li:nth-last-of-type(even){
        color:blue;
    }

循环使用样式

//以4个li为一个单位，循环使用样式
li:nth-of-type(4n+1){
        color:red;
    }
li:nth-of-type(4n+2){
        color:orange;
    }
li:nth-of-type(4n+3){
        color:orange;
}
li:nth-of-type(4n+4){
        color:orange;
}

only-child：指定当某个父元素中只有一个子元素时才使用的样式

<子元素>:nth-child(1):nth-last-child(1){
    
}
<子元素>:only-child{
    
}

UI元素状态伪类选择器

各UI元素状态伪类选择器收浏览器的支持情况

选择器	Firefox	Safari	Opera	IE	Chrome
E:hover	v	v	v	v	v
E:active	v	v	v	x	v
E:focus	v	v	v	v	v
E:enabled	v	v	v	x	v
E:disabled	v	v	v	x	v
E:read-only	v	v	v	x	v
E:read-write	v	v	v	x	v
E:checked	v	v	v	x	v
E::selection	v	v	v	x	v
E:default	v	x	v	x	x
E:indeterminate	x	x	v	x	x
E:invalid	v	v	v	x	v
E:valid	v	v	v	x	v
E:required	v	v	v	x	v
E:optional	v	v	v	x	v
E:in-range	v	v	v	x	v
E:out-of-range	v	v	v	x	v

E:hover：指定当鼠标指针移动到元素上是元素所使用的样式

<元素>:hover{
    
}
button:hover{
    
}

E:active：指定该元素被激活（鼠标在元素上按下还没松开）时使用样式

E:focus：指定元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行输入时使用

E:enabled：指定当元素处于可用状态时的样式（表单元素）

E:disabled：指定当元素处于不可用状态时的样式（表单元素）

E:read-only：指定当元素处于只读状态时的样式，Firefox写成 -moz-read-only

E:read-write：指定当元素处于非只读状态时的样式，Firefox写成 -moz-read-write

E:checked：指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式

E:default：指定当页面打开时默认处于选取状态的单选框或复选框的样式，即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中的指定样式依然有效

E:indeterminate：指定当页面打开是，一组单选框中没有任何一个单选框被设定为选取是整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定。

E::selection：指定当元素文本处于选中状态时的样式

E:invalid：当元素内容不能通过HTML5使用元素的属性（required，pattern）所指的检查或元素内容不符合元素规定格式（input[type=“email”]）时的样式

E:vaild：当元素内容能通过HTML5使用元素的属性（required，pattern）所指的检查或元素内容不符合元素规定格式（input[type=“email”]）时的样式

E:required：指定允许使用required属性，已指定required属性的input、select、textarea的样式

E:optional：指定允许使用required属性，未指定required属性的input、select、textarea的样式

E:in-range：指定当元素的有效值被限定在一定范围内（通常通过min与max属性来限定），且实际输入在该范围内使用的样式，input[type=“number”]

E:out-of-range：指定当元素的有效值被限定在一定范围内（通常通过min与max属性来限定），且实际输入不在该范围内使用的样式，input[type=“number”]

通用兄弟元素选择器

<子元素>~<子元素之后的同级兄弟元素>{
    
}

第20章使用选择器在页面中插入内容

插入文字或图片

//插入文字
h2:before{
    content:"COLUMN";
    color:orange;
    background-color:yellow;
    padding:1px 5px;
    margin-right:10px;
}
h2.sample:before{
    content:none;
}
//插入图片
h2:after{
    content:url("arrow.png");
}
//将某属性值显示出来
img:after{
    content:attr(alt);
    display:block;
    text-align:center;
   margin-top:5px;
}

使用content属性来插入项目编号

<元素>:before{
content:counter(计数器名);
}

<元素>{
    counter-increment:before 选择器或after选择器中指定的计数器名
}
h1:before{
    content:'第'counter(mycounter)'章';
}
h1{
    counter-increment:mycounter;
}

指定编号的种类：upper-alpha指定大写字母编号 upper-roman指定大写罗马字母

content:counter(计数器名，编码种类);
li:before{
    content:counter(mycounter,upper-alpha)'.';
    color:blue;
    font-size:24px;
}
//编码种类 类似属性list-style-type
li{
    list-style-type:upper-alpha;
}

编号嵌套

h1:before{
    content:counter(mycounter)'.';
}
h1{
    counter-increment:mycounter;
    counter-reset:subcounter;
}
h2:before{
    content:counter(subcounter)'.';
}
h2{
    counter-increment:subcounter;
    margin-left:40px;
}

中编号中嵌入大编号

h2:before{
    content:counter(mycounter)'-'counter(subcounter)'.';
}

//多层嵌套编号
h1:before{
    content:counter(mycounter)'.';
}
h1{
    counter-increment:mycounter;
    counter-reset:subcounter;
}
h2:before{
    content:counter(mycounter)'-'counter(subcounter)'.';
}
h2{
    counter-increment:subcounter;
    counter-reset:subsubcounter;
    margin-left:40px;
}
h3:before{
    content:counter(mycounter)'-'counter(subcounter)'-'counter(subsubcounter)'.';
}
h3{
    counter-increment:subsubcounter;
    margin-left:80px;
}

在字符串两边添加嵌套文字符号：可使用content属性的open-quote与close-quote属性在字符串两台添加括号、单引号、双引号之类的嵌套文字符合。open-quote用于添加开始的嵌套文字符号，close-quote用于添加的结尾嵌套文字符号

h1:before{
    content:open-quote;
}
h1:after{
    content:close-quote;
}
h1{
    quotes:"(" ")";
    quotes:"\"" "\"";
}

第21章文字与字体相关样式

给文字添加阴影text-shadow

text-shadow:length length length color;
3个length

阴影离开文字的横向方向距离，纵向距离：可为负数值

阴影的模糊半径：可选参数，默认0

color阴影颜色：Firefox与Opera参数可省略默认color颜色，Safari与Chrome不支持参数省略，省略则不绘制阴影

div{
    text-shadow:5px 5px 5px gray;
    color:navy;
    font-size:50px;
    font-weight:bold;
}

//使用阴影突显文字
div{
 color:white;
 text-shadow:3px 3px 5px black;   
}

让文本自动换行word-break属性

值	换行规则	IE5以上版本	Safari 3与Chrome 6
normal	使用浏览器默认换行规则	v	v
keep-all	只能在半角空格或连字符处换行	v	x
break-all	允许在单词内换行	v	v

break-all：safari与Chrome中允许标点符号位于首行，IE中不允许标点符号位于首行。

让长单词与URL地址自动换行word-wrap属性

normal:保持默认处理，只在半角空格或连字符的地方换行

break-word:可在长单词或URL地址内部进行换行。

word-wrap：所有浏览器支持

使用服务器端字体——Web font与@font-face属性

在网页上显示服务器端字体

@font-face{
    font-family:WebFont;
    src:url('font/Fontin_Sans_R_45b.otf') format("opentype");
    //exljbris字体公司提供免费字体Fontin Sans
    //文件格式OpenTYpe对应扩展名.otf,文件格式TrueType对应扩展名.ttf
    font-weight:normal;
}

//IE
@font-face{
    font-family:BorderWeb;
    src:url(BORDERWEB.eot);
}

h1{
font-family:WebFont;
}

定义斜体或粗体字体

//斜体
@font-face{
    font-family:WebFont;
    font-style:italic;
   src:url('font/Fontin_Sans_I_45b.otf') format("opentype");
}
//粗体
@font-face{
    font-family:WebFont;
    font-weight:bold;
   src:url('font/Fontin_Sans_B_45b.otf') format("opentype");
}
//粗斜体
@font-face{
    font-family:WebFont;
     font-style:italic;
    font-weight:bold;
   src:url('font/Fontin_Sans_BI_45b.otf') format("opentype");
}

显示客户端本地的字体

@font-face{
    font-family:Arial;
    src:local('Arial');
}

@font-face{
    font-family:Arial;
    font-weight:bold;
    src:local('Arial Black');
}

若本地字体不存在，则使用服务器字体

@font-face{
    font-family:Arial;
    src:local('Arial'),url("MgOpenModernaRegualr.ttf");
}

属性指定

属性值	说明	取值范围
font-family	设置字体系统列的名称
font-style	设置字体的样式	normal不用斜体，italic斜体，oblique倾斜体，inherit从父元素继承
font-variant	设置字体的大小写	normal使用浏览器默认值，small-caps小型大写字母，inherit从父元素继承
font-weight	设置字体的粗细	normal使用浏览器默认值，bold粗体字符，bolder更粗字符，lighter更细字体，100~900从细到粗定义字符，100的整数倍，400等同于normal，700等同于bold
font-stretch	设置字体是否伸缩变形	normal默认值，把缩放比例设置为标准，wider把伸展比例设置为更进一步的伸展值，narrower把收缩比例设置为更进一步的收缩值
font-size	字体大小
src	字体文件的路径

font-stretch可取值：ultra-condensed（最宽），extra-condensed，condensed，semi-condensed，semi-expanded，expanded,extra-expanded，ultra-expanded（最窄）设置字体缩放比例

修改字体种类而保持字体尺寸不变——font-size-adjust

font-size-adjust:aspect值;
font-size-adjust:none;//按字体原大小显示
div{
    font-size:16px;
    font-family:Times New Roman;
    font-size-adjust:0.46;
}

aspect值用来将字体修改为其他字体时字体大小基本不变，x-height值除以该字体的尺寸，x-height值是指使用这个字体书写出来的小写x的高度（像素为单位）。

如果某个字体的尺寸为100px时，x-height值为58像素，则该字体的aspect值为0.58，因为字体的x-height值总是随着字体的尺寸一起改变，所以字体的aspect值都是一个常数。

浏览器对aspect值的计算方法

c=(a/b)s

a：实际使用的字体的aspect值

b：修改前字体的aspect值

s：指定的字体尺寸

c：浏览器实际显示的字体尺寸

将16px的Times New Roman字体的修改为Comic Sans MS字体，字体大小仍保持16px，Times New Roman的大小，则需执行以下步骤：

（1）查到Times New Roman字体的aspect值为0.46

（2）查到Comic Sans MS字体的aspect值为0.54

（3）将0.54除以0.46后得到近似1.17

（4）让那个浏览器实际显示的字体尺寸为16px，将16除以1.17，得出约14px，然后样式中指定字体尺寸为14px

也就是说：14px的Comic Sans MS字体相当于16px的Times New Roman字体

使用rem单位定义字体大小

rem字体尺寸单位将根据页面上的根元素（一般指html元素）的字体大小而计算出世家的字体大小。IE9及以上版本，其他浏览器都支持rem。大多数浏览器中的默认字体大小为16px；

em单位根据元素的父元素的字体大小而计算出实际的字体大小。

根据各种尺寸屏幕为元素指定各种尺寸的字体，采用rem统一单位屏幕适配。

html{
font-size:62.5%;//font-size:10px;
}
small{
    font-size:11px;font-size:1.1rem;
}
strong{
    font-size:18px;font-size:1.8rem;
}