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;
            }