CSS新增选择器&CSS常用边框，背景属性

CSS3简介

CSS3是最新的CSS标准。

CSS3新增选择器

属性选择器

以box开头

<style>
    div[class^="box"] {
        background:red;
    }
</style>
<div class="box">box</div>
<div class="abox">abox</div>
<div class="boxa">boxa</div>
<div class="aboxa">aboxa</div>

以box结尾

<style>
    div[class$="box"] {
        background:red;
    }
</style>
<div class="box">box</div>
<div class="abox">abox</div>
<div class="boxa">boxa</div>
<div class="aboxa">aboxa</div>

包含box

<style>
    div[class*="box"] {
        background:red;
    }
</style>
<div class="box">box</div>
<div class="abox">abox</div>
<div class="boxa">boxa</div>
<div class="aboxa">aboxa</div>

结构性伪类选择器

:first-child 选择器：用于选取属于其父元素的首个子元素的指定选择器

<style>
    li:first-child {
        background:red;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:last-child 选择器：用于选取属于其父元素的最后一个子元素的指定选择器

<style>
    li:last-child {
        background:red;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:nth-child(n)选择器：匹配属于其父元素的第n个子元素，n可以是数字、关键字或公式

<style>
    li:nth-child(2) {
        background:red;
    }
    li:nth-child(even) {
        background:red;
    }
    li:nth-child(odd) {
        background:red;
    }
    li:nth-child(2n) {
        background:red;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:nth-last-child()选择器：匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键字或公式

<style>
    li:nth-last-child(2) {
        background:red;
    }
    li:nth-last-child(even) {
        background:red;
    }
    li:nth-last-child(odd) {
        background:red;
    }
    li:nth-last-child(3n) {
        background:red;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

:nth-of-type(n)：选择器匹配属于父元素的特定类型的第n个子元素。n可以是数字、关键字或公式

<style>
    .wrap h2:nth-of-type(2) {
        background:red;
    }
    .wrap p:nth-of-type(odd) {
        background:red;
    }
    .wrap p:nth-of-type(even) {
        background:red;
    }
    .wrap p:nth-of-type(3n) {
        background:yellow;
    }
</style>
<div class="wrap">
    <h2>标题1</h2>
    <p>段落文本1</p>
    <p>段落文本2</p>
    <p>段落文本3</p>
    <h2>标题2</h2>
    <p>段落文本4</p>
    <p>段落文本5</p>
</div>

:nth-last-of-type(n)：选择器匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数。n可以是数字、关键字或公式

<style>
    .wrap h2:nth-last-of-type(2) {
        background:red;
    }
    .wrap p:nth-last-of-type(odd) {
        background:red;
    }
    .wrap p:nth-last-of-type(even) {
        background:red;
    }
    .wrap p:nth-last-of-type(3n) {
        background:yellow;
    }
</style>
<div class="wrap">
    <h2>标题1</h2>
    <p>段落文本1</p>
    <p>段落文本2</p>
    <p>段落文本3</p>
    <h2>标题2</h2>
    <p>段落文本4</p>
    <p>段落文本5</p>
</div>

状态伪类选择器

:checked匹配用户界面上处于选中状态的元素
:enabled匹配用户界面上处于可用状态的元素
:disabled匹配用户界面上处于禁用状态的元素

<style>
    input[type=text]:enabled {
        color:#f00;
    }
    input[type=text]:disabled {
        color:#ff0;
    }
    input[type=radio]:checked {
        color:#f0f;
    }
</style>
<form action="#">
	<input type="text" value="请输入用户名" enabled>
    <input type="text" value="请输入别名" disabled>
    <input type="radio" checked name="sex">
    <input type="radio" name="sex">
</form>

选择器	例子	例子描述	CSS
.class	.intro	选择class="intro"的所有元素	1
#id	#firstname	选择id="firstname"的所有元素	1
*	*	选择所有元素	2
element	p	选择所有p元素	1
element，element	div,p	选择所有div元素和所有p元素	1
element element	div p	选择div元素内部的所有p元素	1
element>element	div>p	选择父元素为div元素的所有p元素	2
element+element	div+p	选择紧接在div元素之后的p元素	2
[attribute]	[target]	选择带有target属性所有元素	2
[attribute=value]	[target=_blank]	选择target="_blank"的所有元素	2
:link	a:link	选择所有未被访问的链接	1
:visited	a:visited	选择所有已被访问的链接	1
:active	a:active	选择点击那一刻的链接	1
:hover	a:hover	选择鼠标指针位于其上的链接	1
:focus	input:focus	选择获得焦点的input元素	2
:first-letter	p:first-letter	选择每个p元素的首字母	1
:first-line	p:first-line	选择每个p元素的首行	1
:first-child	li:first-child	选择属于父元素的第一个子元素的每个li元素	2
:before	p:before	在每个p元素的内容之前插入内容	2
:after	p:after	在每个p元素的内容之后插入内容	2
element1~element2	div~p	选择前面有div元素的p元素	3
[attribute^=value]	a[src^="https"]	选择其src属性值以“https”开头的每个a元素	3
[attribute$=value]	a[src$=".pdf"]	选择其src属性以“pdf”结尾的所有a元素	3
[attribute*=value]	a[src*="abc"]	选择其src属性中包含“abc”子串的每个a元素	3
:nth-child(n)	p:nth-child(n)	选择属于其父元素的第二个子元素的每个p元素	3
:nth-last-child(n)	p:nth-last-child(n)	同上，从最后一个子元素开始计数	3
:nth-of-type(n)	p:nth-of-type(n)	选择属于其父元素第二个p元素的每个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(n)	同上，但是从最后一个子元素开始计数	3
:last-child	li:last-child	选择属于其父元素最后一个子元素每个li元素	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择没有子元素的每个p元素（包括文本节点，空格，换行也不可以）	3
:target	#news:target	选择当前活动的#news元素	3
:enabled	input:enabled	选择每个启用的input元素	3
:disabled	input:disabled	选择每个禁用的input元素	3
:checked	input:checked	选择每个被选中的input元素	3
:not(selector)	:not(p)	选择非p元素的每个元素，需要设定p元素属性	3
::selection	::selection	选择被用户选取的元素部分	3

CSS3常用边框属性

border-radius
- border-radius: top-left top-right bottom-right bottom-left ;
box-shadow
- box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow 必需，水平阴影的位置，允许负值；
- v-shadow 必需，垂直阴影的位置，允许负值；
- blur 可选，模糊距离；
- spread 可选，阴影的尺寸；
- color 可选，阴影的颜色；
- inset 可选，将外部阴影改为内部阴影

text-shadow

text-shadow: h-shadow v-shadow blur color;
h-shadow 必需，水平阴影的位置，允许负值；
v-shadow 必需，垂直阴影的位置，允许负值；
blur 可选，模糊距离；

color 可选，阴影的颜色；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100%;
            height: 150px;
            background-color: red;
            font-size: 100px;
            color: #fff;
            /* 
                text-shadow
                    1.水平位置，必需
                    2.垂直位置，必需
                    3.模糊距离
                    4.阴影的颜色
             */
            text-shadow: 10px 10px 10px black;
        }
        .box1 {
            width: 100%;
            height: 150px;
            line-height: 150px;
            text-align: center;
            background-color: blue;
            font-size: 100px;
            color: #fff;
            text-shadow: 0 0 5px gold
            ,0 0 10px gold
            ,0 0 15px gold
            ,0 0 20px gold;
        }
        .box2 {
            width: 100%;
            height: 150px;
            line-height: 150px;
            text-align: center;
            background-color: #ccc;
            font-size: 100px;
            color: #ccc;
            text-shadow: -1px -1px #fff,1px 1px #000;
        }
        .box3 {
            width: 100%;
            height: 150px;
            line-height: 150px;
            text-align: center;
            background-color: #ccc;
            font-size: 100px;
            color: #ccc;
            text-shadow: 1px 1px #fff,-1px -1px #000;
        }
    </style>
</head>
<body>
    <div class="box">
        hello world
    </div>
    <div class="box1">
        hello world
    </div>
    <div class="box2">
        hello world
    </div>
    <div class="box3">
        hello world
    </div>
</body>
</html>

CSS3背景属性

多背景
- background-image:url(图片路径)，url(图片路径)。。。；
- ```
<style>
    .box {
        width: 1000px;
        height: 500px;
        background-image: url(images/pic1.jpeg), url(images/pic2.jpeg);
        background-repeat: no-repeat;
        background-postion: left top, right bottom;
        border: 1px solid;
    }
</style>
```
- background-size: length|percentage|cover|contain;
  - length: 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”。
  - percentage: 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”。
  - cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也可能无法完全显示在背景区域中。
  - contain: 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
- background-origin: 规定背景图片的定位区域。背景图片可以放置于content-box、padding-box或border-box区域。
  - content-box 背景图像相对于内容框来定位
  - padding-box 背景图像相对于内边距来定位（默认）
  - border-box 背景图像相对于边框来定位
- background-clip: 规定背景的绘制区域
  - border-box 背景被裁剪到边框盒 (默认)
  - padding-box 背景被裁剪到内边距框
  - content-box 背景被裁剪到内容框

CSS3渐变属性

linear-gradient

#grad {
    background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */ 
    background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */
    background: linear-gradient(red,yellow,blue); /* 标准语法 */
}

radial-gradient
- ```
#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1- 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6-12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6-15 */
  background: radial-gradient(red, green, blue); /* 标准语法 */
}
```
- 第一个属性值(形状):是可选的，一共有下面两种选择： circle 圆形 ellipse 椭圆形，默认值第一个属性值还可以设置，发散的位置，值如下所示： at center（默认），at top,at left,at right,at bottom,at top left…… 第一个属性值还可以设置，发散的半径，关键字值如下所示： closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边 farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角

用户界面

浏览器的私有前缀(兼容高版本，提前兼容)

内核私有前缀浏览器

Gecko -moz- 火狐

Webkit -webkit- Chrome、Safari

Presto -o- Opera

Trident -ms- IE

-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;

resize 属性
- resize 属性规定是否可由用户调整元素的尺寸。
  
  注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
  - none 用户无法调整元素的尺寸。
  - both 用户可调整元素的高度和宽度。
  - horizontal 用户可调整元素的宽度。
  - vertical 用户可调整元素的高度。
box-sizing 属性
- content-box：宽度和高度分别应用到元素的内容框；即在宽度和高度之外绘制元素的内边距和边框
- border-box：为元素设定的宽度和高度决定了元素的边框盒。也就是说，为元素指定的任何内边距和边框都不会改变盒子大小
calc函数（实现不同单位之间换算），-两边要加空格

多列布局

通过CSS3,能够创建多个列来对文本进行布局一就像报纸那样
- column-count 规定元素应该被分隔的列数
- column-width 该属性指定一个长度值，用于规定每个栏目的宽度
- column-gap 规定列之间的间隔
- column-rule 属性设置列之间的分隔线
- ```
p {
          column-count: 3;
          column-width: 300px;
          column-gap: 30px;
          column-rule: 1px dashed red;
      }
```

发表于 2021-01-09 16:11 热河噜啦阅读(106) 评论(0) 编辑收藏举报

刷新页面返回顶部