HTML笔记 2.CSS

hype_enterprise_login.png

CSS（层叠样式表）作用：规定HTML文档的呈现形式（外观和格式编排）。

CSS 是在HTML 4开始使用的,是为了更好的渲染HTML元素而引入的。

添加CSS的三种方式

CSS 可以通过以下方式添加到HTML中:

1. 内联样式- 在HTML元素中使用"style"属性
2. 内部样式表 -在HTML文档头部 区域使用

   三、外部样式表

   当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

   使用外部样式表的步骤：

   1⃣️第一步：编写CSS文件

   span.css 文件：

   样式表，设计好选择器，{…}内写样式声明。

   a {
       background-color:grey;
       color: white;
   }
   span {
       border:thin black solid;
       padding: 10px;
   }
   

   combined.css 文件：

   1. 从其他样式表中导入样式：在样式表顶端使用@import "styles.css";语句导入其他样式表。
      1. 声明样式表的字符编码；@charset "UTF-8";

   @charset "UTF-8";
   @import "styles.css";
   span {
       border:medium black dashed;
       padding: 5px;
   }
   

   HTML5_Test.html 文件：

   2⃣️第二步：使用link元素导入外部样式表。

   
   
   
       
       
       
   
   
       Visti the Apress site 
       
   I Like apples and oranges.
       Visit the w3c website
   
   
   

   rel 属性值最全面的介绍参考：https://www.iana.org/assignments/link-relations/link-relations.xml

   样式的层叠和继承

   

   样式定义方式

   浏览器样式（用户代理样式）

   元素尚未设置样式时浏览器应用在它身上的默认样式：

   类似浏览器默认的样式：

   
   
   
       
       
   
   
       Visti the Apress site 
       
   I Like apples and oranges.
       Visit the w3c website
   
   
   

   用户样式

   浏览器允许用户自定义自己的样式表。

   Chrome 浏览器自定义样式表位置：Default\User StyleSheets\Custom.css

   样式层叠顺序

   浏览器要显示元素时求索一个CSS属性值的次序：

   1. 元素内嵌样式（用元素的全局属性style定义的样式）；
   2. 文档内嵌样式（定义在style元素中的样式）；
   3. 外部样式（用link元素导入的样式）；
   4. 用户样式（用户定义的样式）；
   5. 浏览器样式（浏览器应用的默认样式）；

   用重要样式调整层叠次序

   在样式声明后附上!important即可将对应的属性值标记为重要。

   
   
   
       
       
   
   
       Visti the Apress site 
       
   I Like apples and oranges.
       Visit the w3c website
   
   
   

   根据具体程度和定义次序解决同级样式冲突

   当样式的层次相等时，浏览器需要评估样式的具体程度来判断到底使用哪一个样式，样式的具体程度通过统计三类特征得出：

   1. 样式的选择器中id值的数目；
   2. 选择器中类和伪类的数目；
   3. 选择器中元素和伪元素的数目；

   如果样式的具体程度完全相等，那么浏览器还会根据样式的先后位置次序选择使用样式。规则是后来者居上。

   示例：

   选择器	注释	具体程度结果
   h1	只有一个元素	001
   h1.bule	有一个元素，一个类	011
   #elixirs h1	一个id，一个元素	101
   p img	两个元素	002

   继承

   如果浏览器在直接相关的样式中找不到某个属性的值，就会使用继承机制。使用父元素的样式属性值。

   
   
   
       
       
   
   
       Visti the Apress site 
       
   I Like apples and oranges.
       Visit the w3c website
   
   
   

   注意到：以上文档并没有设置 span 元素的color属性值，但是它从父元素p继承了color值。

   

   并非所有的CSS属性均可继承：

   • 与元素外观（文字颜色、字体等）相关的样式会被继承；

   • 与元素在页面上的布局相关的样式不会被继承；

   • 在样式中使用 inherit可以强行实施继承。

     
     
     
       
       
     
     
       Visti the Apress site 
       
     I Like apples and oranges.
       Visit the w3c website
     
     
     

     ​

   浏览器特定厂商前缀

   浏览器	厂商前缀
   Chrome、Safari	-webkit-
   Opera	-o-
   Firefox	-moz-
   Internet Explorer	-ms-

   CSS属性

   选择器属性

   

   CSS选择器
   

   CSS选择器2.png

   基本选择器和组合选择器

   /* 元素选择器 */
   p {
   
   }
   
   /* 类选择器 */
   .MyClass {
       
   }
   
   div.MyClass {
       
   }
   
   /* ID 选择器*/
   #idName {
       
   }
   
   /* 属性选择器:[属性=值] */
   [href] {
       
   }
   
   /* 复合选择器,并集:<选择器>, <选择器>, <选择器> */
   h1, h2 {
       
   }
   
   /* 后代选择器：<选择器> <选择器> */
   p span {
       /* 匹配p元素的后代span元素，未必是直接子元素 */
   }
   
   /* 子元素选择器：A > B */
   body > * span, tr > th {
       /*  *号代表任意元素，body的任意子元素中的span元素 */
   }
   
   /* 相邻兄弟选择器：A + B */
   p + a {
       /* 选择紧跟在某元素之后的元素 */
   }
   
   /*普通兄弟选择器：A ~ B */
   p ~ a {
       /* 选择某元素之后的元素，不仅限于紧跟的兄弟元素*/
   }
   

   伪选择器

   

   伪选择器

   伪元素

   参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

   

   伪类

   参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

   

   伪类

   边框和背景属性

   

   边框和背景属性1.png
   

   边框和背景属性2.png
   

   border 属性

   设置边框的简写属性。border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。

   参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border

   border-width: 1px; /* <长度值>|<百分数>|thin|medium|thick */
   border-style: dashed;
   border-color: black;
   
   /*简写属性*/
   /*border: [border-width ||border-style ||border-color |inherit] ;*/
   border: 1px dashed black;
   

   border-style 属性

   border-style 属性描述了边框的样式。

   参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style

   /* border-style 示例 */
   .b1 {border-style:none;}
   .b2 {border-style:hidden;}
   .b3 {border-style:dotted;} /*圆点*/
   .b4 {border-style:dashed;} /*短的方形虚线*/
   .b5 {border-style:solid;} /*实线*/
   .b6 {border-style:double;} /*双实线*/
   .b7 {border-style:groove;} /*雕刻效果边框*/
   .b8 {border-style:ridge;} /*浮雕效果边框*/
   .b9 {border-style:inset;} /*陷入效果边框*/
   .b10 {border-style:outset;} /*突出效果边框*/
   

   outline 属性

   outline 属性用来设置轮廓。

   参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline

   • 轮廓不占据空间，它们被描绘于内容之上。因此应用轮廓不需要调整页面布局。

   outline-width: 5px;
   outline-style: solid;
   outline-color: darkturquoise; /* 深蓝色 */
   
   /* 简写方式：宽度 | 样式 | 颜色 */
   outline: 5px solid darkturquoise;
   

   

   outline元素.png

   盒模型属性

   

   盒模型属性1.png
   

   盒模型属性2.png

   CSS盒模型

   

   CSS盒模型.png
   • margin 是元素之间的空间。
   • padding 是内容和边框之间的空间。
   • border 边框包围着元素和内边距，能把元素和周围的内容隔离开来。

   padding 属性

   padding 属性可以设置元素的内边距。

   padding 值的书写顺序是：上右下左，即时钟的顺时针方向。

   /*分别设置各个内边距*/
   padding-top: 20px;
   padding-right: 25px;
   padding-bottom: 20px;
   padding-left: 20px;
   
   /* 应用于四个边 */
   padding: 1em;
   
   /* 垂直方向| 水平方向*/
   padding: 5% 10%;
   
   /* 顶部| 水平方向| 底部*/
   padding: 1em 2em 2em; 
   
   /* 顶部| 右边| 底部| 左边*/
   padding: 2px 1em 0 1em;
   
   padding: inherit;
   

   margin 属性

   参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin

   margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。

   /* 分别设置各个方向的外边距 */
   margin-top: 20px;
   margin-right: 20px;
   margin-bottom: 10px;
   margin-left: 20px;
   
   margin: 5%;                /* 所有的边都是 5% 的边距 */
   
   margin: 10px;              /* 所有的边都是 10像素 的边距 */
   
   margin: 1.6em 20px;        /* 上和下边是 1.6字距, 左和右是 20像素 边距 */
   
   margin: 10px 3% 1em;       /* 上边 10像素, 左和右 3%, 下边 1字距 边距 */
   
   margin: 10px 3px 30px 5px; /* 上边 10像素, 右边 3像素, bottom 30px, left 5px margin */
   
   margin: 1em auto;          /* 上和下边 1字距 边距, 该盒子是水平居中的 */
   
   margin: auto;              /* 该盒子是水平居中的, 上下边距为0 */
   

   overflow 属性

   **overflow **属性指定当内容溢出其块级容器时,是否剪辑内容，显示滚动条或显示溢出的内容。

   参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

   /* 单独设置水平方向和垂直方向上的溢出值 */
   overflow-x: auto;
   overflow-y: auto;
   
   /* 默认值。内容不会被修剪，会呈现在元素框之外 */
   overflow: visible;
   
   /* 内容会被修剪，并且其余内容不可见 */
   overflow: hidden;
   
   /* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
   overflow: scroll;
   
   /* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
   overflow: auto;
   
   /* 规定从父元素继承overflow属性的值 */
   overflow: inherit;
   

   float 属性

   参考：https://developer.mozilla.org/zh-CN/docs/CSS/float

   float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

   /* Keyword values */
   float: left;
   float: right;
   float: none;
   float: inline-start;
   float: inline-end;
   
   /* Global values */
   float: inherit;
   float: initial;
   float: unset;
   

   clear 属性

   clear CSS 属性指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 在它的下面。clear 属性适用于浮动和非浮动元素。

   clear: none; /* 元素不会向下移动清除之前的浮动。 */
   clear: left; /* 元素被向下移动用于清除之前的左浮动。 */
   clear: right; /* 元素被向下移动用于清除之前的右浮动。 */
   clear: both; /* 元素被向下移动用于清除之前的左右浮动。 */
   clear: inline-start; /* inline-start是一个关键字，表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。 */
   clear: inline-end; /* inline-end是一个关键字，表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。 */
   
   clear: inherit; /*  */
   

   布局属性

   

   布局属性.png

   弹性盒布局

   使用弹性盒布局可以创建对浏览器窗口调整响应良好的流动界面。

   
   
   
   
       
       
       
       
       
   
   
   
       
   
           
   
               There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices.
           
           
   
               One of the most interesting aspects of fruit is the variety available in each country. I live near London, in an area which is known for its apples.
           
           
   
               When travelling in Asia, I was struck by how many different kinds of banana were available - many of which had unique flavours and which were only avaiable within a small region.
           
       
   
   
   
   
   

   

   弹性盒模型.png

   文本属性

   

   文本属性.png

   font-family 属性

   font-family 字体系列参考：https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

   

   font-family字体系列.png

   用CSS定义字体系列：

   body {
       font-family: Verdana, Geneva, Arial, "Goudy Bookletter 1911", sans-serif;
   }
   /*
    * font-family定义工作的原理：
    * 浏览器会按顺序查找计算机种可用的具体字体：Verdana, Geneva, Arial, "Goudy Bookletter 1911",
    * 如果以上具体的字体都没有，就使用浏览器默认的某个 sans-serif 系列字体。
   */
   

   使用 @font-face 设置Web字体

   谷歌字体库：Google Fonts

   font-style 属性

   font-style值	描述
   normal	选择 font-family 的常规字体。
   italic	选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。
   oblique	选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（ italic ）替代。

   • italic文本向右倾斜而且衬线有弯曲。
   • oblique，只是把普通字母倾斜显示。
   

   font-style.png

   font-size 属性

   font-size 属性指定字体的大小。

   /* ，绝对大小值 */
   /* 每种尺寸比前一种大20%*/
   font-size: xx-small;
   font-size: x-small;
   font-size: small;
   font-size: medium; /*初始值*/
   font-size: large;
   font-size: x-large;
   font-size: xx-large;
   
   /* ，相对大小值 */
   font-size: larger;
   font-size: smaller;
   
   /* ，长度值 */
   font-size: 12px;
   font-size: 0.8em; /*em = 希望得到的像素大小 / 父元素字体像素大小*/
   
   /* ，百分比值 */
   font-size: 80%;
   
   font-size: inherit;
   

   使用技巧：

   • 选择一种关键字（推荐用small或medium）定义body字体大小，也就是网页的默认字体大小。
   • 用em或百分数把别的元素的字体大小指定为相对于body字体大小的字体尺寸。

   一个流行的技巧是设置body元素的字体大小为62.5% (即默认大小16px的62.5%)，等于10px。现在你可以通过计算基准大小10px的倍数，在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。

   font-weight 属性

   设置字体的粗细

   

   font-weight属性.png

   font 属性

   font参考

   /* style | variant | weight | size/line-height | family */
   font: italic small-caps bolder 16px/3 cursive;
   

   

   font.png

   text-decoration属性

   参考文档：https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

   添加文本排版样式（下划线、顶划线、删除线或者闪烁）。

   text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：text-decoration-line，text-decoration-color和text-decoration-style

   语法形式：<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

   

   text-decoration.png
   • Safari 使用普通属性或者简写语法需要添加 -webkit-前缀。
   • Firefox 浏览器需要添加 moz前缀。
   • IE浏览器不支持该属性。

   过度、动画和变换类型

   
   

   过度、动画和变换类型2.png

   其他属性

   

   其他属性.png

   color 属性

   完整列表：www.w3.org/TR/css3-color

   1. 使用颜色名；
   2. 十进制、十六进制Color Hex Color Codes；

   CSS颜色函数：

   

   opacity 属性

   opacity 属性表示让整个元素和文本内容透明。取值范围是0～1。

   CSS 中的长度

   绝对长度

   CSS支持五种绝对长度：

   单位标识符	说明
   in	英寸
   cm	厘米
   mm	毫米
   pt	磅（1磅等于1/72英寸）
   pc	pica（1pica等于12磅）

   相对长度

   主流浏览器支持的一些CSS相对单位：

   单位标识符	说明
   em	与元素字号挂钩
   ex	与元素字体的“x高度”（字体基线到中线之间的距离）挂钩
   rem	与根元素的字号挂钩
   px	CSS像素（假定显示设备的分辨率为96dpi）
   %	另一属性的值的百分比

   px在CSS中原本是一个相对单位，但在实际使用中却变成了绝对单位。

   使用相对单位：

   
   
       
           
           
       
       
           Visit the Apress website
           
   I like apples and oranges.
           
   I also like mangos and cherries.
           Visit the W3C website
       
   
   
   

   height值为 2em，表示高度是字号的两倍。

   使用从另一个相对单位推算出来的相对单位：

   
   
       
           
           
       
       
           Visit the Apress website
           
   I like apples and oranges.
           
   I also like mangos and cherries.
           Visit the W3C website
       
   
   

   font-size: 2rem 表示使用该值的所有元素的字号是根元素的两倍。

   百分比单位

   
   
       
           
           
       
       
           Visit the Apress website
           
   I like apples and oranges.
           Visit the W3C website
       
   
   

   使用CSS角度

   单位标识符	说明
   deg	度（取值范围：0deg~360deg）
   grad	百分度（取值范围：0grad~400grad）
   rad	弧度（取值范围：0rad~6.28rad）
   turn	圆周（1turn等于360deg）

   使用CSS时间

   单位标识符	说明
   s	秒
   ms	毫秒（1s = 1000ms）

   测试CSS特性的支持情况

   • http://caniuse.com, 可以查询各款浏览器的各种版本对HTML和CSS3的支持情况。

   • www.modernizr.com, GitHub

     Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

   CSS工具

   • CSS格式校验器：W3C CSS Validation Service
   • 用 SelectorGadget 生成选择器：http://selectorgadget.com
   • 用LESS改进CSS：http://lesscss.org
   • 使用CSS框架：Blueprint | GitHub 源码
   • CSS模糊效果：Blurred Background CSS