H5——CSS

怼烎@ 2022-05-08 02:04 173阅读 0赞

> CSS 即层叠样式表，主要用于对页面的装饰。  
>  使HTML专注于网页的内容，CSS专注于网页的表现  
>  提供了丰富的格式化功能  
>  可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式  
> CSS与浏览器  
>  并不是所有的CSS的样式都被浏览器支持  
>  不同的浏览器对CSS的实现有细微的不同，需要特别注意

导航

html中引入CSS的方法  
CSS基本语法  
CSS中长度单位的定义  
CSS中颜色的定义  
CSS中和字体格式有关的属性  
CSS中和文本段落格式有关的属性  
掌握盒子模型  
掌握背景色、背景图片  
Display属性  
“文档流”定位  
列表样式  
元素不可见

--------------------

#### html中引入CSS的方法 ####

*在html页面中有多种方式可以引入 CSS*

*  行内样式  
    直接使用标记的style属性  
    style=" width:100px; height:100px; background-color:\#F00;”
 *  内嵌样式  
    在HTML中，使用<style></style>标记，将样式写在<style>标记内  
    注意：<style>标记要指定type属性为text/css
 *  链接样式(外链式)  
    将CSS写入单独的一个文件中，注意该文件的文件扩展名为 .css  
    在HTML文档中使用<link>标记引入css文件  
    <link>标记需要指定两个属性：type和rel（relationship）  
    例：< link type=“text/css” rel=“stylesheet” href=“sy.css" />
 *  使用导入样式  
    使用@import指令可以将css文件中的css样式导入到不同的地方  
    导入式的结果和直接书写是同样的效果  
    导入式可以共享样式代码  
    可以在内嵌式里使用导入，也可在css文件中使用  
    导入样式的使用方法  
    @import url(“sheet1.css”);  
    @import “sheet1.css”;

当页面中同时具有多种样式时，优先级按就近原则，即使用最近的一个样式（行内》内嵌》链接）

#### CSS 基本语法 ####

> CSS使用多种选择器来确定要定义的HTML标记  
> CSS使用大量的属性来定义HTML文档的表现  
> 设置属性的不同的值来实现不同的显示效果  
>  基本语法：选择器\{属性：属性值；\}

**选择器**  
*CSS修饰html标签的基础就是选择符，即可以通过多种选择符来选择要修饰的html标签*

*  通配符选择器  
    选择对象：所有标签  
    语法：\* \{font-family: “宋体”\}
 *  类型（标记）选择器  
    选择对象：使用标签名做选择符  
    语法：p \{font-size: “8”\}
 *  ID选择器  
    选择对象：对应id名的元素  
    语法：＃idname \{…\}
 *  类（class）选择器  
    选择对象：使用此类名的元素  
    语法：.classname \{…\}
 *  包含选择器  
    选择对象：被嵌套标签包含的元素  
    语法：选择符a　选择符b \{…\}

#### 长度的单位 ####

**px 和 em**  
px：像素  
 根据显示器分辨率的不同，像素的大小也是不同的  
em：以当前字符的高度为基准  
 如果当前字体的高度为12px，那么1em就是12px  
 注意：一般以font-size为准，如果没有定义font-size，则以浏览器默认大小（16px）为准  
**cm/mm/pt/pc**  
 主要用在非显示器输出上，如打印  
 如果网页在显示器上显示，则这些单位将转换为一定的像素显示，即长度也是依靠显示器分辨率的

#### 颜色表达 ####

*网页中颜色采用RGB模式显示（显示器）*  
RGB颜色在CSS中的表达方式

*  直接使用颜色的英文单词，如red  
     注意：很多浏览器不支持颜色的单词表示
 *  使用三色的数值，如rgb(120,222,100)  
     注意：数值在0~255之间
    
     *  使用三色的百分比，如rgb(10%,20%,100%)  
         red rgb(255,0,0) blue rgb(0,0,255) black(0,0,0)  
         green rgb(0,255,0) white rgb(255,255,255)
 *  使用三色数值的十六进制，如\#0000ff  
     注意：推荐使用这种方式，十六进制值前加\#  
     rgb red \#ff0000 \#f00 blue \#0000ff \#00f black \#000000 \#000  
     green \#00ff00 \#0f0 white \#ffffff \#fff

#### 字体格式 ####

*  font-family：指定字体  
     可以为文字指定多个字体，不同字体间用“，”隔开  
     字体名字中间有空格的，要用双引号引起来
 *  font-size：字体大小  
     多用px/em单位
 *  font-style：字体倾斜效果  
     normal不倾斜、oblique和italic倾斜  
     Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！
 *  font-weight：字体粗细  
     大多浏览器可以实现：正常和加粗效果  
     normal：正常粗细  
     bold：粗体  
     bolder：加粗体  
     lighter：比正常粗体细  
     100~900：数字越大，字体越粗
 *  text-transform：英文字母大小写转换  
     capitalize：单词首字母大写  
     uppercase：全部大写  
     lowercase：全部小写
 *  text-decoration：文本装饰  
     underline：文字加下划线  
     line-through：文字加删除线  
     overline：文字加上划线

#### 文本段落 ####

*  text-indent  
    段落内容首行缩进（悬挂缩进）
 *  字词间距
    
     *  英文文本  
        letter-spacing 字母和字母间距 : normal / 数值  
        word-spacing 单词和单词间距
     *  中文文本  
        letter-spacing 字和字之间的间距
 *  overflow:visible（默认）/hidden（超出部分隐藏）/scroll（出现滚动条）/auto（浏览器自动处理）内容溢出处理
 *  text-overflow：clip（不显示省略标记，简单裁切） | ellipsis （文本溢出显示省略标记）文本溢出处理 white-space： normal / pre（空白被保留）/nowrap（不换行）/…元素空白的处理
 *  line-height：段落内部的行高  
    注意：文字在每一行自动上下居中
 *  text-align  
    文本的水平位置
    
     *  left，左对齐（默认值）
     *  right,右对齐
     *  center,居中对齐
     *  justify,两端对齐
     *  justify对于主要用于英文  
        只能对多行中的非最后一行进行两端对齐
 *  vertical-align：baseline/top/text-top/middle/bottom/… 垂直对齐方式  
    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

#### 盒子模型 ####

> 我们用盒子来描述一个div元素，甚至是其他块元素。某些方面，他们就像是一个盒子一样。

**盒子大小**

*  width 和 height  
     只定义内容的大小，不包含边框和边距  
     如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设置
 *  overflow属性 (overflow-x overflow-y)  
    定义内容超过width和heigth时的显示方式  
     scroll;使用滚动条，不论内容是否超出  
     auto;根据情况，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚动条，否则不显示滚动条  
     hidden;超出部分被隐藏  
     visible;默认值，忽略width或height  
    **边框**
 *  边框的三个方面(webkit、firefox和ie)
    
     *  width,边框的宽度
     *  color,边框的颜色
     *  style,边框的样式（border-style:dotted、solid、double、dashed; ）
 *  边框的综合定义  
    分开单独设置，  
     例：border-width:1px; border-color:\#00f; border-style:solid;  
    使用综合属性  
     例：border:1px \#00f solid  
     注意：三个值没有先后顺序，中间用空格隔开
 *  四边独立设置  
    单边分开设置  
     例：  
     border-left-width:1px;  
     border-left-color:\#00F;  
     border-left-style:solid;  
    使用综合属性  
     例：  
     border-left:1px \#00F solid  
    **边距**
 *  padding（内边距）  
    边框和内容之间的空白宽度  
    注意：这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度
 *  padding的综合设置  
    例：padding:2px;(四个内边距都为2px)
 *  padding的单边设置  
    例：padding-left:2px;(左边的边框和内容之间的距离为2px)
 *  margin（外边距）  
    标签和它相邻的标签之间的空白宽度  
    外边距的设置是相叠加的
 *  margin的综合设置  
    例：margin:10px;(和四边临近的标签的距离都为10px)
 *  margin的单边设置  
    例：margin-left:10px;(标签距左边10px)  
    <body>标签的margin代表内容与浏览器边框的距离  
    两个行内元素的margin-right和margin-left，采用“和”  
    两个块元素的marign-top和margin-bottom，采用“最大值

#### 背景 ####

*  background-color：定义标签的背景颜色
 *  background-image：定义背景图片,可定义多背景
 *  ackground-repeat：定义背景图片的显示方式  
     repeat，图片重复  
     repeat-x，图片横向重复  
     repeat-y，图片纵向重复  
     no-repeat，图片不重复
 *  background-position：定义背景图片的位置  
     直接使用两个定位单词，例:background-position: right top;  
     使用x、y坐标，例:background-position: 20px 30px;
 *  background-size：定义背景图片的大小  
     background-size: length | percentage | cover | contain;  
     cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（可能会裁剪图片）  
     contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(可能会出现空白
 *  background-origin ：定义背景图片的渲染位置  
     背景图片可以放置于 content-box、padding-box 或 border-box 区域。
 *  background-attachment定义背景图片是否固定或者随着页面的其余部分滚动
 *  background-attachment：fixed（固定）| scroll（默认）

#### display属性 ####

CSS使用display设置的标签的显示方式  
 block“块”元素  
 inline“行内”元素  
 inline-block 行内块元素  
 none 隐藏  
<div>主要用于HTML文档中独立的“大块”内容  
<span>主要用于HTML文档中需要特别定义的内容

#### 文档流定位 ####

*  float  
    造成标签“浮动”，影响“文档流”的空间  
     float:left;“左浮动”  
     float:right;”右浮动”  
    对span元素添加一个float:left，span元素已经“块”化。

> 除了基于“文档流”的定位，CSS还定义了标签的其他定位方式，CSS使用position属性指定标签的定位方式  
> position的值  
>  static，默认值，即使用基于“文档流”的定位  
>  relative，相对定位，即在“文档流”的基础上，结合left和top属性，相对定位  
>  absolute，绝对定位，即脱离“文档流”，并基于它的“包含框”，使用left和top属性来定位  
>  fixed，固定定位，即特殊的绝对定位，即它的“包含框”为浏览器

*  position:relative;：相对定位  
    相对与原来的位置，使用left,right进行偏移原来的位置对于后继元素的定位(float)依然有效对于使用float的元素，realative也同样起作用
 *  position:absolute;：绝对定位  
    绝对定位脱离了”文档流“，使用绝对定位时，注意找准”包含框“，即包含该标签，并且距它最近的，position不等于static的标签如果没有，那么将以浏览器左上角为准来定位  
    只定义position:absolute;没设置left和top，标签位置仍安“文档流”定位，但已经“脱离文档流”
 *  float：具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。  
    介绍4种清除浮动的方法  
     1.为父元素添加overflow:hidden  
     2.为父元素增加height  
     3.clear:both。通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。  
     4.伪类消除

#### 列表样式 ####

*  list-style-type 列表样式类型
 *  disc/circle/square
 *  list-style-image 列表样式图片
 *  list-style-position 列表样式位置
 *  outside / inside

#### 元素不可见 ####

*  display:none
 *  visibility：visible/hidden
 *  opacity:0-1  
    **光标样式**
 *  cursor:pointer/help/wait/url(),auto