CSS3（一）

全文手打，转载请注明出处

一）CSS3：对CSS进行扩展

新特性：

1）选择器

2）阴影

3）形状转换（2D---3D）

4）变形

5）动画（过滤动画/帧动画）

6）边框

7）多重背景

8）反射

9）文字

10）颜色（rgba/hsl/hsla）

11）滤镜（filter）

12）弹性布局

13）多列布局

14）盒模型

15）Web字体

16）媒体查询

二）CSS3浏览器不支持时，需要兼容处理

主流浏览器内核：加厂商前缀：

a）Trident：IE内核 -ms-

b）Gecko：FireFox内核 -moz-

c）Webkit：Chrome（谷歌）/Safari（苹果） -webkit-

d）Blink（Webkit分支）：Chrome（谷歌）/Opera（欧鹏） -o-

Tips（技巧）：国内浏览器大多是双核的（IE内核+Chrome内核）

三）CSS3选择器

1）属性选择器

<style>
p[class]{
  color:red;              //全红
}
p[class=content]{
  color:red;              //只有段落3变红
}
p[class^=content]{
  color:red;              //段落134变红，表示以content开头
}
p[class$=content]{
  color:red;              //段落234变红，表示以content结尾
}
p[class*=p]{
  color:red;              //段落124变红，表示包含p
}
</style>

<div class="container">
  <p class="content p1">段落1</p>
  <p class="p2 content">段落2</p>
  <p class="content">段落3</p>
  <p class="content p4">段落4</p>
</div>

2）结构性伪类选择器（前面有:）111

:root {                 //匹配html标签，与body选择器效果一样
  background-color: red;
}
body {       
  background-color: red;
}
// 匹配父元素中连续的子元素
:first-child：第一个子元素
:last-child：最后一个子元素
:nth-child(n)：第n个子元素
:nth-last-child(n)：倒数第n个子元素
p:first-child{
  color:purple;
}
p:nth-child(2n){       //偶数从头数2的倍数，2，4，6，8 //2n+1奇数  //3n+2
  color:purple;
}

3）目标伪类

//目标伪类：target：匹配URL指向的元素
p {
  height:600px;
}
p:target {
  color:red;          //点击a标签的链接后，实现页内跳转，跳转的p标签变红
}

<a href="#jump1">跳转1</a>             //页内跳转
<a href="#jump2">跳转2</a>
<a href="#jump3">跳转3</a>

<p id="jump1">这是段落1的内容</p>        //id表示设置的1个锚点，用来实现业内跳转
<div id="jump2">这是段落2的内容</div>    //不变哈，不是p标签
<p id="jump3">这是段落3的内容</p>

4）表单（UI）元素状态伪类

input:disabled{                 //只有disabled背景才变红
  background-color:red;         
}
input:enabled{                  //非disabled背景变绿
  background-color:green;         
}
input:checked{                  //checked只在Opera浏览器有效
  color:yellow;
}
::selection{                    //被选中的文本，注：双冒号
  color:yellow;
}


<p>普通文本</p>                  //文本被选中后，变色
<form action="">
  <input type="text" disabled>
  <input type="text">
  <input type="text">

  <input type="checkbox" name="face" checked>党员
  <input type="checkbox" name="face">团员
  <input type="checkbox" name="face">群众

  <select>
    <option>前端开发</option>
    <option selected>大数据</option>
    <option>后端开发</option>
  </select>
</form>

5）否定伪类

否定伪类:not(p)
:not(p){                         //非p标签
  background-color:pink;
  color:purple;
}

.container :not(p){              //container下面的，非p标签
  background-color:pink;
  color:purple;
}

6）通用兄弟元素选择器

.div1~.div2{     //找div1的兄弟元素
  color:red;
}

<div class="test">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <strong>strong</strong>
  <div class="div3">div3</div> 
</div>

四）CSS3文本处理

1）文本阴影

h-shadow{number}：必选，水平阴影的位置，允许负值
v-shadow{number}：必选，垂直阴影的位置，允许负值
blur{number}：可选，模糊的距离
color{color}：可选，阴影的颜色
text-shadow:水平偏移 垂直偏移 模糊 颜色;

h1{
  text-shadow:2px 3px 5px purple;    //主流浏览器都支持
}

<h1>这是文本阴影测试</h1>

2）文本自动换行

p{
  width:200px;
  border:1px solid purple;
  -ms-word-:normal;               //normal（默认）只允许在断点处换行
  word-wrap:normal;
  -ms-word-wrap:break-word;       //break-word在长单词或URL地址内部进行换行
  word-wrap:break-word;
}

<p>advsafsaewfewsvv gfakksbcsbckabvlLHFLOHLNDlvhlsdvh</p>

3）单词拆分

p{
  width:200px;
  border:1px solid purple;
  -ms-word-break:normal;           //normal（默认）默认换行规则
  word-break:normal;
  -ms-word-break:break-all;        //break-all允许在单词内换行
  word-break:break-all;
  -ms-word-break:keep-all;         //keep-all只能在半角空格或连字符处换行
  word-break:keep-all;
}

<p>advsafsaewfewsvv gfakksbcsbckabvlL  HFLOHLNDlvhlsdvh</p>

4）文本拆分

text-wrap:
normal:只允许换行点进行换行
none:不换行，元素无法容纳的文本会溢出
unrestricted:在任意2字符间切换
suppress:压缩元素中的换行，浏览器只在行中没有其他有效换行点时进行换行

5）文本溢出113 19min

a）单行文本溢出（重要）

text-overflow:clip/ellipsis/string

b）多行文本溢出(IE9以下的版本不支持)

display:-webkit-box;     //盒布局
-webkit-box-orient:vertical;
-webkit-line-clamp:行数;
overflow:hidden;

6）

posted on 2020-09-16 16:06 十一天阅读(69) 评论(0) 编辑收藏举报

刷新页面返回顶部

十一天

导航

公告

CSS3（一）