六、（2）HTML5和CSS3

新选择器、文本、边框

CSS3介绍

CSS3兼容性

　　CSS3是由W3C制定的标准，浏览器对CSS3进行功能实现，所以对于某些同样的样式在不同的浏览器运行结果会不一致，兼容性问题随之产生。

目前浏览器支持程度一般，有时需要添加私有前缀。

兼容查询：http://caniuse.com/

CSS3新特性

　　CSS 用于控制网页的样式和布局，CSS3加入了很多的新特性，开发人员使用这些新特性让开发变得更简单，页面变得越来越漂亮。一些最重要CSS3模块如下：

选择器
文字颜色特效
背景和边框
盒子模型
布局
过渡
动画
2D/3D转换

选择器

　　选择器是CSS中非常重要的一个模块，它主要用于匹配页面中的元素(比如id选择器#mydiv)，然后对其匹配到的元素应用我们定义的样式。

基本选择器

基本选择器所有浏览器都支持。

层次选择器

　　层次选择器通过HTML的DOM元素间的层次关系获取元素，其主，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系。

伪类选择器

　　伪类选择器对于大家来说最熟悉的莫过于“：link”、“：visited”、“：hover”、“：active”。CSS3的伪类选择器可以分成六种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类选择器和否定为类选择器。

伪类选择器语法：
E:伪类{
property：value
}

动态伪类选择器

目标伪类选择器

　　目标伪类选择器“：target”是众多实用的CSS3特性中的一个，用来匹配文档（页面）的URI中某个标志符的目标元素。URI中的标识符通常会包含一个#号，后面带有一个标识符名称，例如#contact:target就是用来匹配ID为contact的元素被URI选中时候的样式的，:target伪类选择器选取链接的目标元素，然后供定义样式。
E:target { sRules }
示例：

div{background:#ccc;width:300px;height:100px;display:none;}
div:target{color:#f00;border:1px solid #f00;display:block;}

Html:
<a href="#box1">网站首页1</a><a href="#box2">网站首页2</a><a href="#box3">网站首页3</a>
<div id="box1">内容1</div>
<div id="box2">内容2</div>
<div id="box3">内容3</div>

结构伪类选择器

　　结构伪类选择器可以根据元素在文档树中的某些特性（如相对位置）定位到它们。也就是，通过文档树结构的相互关系来匹配特定的元素，从而减少HTML文档对ID或类名的定义，帮助你保持代码干净和整洁。

否定伪类选择器

.demo li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

伪元素

CSS3中常见伪元素有“::first-letter”、“::first-line”、“::before”和“::after”，另外伪元素还增加了一个“::selection”。

注意：所有伪类都以“:”开头，所有伪元素以“::”开头

::first-letter　　“::first-letter”用来选择文本块的第一个字母。

::first-line　　“::first-line”用来匹配元素的第一行文本。

::before和::after　　“::before”和“::after”不是指存在于标记中的内容，而是可以插入额外内容的位置。

::placeholder　　::placeholder 伪元素用于控制表单输入框提示符的外观。

::selection　　“::selection”是用来匹配鼠标选中的文本。

兼容语法：
input::-webkit-input-placeholder // chrome
input:-ms-input-placeholder // IE10+
input:-moz-placeholder // Firefox4-18
input::-moz-placeholder // Firefox19+

属性选择器

文本效果

文本阴影

text-shadow属性：文本添加阴影效果；

语法：

text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
默认值：none

取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色。

例：
<h1 style=”text-shadow: 1px 2px yellow; ”>马上要找工作了，好焦灼</h1>

文本溢出

text-overflow：设置文本溢出显示方式。

语法：text-overflow：clip | ellipsis

默认值：clip
取值：
clip：当对象内文本溢出时将溢出的部分裁切掉。
ellipsis：当对象内文本溢出时显示省略标记（...）。

文本换行

word-wrap：文本自动换行

语法：word-wrap：normal | break-word

默认值：normal
取值：
normal：允许内容顶开或溢出指定的容器边界。
break-word：内容将在边界内换行。如果需要，单词内部允许断行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本效果</title>
    <style>
        h1{
            /*文本阴影*/
            text-shadow: #ff6600 5px 5px 5px;
        }
        p{
            width: 100px;
            overflow: hidden;
            /*不换行*/
            white-space: nowrap;
            /*省略号*/
            text-overflow: ellipsis;
            border: 1px solid #ccc;
        }
        h4{
            width: 100px;
            /* 默认换行 */
            /* word-wrap: normal;*/

            /* 强制截断单词进行换行 */
            word-wrap:break-word;
        }
    </style>
</head>
<body>
<h1>自在飞花轻似梦，无边丝雨细如愁</h1>

<p>自在飞花轻似梦，无边丝雨细如愁,无边丝雨细如愁</p>

<h4>a buout sd hedongyang sutudent absulos</h4>
</body>
</html>

阴影和边框（重点）

盒子阴影

box-shadow属性：设置盒子的阴影。

语法：
box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]

默认值： none

取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
<color>：设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

//例1：
<div style="width: 200px;height: 200px;border: 1px solid black;box-shadow: 1px 1px 10px red;">外阴影</div>
//例2：
<div style="width: 200px;height: 200px;border: 1px solid black;box-shadow: 0px 0px 50px red inset;">内阴影</div>

圆角边框

border-radius：设置边框为圆角。

语法：
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

默认值：0
取值：
<length>：用长度值设置对象的圆角半径长度。不允许负值
<percentage>：用百分比设置对象的圆角半径长度。不允许负值

边框图片

设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，
其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图

border-image：<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>

round 会自动调整尺寸（拉伸/压缩），完整显示边框图片。
repeat 单纯平铺多余部分，会被“裁切”而不显示。

作业

1） css3怎么解决不同浏览器的兼容性问题？
2） Css3有哪些新特性？
3） Css3新增了哪些选择器？
4）什么是伪类选择器？有哪些应用场景？
5）使用盒子阴影完成一个选中效果的搜索框
6）使用border-radius绘制各种图形（圆角矩形、正圆、椭圆、半圆、1/4圆）

面试题

1. 请问如何实现圆角边框? 如果不使用css3如何实现。
2. 请问你常用的选择器有哪些?
3. Css3与HTML5有什么关系?

posted @ 2021-05-07 17:21 全村的希望、阅读(131) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不负青春，不负代码