HTML5与CSS3权威指南之CSS3学习记录

时间  2019-12-02
标签 html5 html css3 css 权威 指南 学习 记录 栏目 HTML5 繁體版
原文   原文链接

title: HTML5与CSS3权威指南之CSS3学习记录
toc: true
date: 2018-10-14 00:06:09css

学习资料——《HTML5与CSS3权威指南》（第3版）html

官方网站：css3

华章图书web

书中全部代码下载连接：正则表达式

连接：http://pan.baidu.com/s/1c0oGMn2 密码：f7ztsegmentfault

选择器

属性选择器

  • [att=val]选择器——选择属性att值为val的元素
  • [att*=val]选择器——选择属性att值包含val的元素
  • [att^=val]选择器——选择属性att值以val开头的元素
  • [att$=val]选择器——选择属性att值以val结尾的元素

结构性伪类选择器

  • root选择器——文档的根元素，HTML中即为html元素
  • not选择器——对除了:not()内的其余元素使用样式
  • empty选择器——当元素内内容为空白时使用样式

  • target选择器——当一个元素的id被其余元素用来跳转时，跳转后对跳转到的那个元素使用样式浏览器

  • first-child选择器
  • last-child选择器
  • nth-child选择器——nth-child(odd)、nth-child(even)、nth-child(3)

  • nth-last-child选择器服务器

nth-child的问题：h2:nth-child(add)指的是若是一个元素是其父元素的第奇数个子元素，且这个元素是h2，则应用样式。ide

所以须要一个对第奇数个h2子元素应用样式的选择器：布局

  • nth-of-type——例如h2:nth-of-type(odd)，参数还能够设置为可循环的an+b的形式：h2:nth-of-type(4n+1)

  • nth-last-of-type

  • only-child——当父元素只有一个子元素时，对子元素使用样式，等价于:nth-child(1):nth-last-child(1)

  • only-of-type——等价于:nth-of-type(1):nth-last-of-type(1)

UI元素状态伪类选择器

选择器 Firefox Safari Opera IE Chrome
E:hover √ √ √ √ √
E:active √ √ √ x √
E:focus √ √ √ √ √
E:enable √ √ √ x √
E:disable √ √ √ x √
E:read-only √ √ √ x √
E:read-write √ √ √ x √
E:checked √ √ √ x √
E:selection √ √ √ x √
E:default √ x √ x x
E:indeterminate √ x √ x x
E:invalid √ √ √ x √
E:valid √ √ √ x √
E:required √ √ √ x √
E:optional √ √ √ x √
E:in-range √ √ √ x √
E:out-of-range √ √ √ x √

E:hover

E:active——被激活（鼠标按下还未松开）时使用样式

E:focus——得到光标焦点时

E:enabled

E:disabled

E:read-only——处于只读状态是应用样式

E:read-write——处于非只读状态是应用样式

E:checked——radio或checkbox处于选取状态时应用样式

E:default——对页面打开时默认处于选取状态的单选框或复选框应用样式，须要注意的是，即便用户将其设置为非选取状态，E:default样式对其仍然有效

E:indeterminate——当页面打开时，一组单选框中没有一个单选框时整组单选框的样式，当有任意一个单选框被选中时，该样式被取消

E::selection——处于选中状态时的样式

在HTML5中input元素新增了两个属性：required和pattern，其中

required属性是一个布尔属性，规定必需在提交表单以前填写输入字段

pattern 属性规定一个用于验证 input 元素的值的正则表达式。

E:required——当一个input/select/textarea元素容许使用required属性且指定了required属性时应用样式

E:optional——当一个input/select/textarea元素容许使用required属性且未指定required属性时应用样式

E:invalid——当一个元素设置了required和pattern且其内容不符合这两个属性的要求时应用样式

E:valid——当一个元素设置了required和pattern且其内容符合这两个属性的要求时应用样式

input元素能够设置max和min

E:in-range——元素的值在max和min之间

E:out-of-rang——元素的值不在max和min之间

例如：

<!-- 其余代码 -->
<style type="text/css">
  input[type="number"]:in-range{
    background-color: white;
  }
  input[type="number"]:out-of-range{
    background-color: red;
  }
</style>
<!-- 其余代码 -->
<form>
  请输入1到100之间的数值：<input type=number min=1 max=100>
</form>
<!-- 其余代码 -->

:before与:after

使用content指定内容：

h2:before {
  content: 'COLUMN';
  color: white;
  background-color: orange;
  /* 其余代码 */
}

其中content还能够设置为：

  • none
  • url(xxx.png)——图片
  • attr(alt)——设置图片的alt样式
  • counter(计数器名, 编号种类)，同时在原元素中使用counter-increment: 计数器名来增长计数，其中编号种类是可选项
  • open-quote和close-quote——设置开头和结尾文字符号，并在原元素中设置quotes来设置具体是什么符号。

文字与字体相关样式

text-shadow

text-shadow: length length length color

四个属性值分别为：

  1. 阴影离开文字的横方向距离，必须设定，能够为负值
  2. 阴影离开文字的纵方向距离，必须设定，能够为负值
  3. 阴影的模糊半径，可省略
  4. 阴影的颜色，可省略，能够放在最前面，也能够放在最后面

能够指定多个阴影，用逗号隔开：

div {
  text-shadow: 10px 10px black, 20px 25px red, 30px 40px blue;
}

word-break

设置文字自动换行

值 描述
normal 使用浏览器默认的换行规则。
break-all 容许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

word-wrap

word-wrap属性容许长的内容能够自动换行。

值 描述
normal 只在容许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

@font-face

CSS3新增了Web Fonts功能，使得网页能够使用服务器端字体。

@font-face {
  font-family: myFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); 
}

div {
  font-family: myFont;
}

同时能够设置斜体或粗体字体：

@font-face {
  font-family: myFont;
  src: url('Fontin_Sans_R_45b.otf'); 
}

@font-face {
  font-family: myFont;
  font-style: italic;
  src: url('Fontin_Sans_I_45b.otf'); 
}

@font-face {
  font-family: myFirstFont;
  font-weight: bold;
  src: url('Fontin_Sans_B_45b.otf'); 
}

@font-face {
  font-family: myFirstFont;
  font-weight: bold;
  font-style: italic;
  src: url('Fontin_Sans_BI_45b.otf'); 
}

还能够使用src: local('Arial')来设置客户端本地字体。

能够元素中设置font-size-adjust来使得修改字体种类时保持文字大小不变。

固然也能够使用font-size。

盒相关样式

text-overflow

当文本溢出包含它的元素，应该发生什么。

值 描述
clip 修剪文本。
ellipsis 显示省略符号来表明被修剪的文本。
string 使用给定的字符串来表明被修剪的文本。

box-shadow

box-shadow: length length length color

四个属性值分别为：

  1. 阴影离开盒的横方向距离，能够为负值
  2. 阴影离开盒的纵方向距离，能够为负值
  3. 阴影的模糊半径
  4. 阴影的颜色，能够放在最前面，也能够放在最后面

还能够建立盒内阴影，例如：

box-shadow: inset 0 0 5px 5px #888

其中第二个5px为展开半径。

box-sizing

值 说明
content-box 标准盒模型
border-box IE盒模型
inherit 指定box-sizing属性的值，应该从父元素继承

背景与边框相关样式

background-clip

background-clip属性指定背景绘制区域。

值 说明
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。

Image result for background-clip

background-origin

背景图片的绘制起点，默认为padding的左上角。

值 描述
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框

background-size

指定背景图片大小。

background-size: length|percentage|cover|contain;

值 描述
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。若是只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。若是只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将彻底覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-repeat

repeat-x：背景图像在横向上平铺

repeat-y：背景图像在纵向上平铺

repeat：背景图像在横向和纵向平铺

no-repeat：背景图像不平铺

round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）

space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

Image result for background repeat round space

渐变色背景

http://www.runoob.com/css3/css3-gradients.html

圆角边框绘制

border-radius: 20px;——四个角半径都为20px

border-radius: 40px 20px;——左上角和右下角半径为40px，右上角和左下角半径为20px

更多的看这里

使用图像边框

border-image: source slice width outset repeat|initial|inherit

border-image是速记属性，用于设置border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat的值。

border-image-source属性指定要使用的图像

border-image-slice属性指定图像的边界向内偏移

border-image-width属性指定图像边界的宽度

border-image-outset用于指定在边框外部绘制 border-image-area 的量

border-image-repeat属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）

具体取值方式能够看这个。

变形处理

transform

  1. 缩放，指定缩放倍率。
    1. transform: scale(0.5);水平垂直都缩小为原来的一半
    2. transform: scale(0.5, 2);水平缩小为原来的一半，垂直放大为原来的两倍
  2. 倾斜，指定倾斜角度。
    1. transform: skew(30deg);只在水平方向上倾斜30度，垂直方向不倾斜
    2. transform: skew(30deg, 40deg);水平倾斜30度，垂直倾斜40度
  3. 移动，指定移动距离
    1. transform: translate(50px);只在水平方向上移动50px，垂直方向不移动
    2. transform: translate(50px, 60px);水平移动50px，垂直移动60px
  4. 旋转，指定顺时针旋转角度transform: rotate(45deg);

上述四种方法还能够组合使用，如：

transform: translate(150px, 200px) rotate(45deg) scale(1.5);

3D变形

在上边这些方法后加上X、Y、Z

如rotateZ(45deg)

或加上3d

如scale3d(0.8, 0.5, 1);

使用3D动画能够触发GPU加速来提升性能

变形矩阵

使用如transform: matrix(1, 0, 0, 1, tx, ty);的形式来指定2d变形矩阵

使用如transform: matrix3d(0.8, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);的形式来指定3d变形矩阵

变形矩阵上课有学过，这里再也不赘述

动画

transition功能支持从一个属性值平滑过渡到另外一个属性值

animation功能支持经过关键帧的指定来在页面上产生更复杂的动画效果

transition

transition: property duration timing-function delay

其中delay是可选的

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>transition示例</title>
    <style type="text/css">
      div {
        background-color: #ff0;
        transition: background-color 1s linear;
      }
      div:hover {
        background-color: #0ff;
      }
    </style>
  </head>
  <body>
    <div>
      示例文字
    </div>
  </body>
</html>

其中transition: background-color 1s linear;能够写成

div {
  transition-property: background-color;
    transition-duration: 1s;
  transition-timing-function: linear;
}

也能够使用delay属性：

div {
  transition: background-color 1s linear 2s;
}
// 或
div {
  transition-property: background-color;
    transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

过渡多个属性：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>transition示例</title>
    <style type="text/css">
      img {
        position: absolute;
        top: 70px;
        left: 0;
        
        transform: rotate(0deg);
        transition: left 1s linear, transform 1s linear;
      }
      div:hover img {
        left: 30px;
        transform: rotate(720deg);
      }
    </style>
  </head>
  <body>
    <div>
      <img src="wxy.png" alt="wxy" title="" />
    </div>
  </body>
</html>

animation

直接用一个div的无限旋转作例子吧：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>div无限循环</title>
    <style type="text/css">
      @keyframes rotate {
        from{
          transform: rotate(0deg);
        }
        to {
          transform: rotate(359deg);
        }
      }
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: rotate 3s linear infinite;
      }
    </style>
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

布局相关

多栏布局

在CSS3中，使用column-count属性来使用多栏布局方式。

不一样浏览器须要加前缀。

使用多栏布局时须要设定元素中多个栏目相加后的总宽度。

能够使用column-gap属性设置多栏之间的间隔距离（可选）。

能够使用colum-rule属性在栏与栏之间增长一条间隔线（可选）。

div#div1 {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-width: 20rem;
  -moz-column-width: 20rem;
  -webkit-column-width: 20rem;
  // 下边的为可选属性
  column-gap: 3rem;
  -moz-column-gap: 3rem;
  -webkit-column-gap: 3rem;
  column-rule: 1px solid red;
  -moz-column-rule: 1px solid red;
  -webkit-column-rule: 1px solid red;
}

盒布局

在CSS3中，经过box属性来使用盒布局。

不一样浏览器须要加前缀。

具体总结能够看这里。

弹性盒布局

例如三栏布局：

#container {
  display: flex;
}
#left-sidebar {
  width: 200px;
  background-color: red;
}
#contents {
  flex: 1;
  background-color: green;
}
#right-sidebar {
  width: 300px;
  background-color: blue;
}

使用order改变顺序:

#container {
  display: flex;
}
#left-sidebar {
  order: 3;
  width: 200px;
  background-color: red;
}
#contents {
  order: 1;
  flex: 1;
  background-color: green;
}
#right-sidebar {
  order: 2;
  width: 300px;
  background-color: blue;
}

使用flex-direction改变元素的排列方向

可指定值：

  • row：横向排列（默认）
  • row-reverse：横向反向排列
  • column：纵向排列
  • column-reverse：纵向反向排列
#container {
  display: flex;
  flex-direction: column;
}
#left-sidebar {
  order: 3;
  width: 200px;
  background-color: red;
}
#contents {
  order: 1;
  flex: 1;
  background-color: green;
}
#right-sidebar {
  order: 2;
  width: 300px;
  background-color: blue;
}

对多个元素使用flex属性:

// text-a 和 text-b 的高度都自动扩大且高度保持相等， text-c则仍保持为元素内容的高度

#container {
  display: flex;
  border: solid 5px black;
  flex-direction: column;
  width: 500px;
  height: 300px;
}
#text-a {
  flex: 1;
  background-color: red;
}
#text-b {
  flex: 1;
  background-color: green;
}
#text-c {
  background-color: blue;
}

实际上flex值是先将各个子div按内容大小分配完高度后，将剩余剩余高度按照flex值分配给各个子div。

能够使用flex-grow属性来指定元素宽度或高度，分配方式与flex相同

使用flex-wrap样式属性来指定单行布局或多行布局

  • nowrap：不换行
  • wrap：换行
  • wrap-reverse：虽然换行，可是换行方向与使用wrap样式属性值时的换行方向相反

弹性盒布局

弹性盒布局

使用jusify-content指定水平方向上如何布局子元素外的空白部分

Image result for justify content

使用align-items指定垂直方向上如何布局子元素之外的空白部分

Image result for align-items

align-self与align-items相似，区别在于align-items指定全部子元素的对齐方式，而align-self单独指定某个子元素的对齐方式

align-content

Image result for align content

calc方法

使用该方法来自动计算元素的宽度等数值类型的样式属性值

#foo {
  width: calc(50% - 100px);
  background-color: green;
}

Media Queries相关样式

@media 设备类型 and ( 设备特性 ) { 样式代码 }

设备类型

设备特性

其余

  • rgba
  • transparent
  • outline-offset
  • resize

  • initial

  • filter

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程