html5+css3学习（上）

    <p>段落</p>
    <br />
    <strong>我是加粗的文字</strong>
    <em>我是倾斜的文字</em>
    <del>delete</del>
    <ins>下划线</ins>
    <!-- 
        div独占一行
        但是span一行可以放多个
    -->
    <div>分割分区</div>
    <span>放多个</span>


    <!-- 图像 -->


    <img src="img.jpg" />
    <!-- alt 替换文本 图像显示不出来的时候用文字替换 
    title 提示文本 鼠标放到图像上面，提示
    -->
    <img src="img.jpg" alt="图片显示不出来" title="鼠标放到图像上面，显示" />
    <!-- width 宽度
    height 高度 
    高低和宽度只修改一个
-->
    <img src="img.jpg" width="500" height="500" border="15" />



    <!-- 超链接a -->


    <a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
    <!-- target="_blank" 可以点击链接打开另外一个窗口 -->
    <a href="http://www.qq.com">外部连接</a>
    <a href="内部链接.html">内部链接</a>
    <!-- 空链接 -->
    <a href="#">#空连接</a>
    <!-- 下载链接 -->
    <a href="img.zip">下载文件，把href地址设置为文件或者压缩包</a>
    <!-- 可以给图片添加链接 -->
    <!-- 锚点链接 设置属性值为#id -->
    <a href="#two">锚点链接</a><br />
    <h3 id="two">锚点</h3>



    <!-- 特殊字符 -->
    善&nbsp;恶&lt;小于号&gt;大于号

    <!-- 表格标签 -->


    <!-- 属性要写到table里面  cellpadding 内容和边框的距离 cellspacing 单元格和单元格之间的距离 -->
    <table align="center" border="1" cellpadding="2" cellspacing="1" width="500">
        <!-- 
            <tr> 行
            <td> 单元格
            <th> tablehead 表头 居中加粗
        -->
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>刘德华 </td>
            <td>男</td>
            <td>56</td>
        </tr>

    </table>

    <!-- 把表格分割成表格头部和表格主体
     <thead>表格头部区域
     <tbody>表格主题区域
    -->
    <table>
        <thead>必须要有tr</thead>
        <tbody></tbody>
    </table>

    <!-- 合并单元格
    rowspan="合并跨行的单元格个数" 把代码写在最上
    colspan="合并跨列的单员格个数" 把代码写在最左
    -->



    <!-- 列表 -->



    <!-- 无序列表 -->
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <!-- 有序列表 orderedlist-->
    <ol>
        <li>
            ssss
        </li>
        <li>
            ffff
        </li>
        <li>
            gggg
        </li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        <dt>
           带头 
        </dt>
        <dd>
            弟弟
        </dd>
    </dl>




    <!-- 表单 -->



    <!-- input  -->
    <!-- form action="" method="post get" name="id" -->
    <form>
        <!-- maxlength 最多 -->
        文本:<input type="text" name="id" value="默认值"> 密码:
        <input type="password">
        <!-- 单选框只能相同的name才能实现单选 
            单选和复选可以设置默认选中checked
    -->
        单选:<input type="radio" name="sex" value="男">单选按钮<input type="radio" name="sex" value="女">要相同name 多选框:
        <input type="checkbox" checked="true">多选框


        <input type="submit" value="提交按钮">
        <input type="reset" value="重新填写">
        <input type="button" value="普通button">
        <input type="file">

        <!-- label标签可以放大选中范围 -->

        <label for="text">
            用户名:
        </label>

        <input type="text" id="text">

    </form>


    <!-- select 下拉列表 -->
    <form>
        <select>
            <option>山东</option>
            <option>山东</option>
            <option>山东</option>
            <option>山东</option>
            <option selected="true">山东</option>
    
        </select>
    </form>




    <!-- textarea 文本域 -->

    <form>
        <textarea>

        </textarea>
    </form>

1.1.HTML5新增

<!-- html5 -->


    <!-- 语义化标签 -->

    <header>头部标签</header>
    <nav>导航标签</nav>
    <article>内容标签</article>
    <section>定义文档某个区域</section>
    <aside>侧边栏标签</aside>
    <footer>尾部标签</footer>

    <!-- 视频标签 -->
    <!-- 谷歌浏览器只要添加muted静音播放就可以自动播放了 controls 视频控件 loop 不断循环  -->
    <video src="" controls="controls" autoplay="autoplay"></video>

    <!-- 音频标签 -->
    <audio src="" autoplay controls loop></audio>

    <!-- 新增 input -->
    <form action="">
        <input type="email">
        <input type="url">
        <input type="number">
        <input type="search">
        <input type="color">
        <input type="date">
        <input type="tel">
        <input type="submit" value="">
    </form>
    <!-- 新增表单属性 -->
    <!-- required 必须书写 -->
    <!-- placeholder 
        autofocus 自动聚集光标 
        multiple 可以多选文件提交-->
    <form>
        <input type="text" required="required">
        <input type="submit" value="提交">
    </form>



    <!-- css3 -->



    <!-- 属性选择器 

     1.   用[]选择有value属性的一个input
    input[value]{
        color:pink;
        }
    
    <input type="text" value="sjjs">
    <input type="text">

   * 2. 属性选择器还可以选择属性=值的某些元素
    input[value=text]{
        color:pink;
        }
    
    <input type="text" value="sjjs">
    <input type="password">

    3.属性选择器可以选择属性值开头的某些元素
    4.属性选择器可以选择属性值结尾的某些元素
    -->

    <!-- 结构伪类选择器
    
    E:first-child 父元素中的第一个元素
    E:last-child 父元素中的最后一个元素
    E:nth-child(n) 父元素的第n个元素 n也可以是 关键字 公式
    关键字 even 偶数   odd 奇数

    E:first-of-type 指定类型E的第一个元素
    E:last-of-type 指定类型E的最后一个元素
    E:nth-of-type(n) 指定类型E的第n个
    -->


    <!-- 伪元素选择器
    
    element::before{样式}
    element::after{样式}

    必须有content:"";
 -->

    <!-- css3盒子模型border-box
    宽度不会撑开
    box-sizing:border-box;
-->

    <!-- css3 
     blur是一个函数数值越大越模糊 要加px   滤镜filter: blur() -->

    <!-- calc() 计算函数 运算符两边必须有空格  -->

2.CSS元素

2.1.置换元素和非置换元素

置换元素指用来置换元素内容的部分不由文档内容直接显示，如img，input

非置换元素的元素内容在元素自身生成的框中显示，如span，div

2.2.元素的显示方式（块级元素和行内元素）

块级元素

默认生成一个填满父级元素内容区域的框，旁边不能有其他元素，要换行，如p、div

行内元素

在一行文本内生成元素框，不打断所在的行。HTML中最常见的行内元素是a，不在自身所在元素框的前后“断行”

2.3.display属性

html中行内元素可以放在块级元素里面，但是反过来，

块级元素不能放在行内元素中。

css就没有这样的限制

p{display:inline;}/*转为行内元素*/
em{display:block;}/*转为块级元素*/

2.4.style元素和@import指令

是一种引入样式表的方式，直接写在文档中

<style type="text/css">...</style>

web浏览器遇到@import指令时会加载外部样式表，@import指令在style元素内部，并且要放在其他css规则前面，不然不会起作用

@support的用法

CSS中@support的用法_liaobangxiang的博客-CSDN博客

3.选择符

3.1.元素选择符

h1,h2{
    color:silver;
    background:white;
}
b{
    color:gray;
    background:white;
}

3.2.类选择符

<p class="warning">111</p>
<span class="warning">222</span>

<style>
.warning{font-weight: bold;}
</style>

在class属性前面加上点号.

class属性的值可以时多个词，可以添加多个类选择符

3.3.ID选择符

ID选择符的权重会更高一些，一个ID只能使用一次，浏览器不一定会检查html中的id是否为唯一，相同的样式可能会应用到每个元素上。

<h1 id="important">id</h1>
<style>
#important{
color:red;
background:yellow;
}
</style>

3.4.属性选择器

如果想选择具有某个属性的元素，而不管属性的值是什么，可以使用简单属性选择符

<h1 class="hoop">hello</h1>
<h1>ooo</h1>

<style>
    h1[class]{
    color:black;
}
</style>

3.5.根据精准的属性值选择

<a href="http://www.baidu.com">www</a>

<style>
a[href="http://www.baidu.com"]{
 color:black;
}
</style>

2021.11.20

3.6.根据部分属性值选择

形式	说明
[foo \|="bar"]	选择的元素有foo属性，且其值以bar和一个英文破折号开头，或者就是bar本身
[foo ~="bar"]	选择的元素有foo属性，且其值是包含bar这个词的一组词
*[foo="bar"]**	选择的元素有foo属性，且其值包含bar子串
[foo^="bar"]	选择的元素有foo属性，且其值以bar开头
[foo$="bar"]	选择的元素有foo属性，且其值以bar结尾

<body>
    <h1 class="en">e</h1>
    <h1 class="en-us">e</h1>
    <h1 class="en-uu">e</h1>
    <h1 class="ff">e</h1>
    <h1 class="cy-en">e</h1>
</body>
<style>
    h1[class|="en"] {
        color: red;
    }
</style>

class值为en或者以en-开头的元素就会匹配到

3.6.1.匹配以空格分隔的一组词中的一个

<body>
    <p class="en">e</p>
    <p class="en us">e</p>
    <p class="aa us">e</p>
</body>
<style>
    [class~="en"] {
        color: red;
    }
</style>

值如果可以以空格分隔的属性的话，如html中的class属性，就可以使用~=来选择

3.6.2.匹配属性值的子串

<span class="cloudy barren">ok1</span>
<span class="sssss barren">ok2</span>
<span class="aaaaa barren">ok3</span>

<style>
    span[class*="cloud"]{
    font-style:italic;
}
</style>

只会匹配到class中包含cloud子串的ok1

3.6.3.匹配属性值开头的子串

a[href^="https"]{
    font-weight:bold;
}

匹配到href属性中以https开头的a元素

3.6.4.匹配属性值结尾的子串

img[src$=".gif"]{color:red;}
img[src$=".jpg"]{color:black;}

匹配到src属性中以.gif和.jpg结尾的img元素

3.6.5.不区分大小写的标识符

a[href$=".PDF" i]

在结束方括号前加上i，匹配属性值时不区分大小写

3.7.后代选择符

假设你只想装饰h1元素中的em元素

h1 em{color:gray;}

用空格分隔开

3.7.1.选择子元素

有时候不想要选择所有的后代元素

h1 > strong{color:red;}

把第一个h1中的strong元素显示为红色，第二个不受影响

3.7.2.选择紧邻同胞元素兄弟元素

h1 + p{margin-top:0;}

想选择同一个元素紧跟在另一个元素后面的一个元素

3.7.3.选择后续同胞

<body>
    <div>
        <h2>heading</h2>
        <p>11111111</p>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol>
        <p>11111111</p>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
</body>

<style>
    h2~ol {
        color: red;
    }
</style>

想让h2后面与它同属一个父元素的ol元素颜色置为红，两个元素不一定是紧邻同胞

3.8.伪类选择符

使用这种选择符可以为文档中不一定真实存在的结构指定样式，或者为某些元素的特定状态赋予幽灵类。

3.8.1.拼接伪类

css允许把伪类拼接在一起

a:link:hover{color:red;}
a:visited:hover{color:red;}

3.8.2.结构伪类

选择根元素

:root{border:10px dotted gray;}

选择空元素

选择:empty伪类可以选择没有任何自带的元素，甚至连文本节点都没有

p:empty{display:none;}

能禁止显示空段落

3.8.3.选择唯一的子代

img:only-child{border:1px solid black;}

3.8.4.选择第一个和最后一个子代

p:first-child{font-weight:bold;}

li:last-child{color:red;}

第一个规则是把一个元素中的第一个p元素显示为粗体，并不是p的第一个元素

3.8.5选择第一个和最后一个某种元素

除了选择一个元素中的第一个和最后一个子代外，还可以选择一个元素中某种元素的第一个和最后一个

p:first-of-type{border-left:10px;}
a:last-of-type{color:red;}

3.8.6.first-child和first-of-type的区别

<div>
<p>1111</p>
<h1>2222</h1>
<span>3333</span>
</div>

p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素；

h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；

span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；

p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；

h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；

span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了

3.8.7.选择每第n个子元素

选择第2个p元素

p:nth-child(2){color:red;}

选择偶数位的子代

:nth-child(2n)

:nth-child(even)

选择奇数位的子代

:nth-child(2n-1)
:nth-child(2n+1)

:nth-child(odd)

比间隔元素更复杂的情况可以使用代数式an+b

3.9.动态伪类

除了结构伪类之外，还有一些与结构有关的伪类，不过他们在页面渲染之后根据页面的变化而变化

3.9.1.超链接伪类

伪类	说明
:link	指代用作超链接的锚点（即有href属性），而且只想尚未访问的地址
:visited	指代指向已访问地址的超链接

a:link{color:red;}
a:visited{color:blue;}

3.9.2.用户操作伪类

伪类	说明
:focus	指代当前获得输入焦点的元素，即可以接受键盘输入或以某种方式激活
:hover	指代鼠标指针放置其上的元素，例如鼠标指针悬停在超链接上
:active	指代由用户输入激活的元素，例如用户单击超链接时按下鼠标按键的那段时间

a:focus{color:red;}
a:hover{color:blue;}
a:active{color:blue;}

3.10.UI状态伪类

伪类	说明
:enabled	指代启用的用户界面元素（例如表单元素），即接受输入的元素
:disabled	指代禁用的用户界面元素（例如表单元素），即不接受输入的元素
:checked	指代由用户或文档默认选中的单选框或复选框
:indeterminate	指代既未选中也没有未选中的单选按钮或复选框，这个状态只能由DOM脚本设定，不能由用户设定
:default	指代默认选中的单选按钮、复选框或选项
:valid	指代满足所有数据有效性语义的输入框
:invalid	指代不满足所有数据有效性语义的输入框
:in-range	指代输入的指在最小值和最大值之间的输入框
:out-of-range	指代输入的指小于控件允许的最小值或大于控件允许的最大值的输入框
:required	指代必须输入值的输入框
:optional	指代无需一定输入值的输入框
:read-write	指代可由用户编辑的输入框
:read-only	指代不能由用户编辑的输入框

3.10.1.有效性伪类

<input type="email">


<style>

    input[type="email"]:focus{...}
    input[type="email"]:focus:invalid{...}
    input[type="email"]:focus:valid{...}

</style>

3.10.2.范围伪类

<input id="nickels" type="number" min="0" max="1000">

<style>
    input[type="number"]:focus{...}
    input[type="number"]:focus:out-of-range{...}
    input[type="number"]:focus:in-range{...}
</style>

在元素中要设置min和max值

3.11.否定伪类

前面的选择符都是肯定选择符，如果想要反过来，选择不满足条件的元素，可以使用:not()

.moreinfo:not(li){font-style:italic;}

选择的元素，其class属性包含moreinfo这个词，但是却不是li元素

3.12.伪元素选择符

伪元素和伪类很像，伪类用一个冒号，伪元素用一对冒号，一个选择符中只能有一个伪元素

3.12.1.装饰首字母

::first-letter伪元素用于装饰任何非行内元素（块级元素）的首字母，或者开头的标点符号和首字母

p::first-letter{color:red}

把每一段的首字母都设置为红色

3.12.2.装饰首行

p::first-line{
    font-size:150%;
    color:purple;
}

用于装饰元素的首行文本

3.12.3.装饰（或创建）前置和后置内容元素

h2::before{content:"[[";color:silver;}
h2::after{content:"]]";}

可以在元素前面或者后面插入内容，content必须要有。

在后面的列表和生成的内容章节会详细讲到

4.特指度和层叠

同一个元素可能会被两个或者多个规则选择，而且每个规则的选择符不尽相同，每对规则中只有一个能胜出，因为匹配的元素只能显示为一种颜色，所以选择符的特指度就很重要了。

选择符的特指度由选择符本身的组成部分决定。一个特指度值由四个部分构成，例如

0，0，0，0。选择符的特指度通过下属规则确定:

1.选择符中的每个ID属性值加0，1，0，0。

2.选择符中的每个类属性值、属性选择或者伪类加0，0，1，0。

3.选择符中的每个元素和伪元素加0，0，0，1。

4.连结符和通用选择符不增加特指度。

4.1.1.行内样式的特指度

行内样式的声明的特指度比其他声明都高，1，0，0，0。

4.1.2.重要性

有时候某个声明可能非常重要，超过了其他所有声明，这种声明要在声明末尾的分号之前插入一个

!important

p.dark{color:#333 !important;background:white;}

4.2.继承

继承指某些样式不仅应用到所指的元素上，还应用到元素的后代上

h1{color:gray;}
<h1>mmmm<em>cccc</em></h1>

h1中的常规文本和em中的文本都将显示为灰色。

继承对ol li也适用

继承的值没有特指度

通用选择符的特指度为0，0，0，0

零特指度战胜无特指度

4.3.层叠

如果两个特指度相等的规则应用到同一个元素会发生什么？css采用层叠机制把样式组合在一起，即结合继承和特指度的一些规则。规则如下：

1.找到匹配特定元素的所有规则

2.按显式权重排序应用到特定元素上的所有声明。以!important标记的规则比没有这一标记的权重高

3.按来源排序应用到特定元素上的所有声明，创作人员、读者、和用户代理

4.按特指度排序应用到特定元素上的所有声明。特指度高的声明具有较高的权重

5.按声明的前后位置排序应用到特定元素上的所有声明。样式表或者文档中靠后的声明权重比较高。导入的样式表中的声明放在当前样式表中所有声明的前面。

CSS中的三种样式来源：创作人员、读者和用户代理_letterTiger的博客-CSDN博客

4.3.1.按权重和来源排序

如果两个规则应用到同一个元素上，而其中一个以！important标记，那么有此标记的规则胜出

<p style="color:black !important;">well</p>
<style>
p{color:gray !important;}
</style>

如果！important在行内样式中，那么行内样式将胜出

4.3.2.按前后位置排序

如果两个规则的显示权重、来源和特指度都相同，那么在样式表中的位置靠后的规则胜出，其他引进的样式表会放在最前面，也就是说引进的样式表的权重最低。

5.值和单位

5.1.关键字、字符串和其他文本值

5.1.1.关键字

值用一个词表示，叫关键字。两个属性使用相同的关键字，在不同的属性中相同的关键字可能具有不一样的行为。

全局关键字

css3定义了几个全局关键字，规范中的每个属性都可以使用：inherit、initial和unset

inherit关键字把元素某个属性的值设置与父元素同一属性的值一样。这个关键字强制继承

initial把属性的值设置为预定义的初始值，相当于“重设值”

字符串、URL、图像、标识符

5.2.数字和百分数

整数<integer>、数字<number>、百分数<percentage>

5.3.距离

长度单位两种：绝对长度单位和相对长度单位

5.3.1.绝对长度单位

英寸 in 厘米 cm 毫米 mm 四分之一毫米 q 点 pt 派卡 pc

像素 px 像素是屏幕的小点，1英寸中放下96像素

5.3.2.相对长度单位

em 1em等于元素的font-size属性值。如果元素的font-size为14像素，那么对于那个元素来说，1em就等于14像素

ex 指所用字体中小写字母x的高度

rem 与em单位类似，rem也是基于声明的字号，em相对于当前元素的字号计算，而rem始终相对根元素计算，根元素是html

rem的实际作用就是重设字号

html{font-size:13px;}

ch 这个单位基本上可以理解为一个字符，等于渲染时所用字体中“0”字形的进距。

视区相关的单位

视区宽度单位 vw

这个单位根据视区的宽度计算，然后除以100

视区高度单位 vh

这个单位根据视区的高度计算，然后除以100

视区尺寸最小值单位 vmin

这个单位等于视区宽度或者高度的1/100，始终取宽度和高度中较小的那个

视区尺寸最大值单位 vmax

这个单位等于视区宽度或者高度的1/100，始终取宽度和高度中较小的那个

5.4.计算值calc()

为了方便做数学计算，css提供了calc()值，括号中可以使用简单的数学算式，不允许做指数运算

基本的限制是，calc()会检查括号中各个值得类型，确保是兼容的

1.+ 和 -号两侧的值必须是使用相同的单位类型，或者是<number>和<integer>，5em+20px是有效的。

2.* 计算的两个值中必须有一个是<number>

3. / 计算的两个值中右边的那个必须是<number>，30em / 2.75是有效的，但是30/2.75em

是无效的

4.不能除以零

+和-运算符两侧必须有空白，*和/没有这样的限制，有助于避免混淆负数

2021.11.21

5.5.颜色

5.5.1.具名颜色

css早期有16个基本颜色关键字

aqua gray Navy silver

black green Olive teal

blue lime Purple white

fuchsia maroon Red yellow

h1{color:silver;}

5.5.2.RGB和RGBa颜色

计算机中的颜色按照不同比例的红绿蓝混合而成

函数式RGB颜色

百分数的取值范围是0~100%

整数的取值范围是0~255

rgb(100%,100%,100%)

rgb(255,255,255)

RGBa颜色

在RGB的三个通道后面增加了一个alpha值，衡量不透明度

rgba(255,255,255,0.5)

十六进制RGB值

css支持使用html编写人员习惯的十六进制表示法定义颜色

h1{color:#FF0000;}
h1{color:#F00;}

浏览器可以把每个数字复制成两个。因此#F00就会被复制成#FF0000

十六进制RGBa颜色

在后面再添加一个十六进制值，表示alpha通道的值

p.one{color:#000000FF;}

5.5.3.颜色关键字

在任何允许使用颜色值得地方使用：transparent和currentColor

transparent表示完全透明的颜色，currentColor的意思是当前元素color属性计算得到的值

5.6.角度

deg

度数，完整的圆周是360度

grad

百分度，完整的圆周是400百分度

rad

弧度，完整的圆周是2π

turn

圈数，一个完整的圆周是一圈

度数	百分度	弧度	圈数
0deg	0grad	0rad	0turn
45deg	50grad	0.785rad	0.125turn
90deg	100grad	1.571rad	0.25turn
180deg	200grad	3.142rad	0.5turn
270deg	300grad	4.712rad	0.75turn
360deg	400grad	6.283rad	1turn

5.7.时间和频率

属性的值为一段时间，使用<time>表示，他是一个<number>值后跟s秒或ms毫秒，用于定义持续时间或延迟时间

s=1000ms

视听CSS中还有一种值<frequency>，他是一个<number>值后跟hz(赫兹)或者khz(千赫兹)，这个单位的标识符不区分大小写

6.字体

css2开始支持使用@font-face下载指定的自定义字体

6.1.font-family使用通用字体族

字体族使用font-family属性声明

h1{font-family:sans-serif;}

6.1.1.指定字体族

想让所有的p使用Times，如果没有安装的话就跳到下一个字体

p{font-family:Times,'Times New Roman','New Century Schoolbook';}

用户代理会按照所列的顺序查找字体，如果找不到列出的字体，用户代理将选择一款可用的字体

在font-family声明中，如果字体名称中有一个或多个空格，或者字体名称中有符号，建议使用引号

6.2.使用@font-face

@font-face的作用是让你在设计中使用自定义的字体

@font-face{
 font-family:"SwizraADF";
 src:url("SwitzeraADF-Regular.otf");
}

用户代理见到font-family:SwizeraADF声明后，会加载对应的.otf文件，然后使用它渲染文本

@font-face用法超详细讲解_RoddyLD的博客-CSDN博客_font-face用法

6.2.1.@font-face必须的描述符

定义字体的全部参数都在@font-face{}结构中编写，描述符中有两个是必须的：font-family和src

src描述符中以逗号分割的列表用于提供后备字体文件，一旦用户代理无法从第一个源下载，就会尝试从下一个源中下载字体文件

@font-face{
    font-family:"SwitzeraADF";
    src:url("SwitzeraADF-Regular.otf"),
        url("/fonts/SwitzeraADF-Regular.otf")format("opentype");
}

如果想告诉用户代理所用的字体是什么格式，可以使用可选的format(),这样的好处是，让用户代理跳过不支持的字体格式，从而减少带宽用量，提升加载速度。

值	格式
embedded-opentype	EOT(Embedded OpenType)
opentype	OTF(OpenType)
svg	SVG(Scalable Vector Graphics)
truetype	TTF(TrueType)
woff	WOFF(Web Open Font Format)

还可以用local()指定已经安装在用户设备中的字体族名称

@font-face{
    font-family:"SwitzeraADF";
    src:local("SwitzeraADF-Regular"),
        local("Switzera-Regular"),
        url("SwitzeraADF-Regular.otf"),
        url("/fonts/SwitzeraADF-Regular.otf")format("opentype");
}

用户代理先检查设备中是否有名为“SwitzeraADF-Regular"或"Switzera-Regular"的字体族，如果有，使用SwitzeraADF这个名称指代本地安装的字体，如果没有，尝试从远端下载url指定的字体文件

6.2.2.@font-face其他字体描述符

描述符	默认值	说明
font-style	normal	区分常规、斜体和倾斜字型
font-weight	normal	区分不同的字重
font-stretch	normal	区分不同的字符宽度
font-variant	normal	区分众多字体变体（例如小号大写字母）
font-feature-settings	normal	直接访问OpenType的底层特性
unicode-range	U+0-10FFFF	定义指定字体中可用的字符范围

这些都是可选的描述符，但是一般normal是默认值，不用写，只有在需要改默认值的时候才需要用到。

@font-face{
    font-family:"SwitzeraADF";
    font-weight:bold;
    font-style:italic;
    font-stretch:normal;
    src:url("/fonts/SwitzeraADF-Regular.otf")format("opentype");
}

6.3.font-weight字重

font-weight属性可以精确控制字重

取值

100 200 300 400 500 600 700 800 900 normal bold bolder lighter

6.3.1.字重的工作方式

这些数字并不是表示字重本身，只要后面的数字关键字对应的粗细不比前面的数字关键字细就行。

因此100-400可能对应同样细的变体，500和600对应于同样粗的变体，700-900对应于同样较粗的变体。

400对应normal 700对应bold

6.3.2.增大字重

如果把一个元素的字重设为bolder，用户代理首先要确定从父元素继承的font-weight值是什么，然后选择比继承的字重高一级的最小数字。找不到更高字重，就加数字，最高900

6.3.3.减小字重

lighter的工作方式和bolder相似，只不过是让用户代理向下减小字重

6.4.font-size字号

font-size的取值

xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage>

初始值medium

6.4.1.绝对大小

xx-small x-small small medium large x-large xx-large这几个关键字没有固定的大小，比较少用。

6.4.2.相对大小

关键字larger smaller，它们根据父元素的字号增大或减小一定比例，这里使用的换算系数与计算绝对大小时一样。

6.4.3.百分数和em

百分数始终根据继承自父元素的字号计算，百分数能更加细致地控制字号

css还把长度单位em定义为等效于百分数，1em与100%的效果相同

p.one{font-size:1.6em;}
p.two{font-size:166%;}

6.4.4.字号的继承

css中的字号虽然会继承，但是继承的是计算得到的值，并不是百分数

6.4.5.使用长度单位

font-size可以设为任何长度值，下面的声明表示一样长的长度

p.one{font-size:36pt;}
p.two{font-size:3pc;}
p.three{font-size:0.5in;}
p.four{font-size:1.27cm;}

6.4.6.自动调整字号

有两个因素影响字体是否清晰易辨：字号和x高度，x高度除以字号得到的结果叫高宽比值，高宽比值越高，字体越清晰

font-size-adjust属性用于改变字体族之间的高宽比值

font-size-adjust

取值 <number> | none | auto

默认值 none

6.5.font-style字形

font-style

取值 italic | normal | oblique

font-style默认的值为normal，italic和oblique之间的区别

p{font-style:oblique;}
h1{font-style:italic;}

6.6.font-stretch字体拉伸

有些字体族的变体可能具有较宽或较窄的字母形式，这种变体的存在的目的是在统一个字体族中提供瘦体和胖体，css提供了一个属性，用于选择这样的变体

font-stretch

常用取值 normal | condensed | expanded

6.7.font-kerning字距调整

有些字体定义了字符之间的相对位置数据，不同字符组合，字距是不一样的，字距可以使用font-kerning属性呼出或者禁止

font-kerning

取值 auto | normal | none

none的意思是让用户代理忽略字体中的字距信息

6.8.font-variant字体变形

6.9.font-feature-settings字体特性

6.10.font-synthesis字体合成

7.文本属性

文本是内容，字体是用于显示内容的，借助文本属性，可以影响文本相对一行中其他内容的位置。

7.1.缩进和行内对齐

块级方向指当前书写模式块级元素的方向。比如，在英语中，块级方向从上到下，或者说是纵向的

行内方向指块级元素中行内元素的书写方向。英语中，行内方向从左到右。

7.1.1.text-indent缩进文本

text-indent

取值 <length> | <percentage>

适用于块级元素

text-indent属性把元素的第一行文本缩进指定的长度，缩进的长度可以是负值

p{text-indent:3em;}

把段落的第一行缩进3em

7.1.2.text-align文本对齐

它控制元素中各文本行的对齐方式

text-align

取值 start | end | left | right | center | justify | match-parent | start end

初始值 css3中是start

适用于块级元素

left、right、center三个值是用途最广的。

<body>
    <div>
        <h1>align-left</h1>
        <h2>align-center</h2>
        <h3>align-right</h3>
    </div>
</body>
<style>
    h1 {
        text-align: left;
    }
    
    h2 {
        text-align: center;
    }
    
    h3 {
        text-align: right;
    }
</style>

起边和终边对齐（start end）

css3的默认值是start，意思是文本与元素所在行框的起边对齐。在从左到右书写的语言中，起边是左边，在从右到左书写的语言中，起边是右边。

start起边

end终边

两端对齐（justify）

一行的两端与父元素的边界对齐，单词和字母之间的空白会做调整，保证每一行的长度完全一致。

印刷品（书）经常使用两端对齐

7.1.3.对齐最后一行

如果想要指定最后一行的对齐方式的话，使用text-align-last

text-align-last

取值 auto | start | end | left | right | center | justify

初始值 auto

适用于块级元素

text-align-last有个有趣的现象，如果元素的第一行也是最后一行的话，text-align-last的优先级是比text-indent高的

2021.11.22

7.2.块级对齐

纵向对齐，沿着块级方向的对齐方式。

7.2.1.line-height行的高度

行之间的距离受行的高度影响

line-height属性指行的基线之间的距离，line-height控制的是行距，是除字体高度之外在文本行上方的额外空间。line-height的值与字体高度之差就是行距

line-height

取值 <number> | <length> | <percentage> | normal

初始值 normal

适用于所有元素

元素的行距 line-height减去font-size

垂直居中 line-height等于font-size

7.2.2.vertical-align纵向对齐文本

如果使用过sup和sub上标和下标元素，就了解了基本的纵向对齐方式。

vertical-align

取值 baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage>

初始值 baseline

适用于行内元素和单元格

继承性否

备注用在单元格上时，只能取baseline、top、bottom、和middle

基线对齐

vertical-align：baseline强制元素的基线与父元素的基线对齐，如果目标元素没有基线，例如图像、表单输入框或其他置换元素，元素底端与父元素的基线对齐

上标和下标

vertical-align:sub把元素放在下标处，即元素的基线

super的作用和sub相反，让元素的基线高于父元素的基线

sub和super不改变元素的字号，因此上标和下标的文本不会变小

<p>
ppppppp
<span class="super">super</span>            
<span class="sub">subsubsub</span>
pppppp
</p>
<style>
    .super {
        vertical-align: super;
    }
    
    .sub {
        vertical-align: sub;
    }
</style>

底端对齐

vertical-align:bottom把元素所在的行内框的底边与行框的底边对齐

vertical-align:text-bottom相对行中文本的底边对齐

顶端对齐

vertical-align:top和bottom相反

中线对齐

middle这个值通常是用在图像上

百分数

把vertical-align的值设为百分数，效果是把元素的基线相对父元素的基线抬升或者下沉指定的量

sub{vertical-align:-100%;}
sup{vertical-align:100%;}

长度值

把元素抬升或者下沉声明的距离

sup{vertical-align:5px;}

7.3.单词间距和字符间距

7.3.1.word-spacing单词间距

word-spacing属性的值为长度，指定的长度值追加到单词的标准间距上，用于修改单词之间的距离

word-spacing

取值 <length> | normal

初始值 normal

适用于所有元素

<body>
    <div>
        <p class="spread">the space between words</p>
        <p class="tight">the space between words</p>
    </div>
</body>
<style>
    .spread {
        word-spacing: 0.5em;
    }
    
    .tight {
        word-spacing: -0.5em;
    }
</style>

这个word-spacing不能用于象形文字或者非罗马书写体。

7.3.2.letter-spacing字符间距

letter-spacing属性修改的是字符或字母之间的距离

letter-spacing

取值 <length> | normal

初始值 normal

适用于所有元素

7.4.text-transform文本转换

text-transform

取值 uppercase | lowercase | capitalize | none

初始值 none

适用于所有元素

uppercase和lowercase的作用与字面意思相同，就是分别把文本转换成大写和小写字母，最后一个capitalize，只把个单词的首字母变成大写

<body>
    <div>
        <p class="up">text-transform</p>
        <p class="low">TEXT-TRANSFORM</p>
        <p class="cap">text transform</p>
    </div>
</body>
<style>
    .up {
        text-transform: uppercase;
    }
    
    .low {
        text-transform: lowercase;
    }
    
    .cap {
        text-transform: capitalize;
    }
</style>

7.5.text-decoration文本装饰

可以实现很多有趣的效果

text-decoration

取值 none | [ underline || overline || line-through || blink ]

初始值 none

适用于所有元素

underline为元素添加下划线，overline的作用相反，在文本的上方绘制一条线。line-through绘制一条贯穿文本中部的线，也叫做删除线，blink让文本一闪一闪的。

<body>
    <div>
        <p class="under">underline</p>
        <p class="over">overline</p>
        <p class="through">line-through</p>
        <p class="blink">blink</p>
    </div>
</body>
<style>
    .under {
        text-decoration: underline;
    }
    
    .over {
        text-decoration: overline;
    }
    
    .through {
        text-decoration: line-through;
    }
    
    .blink {
        text-decoration: blink;
    }
</style>

虽然blink是让文本一闪一闪的，但是浏览器不支持。

链接通常默认是自带下划线，如果想要去掉的话可以使用text-decoration:none;

7.6.text-rendering文本渲染效果

text-rendering是一个SVG属性，支持它的用户代理不会把他视作CSS属性。

这个属性的作用是让创作人员指定用户代理在显示文本时应该优先考虑什么方面

text-rendering

取值 auto | optimizeSpeed | optimizeLegibility | geometricPrecision

初始值 auto

适用于所有元素

optimizeSpeed 优先考虑渲染速度，禁用字距和连写
optimizeLegibility 优先考虑易读性，启用字距和连写

geometricPrecision 优先考虑几何精度

7.7.text-shadow文本阴影

有时候想要给文本加一个阴影，这个时候，text-shadow就可以派上用场了

text-shadow

取值 none | [<length> || <length> <length> <length>?]#

初始值 none

适用于所有元素

颜色设定的是阴影的颜色，因此可以定义绿色紫色，如果省略了颜色的话，阴影的颜色将与文本的颜色相同。

前面两个长度值是阴影离文本的距离。第一个长度值设定横向偏移，第二个长度值设定纵向偏移。

第三个长度值定义阴影的模糊半径（blur radius）

<p class="shadow">就是文本模糊</p>

.shadow {
        text-shadow: purple 1px 0.5em 0.5px;
    }

7.8.white-space处理空白

white-space

取值 normal | nowrap | pre | pre-wrap | pre-line

初始值 normal

web浏览器渲染后，会把空白压缩成一个空格，而且会忽略元素中的换行

我们就可以把white-space设置为pre

7.8.1.tab-size设定制表符的宽度

tab-size

取值 <length> | <integer>

初始值 8

适用于块级元素

7.9.换行和断字

hyphens

取值 manual | auto | none

初始值 manual

适用于所有元素

word-break

取值 normal | break-all | keep-all

初始值 normal

适用于所有元素

line-break

取值 auto | loose | normal | strict

初始值 auto

7.9.1.overflow-wrap文本换行

如果文本超过了所在容器怎么办？就可以使用overflow-wrap来解决

overflow-wrap（原word-wrap）

取值 normal | break-word

初始值 normal

使用默认值normal时，按正常的方式换行，就是单词没有写完的时候，溢出才换行。

使用break-word时，可以在单词的内部换行。

7.10.书写模式

7.10.1.设定书写模式

writing-mode

取值 horizontal-tb | vertical-rl | vertical-lr

初始值 horizontal-tb

默认值horizontal-tb的意思时，“行内方向为横向，块级方向为从上到下”

7.10.2.改变文本方向

如果时多种书写系统混杂时，此时要使用text-orientation属性

text-orientaion

取值 mixed | upright | sideways

初始值 mixed

7.10.3.声明方向

用于控制文本方向的属性，他们会改变行内基线的方向。direction和unicode-bidi

direction

取值 ltr | rtl

8.视觉格式化基础

8.1.元素框基础

不管是什么元素，css都假设每个元素都生成一个或多个矩形框，我们成为元素框。各元素框的中心是内容区域 content area ，四周有可选的内边距、边框、轮廓和外边距。之所以说这些区域是可选的，因为它们的宽度可以设为零。

8.1.1.重要概念概览

常规流动

渲染西方语言时从左至右、从上到下的顺序，以及传统的HTML文档采用的文本布局方式

非置换元素

内容包含在文档中的元素。例如段落p是非置换元素，因为段落中的文本内容在元素自身中

置换元素

为其他内容占位的元素。典型的置换元素就是img。多数表单元素也是置换元素。

根元素

位于文档树顶端的元素。在HTML文档中，根元素是html，在XML文档中，根元素可以是语言允许的任何元素，例如，RSS文件的根元素是rss。

块级框

段落、标题或div等元素生成的框。display:block声明能把任何元素生成的框体变成块级框

行内框

strong或span等元素生成的框体。行内框前后不换行。display：inline声明能把任何元素生成的框体变成行内框

行内块级框

内部特征像块级框，外部特征像行内框。行内块级框的行为与置换元素相似

8.1.2.容纳块

容纳块由离元素最近的那个生成列表项目或块级框的祖辈元素的边界构成

<body>
<div>
    <p>this is a paragraph</p>
</div>
</body>

p元素的块级框的容纳块是div元素的块级框，div元素的容纳块是body元素的框。

8.2.调整元素的显示方式

为display设值就可以影响用户代理显示元素的方式。

display

取值 [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

初始值 inline

适用于所有元素

<display-outside>

block | inline | run-in

<display-inside>

flow | flow-root | table | flex | grid | ruby

<display-listitem>

list-item && <display-outside>? && [ flow | flow-root ]?

<display-box>

contents | none

<display-legacy>

inline-block | inline-list-item | inline-table | inline-flex | inline-grid

8.2.1.改变显示方式

把显示方式由行内变成块级，把链接变成块级元素之后，可以像div或p元素那样装饰，整个元素框都变成链接的了。

a{display:block;}

此外，你可能还想把元素变成行内显示方式

body>
    <ul id="a">
        <li>boc</li>
        <li>sss</li>
        <li>ddd</li>
        <li>aaa</li>
    </ul>
</body>
<style>
    #a li {
        text-align: center;
        display: inline;
        border-right: 1px solid;
        padding: 0 0.33em;
    }
    
    #a li:first-child {
        display: inline;
        border-left: 1px solid;
    }
</style>

8.2.2.块级框

box-sizing

取值 content-box | padding-box | border-box

初始值 content-box

适用于能设定width和height的所有元素

如果声明width:400px的话，而且不为box-sizing设值，默认是content-box那么元素的内容框将为400px，内边距和边框等都会在此基础上增加。

2021.11.23

8.2.3.横向格式化

使用默认值content-box时，为width设定的值是内容取的宽度。

如果把box-sizing改成border-box，width的值就是content加上padding的值

8.2.4.横向格式化属性

横向格式化属性有7个，分别为margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。

只有三个属性可以设为auto：元素内容区的宽度，左外边距和右外边距，最里面的和最外面的。

8.2.5.使用auto

width、margin-left和margin-right属性中，如果把一个设为auto，另外两个设为具体值。

假如七个属性的值之和必须是500px，margin-right设为100px，width设为100px，marigin-left设为auto，那么这个auto将会是300px。auto将会补全总和所缺的尺寸。

2021.11.24

如果把这三个属性都设置为auto之外的值，那么margin-right就会被强制设为auto。左右边距和宽度都设置为100px，用户代理就会把右外边距重置为auto。

如果左右外边距都明确设置为auto，那么width值就是满足总长度的任何值。

8.2.6.多个auto

三个属性有两个设置为auto的情况

div{width:500px;}
p{width:300px;margin-left:auto;margin-right:auto;}

左右外边距都是auto的话，元素在父元素内居中显示。

div{width:500px;}
p{width:auto;margin-left:auto;margin-right:100px;}

把一边width和外边距设置为auto，那么设置为auto的外边距就会等于零

如果把三个属性都设置为auto，两侧的外边距被设为零，而width则要多宽有多宽

8.2.7.负外边距

七个横向属性之和始终等于父元素的width，只要这几个属性的值都大于或等于零，元素就不可能比父元素的内容区宽。

但如果把margin-right设置为了负值，那么子元素就比父元素宽了

内边距、边框、内容宽度不能为负值。只有外边距的值可以小于零

8.2.8.百分数

宽度、内边距、外边距设为百分数，基本的规则依然适用。其实，这些属性的值设为长度值还是百分数并没有什么关系。

8.2.9.置换元素

块级置换元素，前面针对非置换块级框的规则都成立，有一个例外，width为auto的时候，置换元素的width等于内容自身的宽度。

8.2.10.纵向格式化

与width一样，height默认定义内容区的高度，而不是元素框可见区域的高度。元素框的上下内边距、边框和外边距在高度的基础上增加，除非box-sizing属性的值不是content-box

8.2.11.纵向格式化属性

和横向格式化一样，纵向格式化也涉及七个属性，margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom。

这七个属性的值加在一起必须等于块级框的容纳块的高度，通常是块级框父元素的height值。

只有三个可以设为auto值，margin-top、height、margin-bottom。

8.2.12.折叠纵向外边距

相邻的纵向外边距会折叠。只有外边距有这种折叠行为。

li{margin-top:10px;margin-bottom:15px;}

每个列表项目都有10px的上外边距和15px的下外边距。然而渲染的时候，相邻的两个列表项目之间的距离只有15px。相邻的外边距在纵轴上折叠了，较小的外边距被较大的外边距消去了。

8.3.行内元素

除了块级元素之外，行内元素是最常见的。常见的行内元素em和a等非置换元素，以及置换元素图像。

8.3.1.基本术语和概念

匿名文本

不在任何行内元素中的字符串

字体框

由字体具体定义，也叫字符框。字形可能比字体框高或矮。css中的font-size属性控制字体框的高度

内容区

对于非置换元素而言，内容区可以是各字符的字体框连在一起构成的方框。

对于置换元素而言，内容区是元素自身高度加上内外边距和边框

行距

行距是font-size和line-height之差

行内框

内容区加行距后得到的方框。对非置换元素来说，行内框的高度正好等于line-height属性的值。对于置换元素而言，行内框的高度等于内容区的高度，因为置换元素没有行距

行框

过一行中个行内框最高点和最低点的方框。

8.3.2.行内格式化

line-height影响行内元素和其他行内容纳，但不影响块级元素。块级元素可以设定line-height的值，但是只对块级元素的行内内容有视觉影响。

8.3.3.行内非置换元素*

对于非置换元素或匿名文本来说，font-size值决定了内容区的高度，如果行内元素的font-size是15px，那么其内容区的高度就是15px。

接下来要考虑的就是元素的line-height值，如果行内非置换元素的font-size为15px、line-height为21px，两者的差是6px，就会分别分配到内容区的上部和下部。

8.3.4.行内置换元素*

行内置换元素比如图像自身是有高度和宽度的。

8.3.5.行内块级元素

inline-block，行内块级元素和其他元素和内容的关系按照行内框处理。它在一行中的布局方式跟图像一样。实际上，行内块级元素是当作置换元素进行格式化的。行内块级元素的底边默认是与文本行的基线对齐的，而且内部不会断行。

行内块级元素中的内容视作块级元素进行格式化。

<body>
    <div id="one">
        tttttttttttttttttttttttttttttttttttttttttt
        <p>这是一个block</p>
        tttttttttttttttttttttttttttttttttttttttttt
    </div>
    --------------------------------------------
    <div id="two">
        tttttttttttttttttttttttttttttttttttttttttt
        <p>这是一个inline</p>
        tttttttttttttttttttttttttttttttttttttttttt
    </div>
    --------------------------------------------
    <div id="three">
        tttttttttttttttttttttttttttttttttttttttttt
        <p>这是一个inline-block</p>
        tttttttttttttttttttttttttttttttttttttttttt
    </div>
</body>
<style>
    #one p {
        display: block;
    }
    
    #two p {
        display: inline;
    }
    
    #three p {
        display: inline-block;
    }
</style>

里面的内容是一个块级元素，但是外面就表现成行内元素。

此外还有display:flow display:contents

至尊绝伦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5+css3学习（上）

B站【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程 | 初学者从入门到精通《CSS权威指南第四版》2021.11.19结构html用于描述页面的结构表现css用于控制页面中元素的样式行为JavaScript用于响应用户操作1.HTML基本元素 段落 我是加粗的文字 我是倾斜的文字.
复制链接

扫一扫