CSS总结

CSS层叠样式表（Cascading Style Sheet）：用于定义HTML内容在浏览器内的显示样式

  • 简化HTML相关标签，页面体积小，下载快
  • 解决内容与表现分离的问题
  • 更好的维护网页，提高工作效率

CSS引用样式：

  • 行内样式（内联样式）：在开始标签内添加style样式，html文件内。如：<p style="color:red;">内容</p>;同时加载

  • 内部样式表（嵌入样式）：<style>要放在<head>标签之间；html文件内；同时加载

    <style type="text/css">
  样式。。。
</style>

    低版本浏览器不识别<style>标签，可以用html注释包括

    <style type="text/css">
  <!--
  p { color:blue; }
  -->
</style>

  • 链入外部样式：把CSS样式代码写在独立的一个文件中。css样式文件与html文件分离

    • 扩展名：CSS文件名.css
    • 引入外部文件：<link href="XX.css" rel="stylesheet" type="text/css" />
    • 说明：<link>要放在<head>标签之内
    • 页面加载时同时加载css样式

  • 导入式：@import，在样式代码最开始处；css样式文件与html文件分离；在读取完html文件之后加载

    <style type="text/css">
  @import "css.css"
  <!--或者：@import url(css.css)-->
</style>

  • 使用链入外部样式的好处：css和html分离；多个文件可以使用同一个样式文件；多文件引用同一个css文件，css文件只需下载一次

  • 优先级：

    • 行内样式 > 内部样式 > 外部样式
    • 链入外部样式表与内部样式表之间的优先级取决于所处位置的，最后定于的优先级最高（就近原则）

CSS选择器：

  • 标签选择器：以html标签作为选择器

    p,h1,h2 { font-size:30px; }

  • 类选择器：为html标签添加class属性，再通过类选择器来为具有此class属性的元素设置css样式

    <h1 class="red">内容1</h1>
<p class="red">内容3</p>

<!--同一元素设置多个类，之间用空格隔开-->
<p class="red fsize">内容2</p>

    /* 类选择器添加css样式 */
.red{
  color:red;
}

/* 对不同类型元素的同一名称的类选择器设置不同样式 */
p.red{
  font-size:50px;
}
h1.red{
  font-size:20px;
}

  • ID选择器：为html标签添加id属性，再通过ID选择器来为具有此id的元素设置css样式。ID的唯一性

    <h1>内容1</h1>
<p id="p1">内容2</p>
<p id="p2">内容3</p>

    /* ID选择器添加css样式 */
#p1{
  font-size:50px;
}
#p2{
  font-size:20px;
}

  • 全局选择器：所有标签设置样式

    * {
  font-size:30px; 
}

  • 群组选择器：集体统一设置样式

    p,h1,h2 { 
  font-size:30px; 
}

  • 后代选择器：用空格隔开

    <em>CSS层叠样式</em>
<p><em>CSS</em>层叠样式</p>

    /* 后代选择器添加css样式 */
p red{
  color:red;
}

链接伪类：4种状态

  • :link，未访问的链接
  • :visited，已访问的链接
  • :hover，鼠标悬停状态（访问的鼠标经过某个元素时）
  • :active，激活的链接（一个元素被激活时，即按下鼠标之后放开鼠标之前的时间）
  • 链接伪类的顺序：:link > :visited > :hover > :active
    • a:hover必须置于a:link和a:visited之后才有效
    • a:active必须置于a:hover之后，才有效
    • 伪类名称对大小写不敏感

CSS继承：

  • 父元素设置样式，子元素可以继承部分属性，以减少CSS代码
  • chrome浏览器默认字体大小：16px
  • h1默认字体，font-size：2em；

CSS层叠：可以定义多个样式；不冲突时，多个样式可层叠为一个；冲突时，按不同样式规则优先级来应用样式

CSS权值：统计不同选择器的个数；每类选择器的个数乘以相应权值；把所有的值相加得出选择器的权值

  • 标签选择器：权值为1
  • 类选择器和伪类：权值伪10
  • ID选择器：权值伪100
  • 通配符选择器：权值伪0
  • 行内样式：权值为1000

CSS优先级：

  • !important：优先级最高

    div{
  color:red !important;
}

  • CSS使用方法的优先级：行内样式 > 内部样式 > 内部样式 > 外部样式；link链入外部样式和style内部样式优先级，取决于先后顺序

  • 样式表中优先级：ID选择器 > class选择器 > 标签选择器 > 通配符

  • 权值相同：就近原则（离被设置元素越近优先级越高）；权值不同：权值高的优先级高

CSS样式命名规则：

  • 采用英文字母、数字以及“-”和"_"命名
  • 以小写字母开头，不能以数字和“-”、"_"开头
  • 命名形式：单字，连字符，下划线，驼峰。eg:.special / .mainTitle / .mian-title / .mian_title
  • 使用有意义的命名
    • 页面结构：header（页头）、main（页面主体）、footer（页尾）、content/container（内容）、container（容器）、nav（导航）、sidebar（侧栏）、column（栏目）、wrapper（页面外围控制）、left/right/center（左/右/中）
    • 导航：nav（导航）、miannav（主导航）、subnav（子导航）、topnav（顶导航）、sidebar（边导航）、leftsidebar（左导航）、rightsidebar（右导航）、menu（菜单）、submenu（子菜单）、title（标题）、summary（摘要）
    • 功能：logo（标志）、banner（广告）、login（登录）、loginbar（登录条）、register（注册）、search（搜索）
    • id，class不要滥用，适当使用

文字样式属性：

  • 字体样式：设置多个字体，浏览器依次查找，都没有则使用浏览器默认样式
    • font-family:[字体1], [字体2]...
    • 字体集：serif, sans-serif, monospace, cursive, fantasy
  • 文字大小：
    • font-size:绝对单位/相对单位;
    • 绝对单位：in（inch，英寸，1inch=2.54cm），cm，mm，pt（磅，印刷的点数，72磅=1英寸），pc（pica，1pc=12pt），xx-small（9px），x-small（11px），small（13px），medium（16px），large（19px），x-large（23px），xx-large（28px）
    • 相对单位：px（像素），em / %
  • 文字粗细：
    • font-weight: normal | bold | bolder | lighter | 100~900;
    • 默认值：normal，400等同于normal，700等同于bold
  • 文字样式：font-style:normal | italic | oblique;
  • 字体变形：设置元素中文本为小型大写字体。font-variant:normal | small-caps;
  • 文本行高：line-height: 长度值 ｜ 百分比;
  • font属性简写：
    • font:font-style font-variant font-weight font-size/line-height font-family;
    • 注意书写顺序，前三个顺序是任意的

text-align：水平对齐方式，对块级元素设置有效，text-align:left | right | center | justify;

vertical-align：垂直对齐方式，适用于行内元素/单元格元素

  • vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 ｜ 百分比;
  • 文字基线：

文字垂直居中

  • 单行文字垂直居中：元素设置line-height与容器高度相同
  • 多行文字垂直居中：元素设置display:table-cell;，父元素中设置display:table;

文本样式属性

  • word-spacing：设置元素内单词之间间距
  • letter-spacing：设置元素内字母之间间距
  • text-transform: capitalize | uppercase | lowercase | none;：设置元素内文本的大小写
  • text-decoration:underline | overline | line-through | blink | none;：设置元素内文本的装饰

盒子模型：用来“放”网页中的各种元素；页面设计中内容，如文字、图片等元素都是盒子。如果没有Doctype文档类型声明，各浏览器按照自己的方式解析，如果右Doctype文档类型声明，按照标准盒子模型来解析

宽度/高度属性

  • 宽度：width:长度值 | 百分比 | auto;
    • 最大宽度：max-width:长度值 | 百分比 | auto;
    • 最小宽度：min-width:长度值 | 百分比 | auto;
    • 设置块级元素和替换元素的内容宽度
  • 高度：height:长度值 | 百分比 | auto;
    • 最大高度：max-height:长度值 | 百分比 | auto;
    • 最小高度：min-height:长度值 | 百分比 | auto;
    • 设置块级元素和替换元素的内容高度
  • 块级元素和替换元素可以设置高和宽属性
    • 块级元素：<p>, <div>, <h1>~<h6>, <ul>, <li>, <ol>, <dl>, <dt>, <dd>
    • 替换元素：浏览器根据其标签的元素与属性来判断显示的内容，<img>, <input>, <textarea>

边框属性

  • 边框宽度：border-[left|right|top|bottom]-width:thin | medium | thick | 长度值;
  • 边框颜色：border-[left|right|top|bottom]-color:颜色 | transparent;
  • 边框样式：border-[left|right|top|bottom]-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;

内边距属性：设置元素的内容与边框之间的距离（内边距/填充），分上、右、下、左四个方向

  • padding-top:长度值｜百分比;
  • padding-right:长度值｜百分比;
  • padding-bottom:长度值｜百分比;
  • padding-left:长度值｜百分比;
  • 缩写
    • padding:值1; // 4个方向都为值1
    • padding:值1 值2; // 上下=值1，左右=值2
    • padding:值1 值2 值3; // 上=值1，左右=值2，下=值3
    • padding:值1 值2 值3 值4; // 上=值1，右=值2，下=值3，左=值4

外边距属性：设置元素与元素之间的距离（外边距），分上、右、下、左四个方向

  • margin-top:长度值｜百分比｜auto;
  • margin-right:长度值｜百分比｜auto;
  • margin-bottom:长度值｜百分比｜auto;
  • margin-left:长度值｜百分比｜auto;
  • 缩写
    • margin:值1;// 4个方向都为值1
    • margin:值1 值2;// 上下=值1，左右=值2
    • margin:值1 值2 值3;// 上=值1，左右=值2，下=值3
    • margin:值1 值2 值3 值4;// 上=值1，右=值2，下=值3，左=值4
  • 块级元素存在外边距
  • margin:0 auto;实现水平方向居中显示
  • 垂直方向，两个相邻元素都设置外边距，外边距会发生合并，合并后外边距高度等于两个发生合并外边距的高度中最大值

盒子模型计算

  • 盒子在页面中所占宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
  • 盒子在页面中所占高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距

display属性

  • display:inline;
    • 元素将显示为内联元素，元素前后没有换行符
    • 换行导致的内联元素中缝隙解决方法：不换行；在外层加一个父元素，并设置font-size:0;，子元素再设置相应的font-size
  • display:block;元素将显示为块级元素，元素前后会带有换行符
  • display:inline-block;行内块元素，元素呈现为inline，具有block相应特性
  • display:flex;
  • display:none;元素不会被显示

元素背景：背景区包括内容、内边距（padding）、边框、不包含外边距（margin）

  • 设置元素背景颜色：background-color:颜色｜transparent(默认);
  • 设置元素背景图片：background-image:url | none;
    • url地址可以是相对地址，也可用是绝对地址
    • 元素的背景占据了元素的全部尺寸，包括内边距和边框，不包括外边距
    • 默认情况下，背景图像位于元素的左上角，并在水平和垂直方向上重复
  • 设置背景图片重复：background-repeat:repeat|no-repeat|repeat-x|repeat-y;
  • 设置元素背景图片的显示方式：background-attachment:scroll|fixed;
    • scroll：默认值，背景图片随滚动条滚动
    • fixed：页面其余部分滚动时，背景图片不会移动
  • 设置元素背景图片的起始位置：background-position:百分比｜值｜top｜right｜bottom｜left｜center;
  • 缩写：不分先后顺序background:[background-color][background-image][background-repeat][bacground-attachment][backgroung-position];

列表项标记样式

  • 样式类型：list-style-type:关键字｜none;
    • 无序列表：none（无标记）、disc（实心圆）、circle（空心圆）、square（实心方块）
    • 有序列表：none（无标记）、decimal（从1开始的整数）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
  • 使用图片设置列表项的标记：list-style-image:url|none;
  • 列表项标记位置：list-style-position:inside|outside;
    • inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
    • outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据对齐标记对齐
  • 缩写：list-style:list-style-type list-style-position list-style-image;
    • 顺序不固定
    • list-style-image会覆盖list-style-type的设置

CSS定位机制

  • 普通流（标准流）：默认状态，元素自动从左往右，从上往下的排列

  • float浮动：

    • 使元素左/右浮动，不能上下；浮动元素碰到包含框或另一个浮动框时，浮动停止；浮动元素之后的元素将围绕它，之前的不受影响；浮动元素会脱离标准流

    • float:left|right|none;

    • 元素使用浮动后会脱离普通流，出现“高度塌陷”，浮动溢出；设置了float的元素会影响其他相邻元素，需要使用clear清除浮动，clear只会影响自身，不会对其他相邻元素造成影响。clear:none|left|right|both;

    • 清除浮动常用方法：

      /* 方法一：在浮动元素后使用一个空元素 */
<div class="clear"></div>

/* 方法二：给浮动元素的容器添加 */
overflow:hidden;
*zoom:1; /*触发hasLayout兼容IE6/7*/

/* 方法三：使用CSS3的:after伪元素 */
.clearfix:after {
  content:".";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
}

/* 方法四：父级元素定义height，只适合高度固定的布局 */

/* 方法五：父级元素也一起浮动。不推荐，会出现新的浮动问题 */

  • position属性：top/left/right/bottom/z-index声明

    • position:static;（静态定位/常规定位/自然定位）：使元素定位于常规/自然流中（块、行垂直排列下去，行内水平从左到右）
      • 忽略top、bottom、left、right或者z-index声明
      • 两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的
      • 具有固定width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大占满剩余宽度，造成块元素水平居中
    • position:relative;（相对定位）：使元素成为可定位的祖先元素
      • 可以使用top/right/bottom/left/z-index进行相对定位
      • 相对定位的元素不会离开常规流（相对于常规流原来的位置产生位移）
      • 任何元素都可以设置为relative，它的绝对定位后代都可以相对于它进行绝对定位
      • 可以使浮动元素发生偏移，并控制它们的堆叠顺序
    • position:absolute;（绝对定位）：使元素脱离常规流，默认相对body定位
      • 注意确定最近定位的祖先元素
      • left/right/top/bottom都设置为0，它将对齐到最近定位祖先元素的各一边，居中
      • left/right/top/bottom都设置为auto，它将显示原来的位置
      • 如果没有最近定位祖先元素，默认相对body定位
      • z-index可以控制堆叠顺序
    • position:fixed;（固定定位）：相对于窗口视图定位
      • 继承absolute的特点
      • 跟absolute相比，区别在于相对谁做绝对定位
      • 固定定位元素不会随着视口滚动而滚动
    • position:sticky;（磁贴定位/粘性定位/吸附定位）：relative+fixed的完美结合，制造出吸附效果
      • 如果产生偏移，原位置还是会在常规流中
      • 如果它最近祖先元素有滚动，那么它的偏移标尺就是最近的祖先元素
      • 如果最近祖先元素没有滚动，那么它的偏移标尺是视口
    • position:inherit;（继承父元素的定位模型）

box-sizing属性：允许以特定的方式定义匹配某个区域的特定元素

  • inherit：规定应从父元素继承box-sizing属性的值
  • content-box：在宽度和高度之外绘制元素的内边距和边框（默认值）
  • border-box：通过从已经设定的宽度和高度中分别减去边框和内边距之后得到的值才是内容的宽度和高度

posted on 2020-09-16 18:34  DemiMiracle  阅读(87)  评论(0)    收藏  举报