CSS3新增及多列布局

最新推荐文章于 2024-03-15 19:07:10 发布

初见766

最新推荐文章于 2024-03-15 19:07:10 发布

阅读量187

点赞数

分类专栏： html css 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_60488295/article/details/121654064

版权

html css 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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可以是数字、关键字（even：偶数 odd：奇数）或公式

<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匹配用户界面上处于禁用状态的元素

:focus 获得鼠标焦点状态

 <style>
        /* enabled 启用状态 */
        input[type="text"]:enabled {
            background-color: red;
        }
        /* disabled 禁用状态 */
        input[type="text"]:disabled {
            background-color: blue;
        }
        /* checked 已选中状态 */
        input[type="radio"]:checked {
            /* 放大2倍 */
            transform: scale(2);
        }
        /* focus 获得鼠标焦点状态 */
        input[type='text']:focus {
            background-color: deeppink;
            height: 50px;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" >
        <input type="text" disabled>
        男：<input type="radio" name="sex" value="male">
        女：<input type="radio" name="sex" value="female">
        <input type="text">
        <input type="text">
        <input type="text">
    </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背景属性

多背景

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-position: 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区域。
- padding-box 背景图像相对于内边距来定位（默认）
- content-box 背景图像相对于内容框来定位
- border-box 背景图像相对于边框来定位
background-clip: 规定背景的绘制区域
- border-box 背景被裁剪到边框盒 (默认)
- padding-box 背景被裁剪到内边距框
- content-box 背景被裁剪到内容框

CSS3渐变属性

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）通过background-image指定

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向。径向渐变（Radial Gradients）- 由它们的中心定义。

线性渐变

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

语法
- background: linear-gradient(direction, color-stop1, color-stop2, ...);
渐变重复
- 语法： repeating-linear-gradient(red,yellow 10%)
渐变方向
- 使用起始位置关键字：to right，to top
- background: linear-gradient(to left,lightblue 10%,lightpink 100%);
- 使用角度:45deg
- background: linear-gradient(45deg,lightblue 10%,lightpink 100%);

多重渐变

语法：逗号隔开

提示：书写顺序越靠前显示越靠上

    .box1 {
      width: 500px;
      height: 500px;
      background: linear-gradient(red 10%, yellow 30%), linear-gradient(blue 30%, pink 50%);
      background-size: 100px 100px, 300px;
      background-position: left, right;
      background-repeat: no-repeat;
    }

渐变兼容

<style>
    #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);
      /* 标准语法 */
    }
  </style>

径向渐变

径向渐变由中心点定义。

语法
- background: radial-gradient(shape size at position, start-color, ..., last-color);
  
  background-image: radial-gradient(circle at right, red, yellow, black);
代码演示
- 颜色节点均匀分布
  - radial-gradient(red, green, blue);
- 颜色结点不均匀分布
  - radial-gradient(red 0,red 50%,blue 60%)
  - 节点取值
    - px,百分比
渐变重复
- 语法：repeating-radial-gradient()
- 代码示例
  - repeating-radial-gradient(red 0,red 10px,blue 10px,blue 20px);}
渐变的形状
- ellipse 表示椭圆形(默认)
- circle 表示圆形
多重渐变
- 语法：逗号隔开
- 提示：书写顺序越靠前显示越靠上

径向渐变兼容

  <style>
    #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);
      /* 标准语法 */
    }
  </style>

浏览器的私有前缀

内核	私有前缀	浏览器
Gecko	-moz-	火狐
Webkit	-webkit-	Chrome、Safari
Presto	-o-	Opera
Trident	-ms-	IE

-moz-border-radius:50px; 火狐浏览器识别
-webkit-border-radius:50px;谷歌浏览器识别
-o-border-radius:50px;欧朋浏览器识别
-ms-border-radius: 50%;IE浏览器识别
border-radius:50px;正常浏览器识别

resize 属性
- resize 属性规定是否可由用户调整元素的尺寸。

注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。

- none 用户无法调整元素的尺寸。
- both 用户可调整元素的高度和宽度。
- horizontal 用户可调整元素的宽度。
- vertical 用户可调整元素的高度。
box-sizing 属性
- content-box：宽度和高度分别应用到元素的内容框；即在宽度和高度之外绘制元素的内边距和边框
- border-box：为元素设定的宽度和高度决定了元素的边框盒。也就是说，为元素指定的任何内边距和边框都不会改变盒子大小

calc函数（实现不同单位之间换算）

  /* 缺点：兼容性差 */
            width: calc(100% - 500px);

实现盒子水平垂直居中

 <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: #009;
      position: absolute;
      top: calc(50% - 150px);
      left: calc(50% - 150px);
    }
  </style>

多列布局

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

初见766

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增及多列布局

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">bo...
复制链接

扫一扫

专栏目录