CSS知识全面汇总

css.png

CSS是层叠样式表,英文全称为:Cascading Style Sheets,是一种用来表现HTML(标准通用标记语言的一种)或者XML(标准标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态修饰网页,还可以配合多种脚本语言动态对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精准控制,几乎支持所有的字体字号样式,拥有对网页对象和模型样式编辑能力。

CSS 知识点

基本语法

v2-6c39f4506c8885fa8e225a7fda02d4ed_r.png

/*注释*/
p{
    color:red;
    text-align:center;}

id选择器

  #para1{  
        text-align:center;
    color:red;}

class选择器

注意:id选择器和class选择器不要数字开头。

分组与嵌套

h1,h2,p{
    color:green;}.marked pp.mared


CSS创建

插入样式表的方法有三种:

  • 外部样式表(External style sheet)

  • 内部样式表(Internal style sheet)

  • 内联样式(Inline style)

外部样式表

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

内部样式表

单个的文档需要特殊的样式时,就需要用到这个样式

<head></head>

内联样式

在相关的标签内使用样式属性(style)。

这是一个段落。

多重样式优先级

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

CSS属性书写顺序:

  1. 布局定位属性:display/ position/ float/ clear/ overflow

  2. 自身属性:width/ height/ margin/ backgroud

  3. 文本属性

  4. 其他属性(CSS3)

背景

body{
        background-color:#b0c4de;
        background-size:80px 60px;     /*background-size:100% 100%; */
        background-image:url('img_tree.png');
        background-repeat:no-repeat;
    /*背景图像如果要重复,将从这一点开始。*/
        background-position:right top;
        /*规定background-position属性相对于什么位置来定位。*/
        background-origin:content-box;
        /*规定背景的绘制区域。*/
        background-clip: content-box; }


线性渐变


#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);}#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);}#grad {
  /* 多颜色 */
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}/*带有指定的角度的线性渐变*/#grad {
  background-image: linear-gradient(-90deg, red, yellow);}/*使用透明度*/#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}#grad {
  /* 重复的线性渐变 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}

径向渐变

#grad {
  background-image: radial-gradient(red, yellow, green);}/*不均匀渐变*/#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);}/*特定形状*/#grad {
  background-image: radial-gradient(circle, red, yellow, green);}/*不同尺寸大小关键字*/#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);}

合并属性

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时,属性值的顺序为::

  1. background-color

  2. background-image

  3. background-repeat

  4. background-attachment

  5. background-position

文本

body {
        color:red;
        /*left、right、center、justify(两端对齐)*/
        text-align:center;
        /*none、underline、overline、line-through、blink*/
        text-decoration:overline;
        /*none、uppercase、lowercase、capitalize*/
        text-transform:uppercase;
        text-indent:50px;}

字体

p{
        /*如果浏览器不支持第一种字体,他将尝试下一种字体。*/
        font-family:"Times New Roman", Times, serif;
        /*normal、italic、oblique*/
        font-style:normal;
        /*font-size:100%;*/
        font-size:40px;}

链接


a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
  • a:hover 必须跟在 a:link 和 a:visited后面

  • a:active 必须跟在 a:hover后面

  • 列表

  • ul.a {list-style-type: circle;}ul.b {list-style-type: square;}
     ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}list-style-image: url('sqpurple.gif');/*list-style-type:none 属性可以用于移除小标记。*/

简写高属性

ul
{
    list-style: square url("sqpurple.gif");
}

list-style-type

list-style-position

list-style-image

表格

table{
        border: 1px solid black;
        /*collapse:边框合并 separate:边框分开*/
    border-collapse:collapse;
        height:50px;
        width:100%;
        text-align:right;
        vertical-align:bottom;}td{
        background-color:green;
    color:white;
    padding:15px;}

元素显示器:

元素显示模式,即元素(标签)以什么方式显示,自己占一行或者一行有多个

快元素

比如 < /> <></></></><>< >< >特点:</></></>< class style="list-style-type: disc;">

  • 一行多个但之间有空隙

  • 默认宽度为内容宽度

  • 高度、宽度、内外边距都可控制

  • display:block;   /*转换为块元素*/display:inline;  /*转换为行内元素*/display:inline-block;  /*转换为行内块元素*/


    盒子模型

    v2-18348ebe39cb97a26267d2f8f1a3fefa_r.png


    • Margin(外边距) - 清除边框外的区域,外边距是透明的。

    • Border(边框) - 围绕在内边距和内容外的边框。

    • Padding(内边距) - 清除内容周围的区域,内边距是透明的。

    • Content(内容) - 盒子的内容,显示文本和图像。

    box-sizing: content-box     默认值,边框和内边距的宽度都会被增加到最后的元素宽度中box-sizing: boder-box    设置的边框和内边距的值是包含在width内的
    p{
            /*指定长度或thick,medium,thin*/
            border-width:thick;
            /*dashed,solid,double,groove,ridge,inset,outset*/
            border-style:dotted;
            border-color:red;
            border-radius:25px;
            box-shadow: 10px 10px 5px #888888;
            border-image:url(border.png) 30 30 round;}/*分别指定各边*/p{
        border-top-style:dotted;
        border-right-style:solid;
        border-bottom-style:dotted;
        border-left-style:solid;}

    简写属性-border

    border:5px solid red;
    • border-width

    • border-style (required)

    • border-color

    轮廓 Outline

    p{
            /*指定长度或thick,medium,thin*/
            outline-width:thick;
            /*dashed,solid,double,groove,ridge,inset,outset*/
            outline-style:dotted;
            outline-color:red;}

    外边距 Margin

    p{
            /* auto,length,% */
            /* 只有两个值时,分别为上下、左右*/
          margin:2cm 4cm 3cm 4cm;}

    填充 Padding

    p{
          padding:2cm 4cm 3cm 4cm;}


    显示

    隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。

    visibility:hidden可以隐藏某个元素,但占用与未隐藏之前一样的空间。

    display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。

    浮动

    让多个块级盒子一行无缝排列,经常用于横向排列

    块级元素纵向排列找标准流,横向排列找浮动

    如果图像是右浮动,下面的文本流将环绕在它左边:

    img
    {
        float:right;
    }

    特点:

    1. 脱离标准流(脱标),浮在上方,不在保留原先位置

    2. 与其他浮动的盒子一行内显示并且顶端对齐排列,父级宽度不够则另起一行

    3. 行内块元素特征

    一般策略:用标准流的父元素排列上下位置,内部子元素采取浮动排列左右位置。

    理论上一个盒子浮动,则兄弟盒子也应浮动。浮动影响后方的标准流,前面的不影响。

    清除浮动:

    理想中应该是子盒子撑开父元素,而不是把父元素高度写死,但是子盒子浮动不占位置,父盒子高度为0。

    清除浮动后,父级就有了高度,不会影响下方标准流。

    1.额外标签法
    浮动元素末尾新增一个块级元素,并使用:
    div
    {
    clear:both;
    }

    2.父级添加overflow属性,设置为hidden、auto或scroll

    3.伪元素清除法
    .clearfix:after
    {
    content:"";
    display:block;
    height:0;
    clear:both:
    visibility:hidden:
    }

    .clearfix /*兼容IE*/
    {
    *zoom:1;
    }

    4.双伪元素清除法:
    .clearfix:before,.clearfix:after
    {
    content:"";
    display:block;
    }

    .clearfix:after
    {
    clear:both;
    }

    .clearfix /*兼容IE*/
    {
    *zoom:1;
    }

    定位

    让盒子自由移动位置或者固定到屏幕中的某个位置,且能压住其他盒子。

    定位=定位模式+边偏移

    static 定位(静态定位)

    即没有定位,遵循正常的文档流对象。

    静态定位的元素不会受到 top, bottom, left, right影响(即没有边偏移)。

    relative 定位(相对定位),相对其正常位置。还占有原来位置,不脱标。

    h2.pos_left
    {
        position:relative;
        left:-20px;
    }
    h2.pos_right
    {
        position:relative;
        left:20px;
    }

    absolute 定位(绝对定位)

    绝对定位的元素的位置相对于最近的已定父元素

    如果元素没有已定位的父元素,那么它的位置相对于<html>:

    absolute 定位使元素的位置与文档流无关,因此不占据空间。

    绝对定位的盒子不能通过margin:0 auto 水平居中

    居中方式:

    left: 50%margin-left: -100       左移自身宽度的一半


    fixed 定位(固定定位)

    元素的位置相对于浏览器窗口是固定位置,与父元素无关。

    即使窗口是滚动的它也不会移动,Fixed定位使元素的位置与文档流无关,因此不占据空间

    可以看作特殊的绝对定位

    sticky 定位

    在 position:relative 与 position:fixed 定位之间切换。

    以浏览器可视窗口为参照(固定定位),占有原来位置(相对定位)。

    在跨越特定阈值前为相对定位,之后为固定定位。

    指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }

    元素的堆叠

    img
    {
        position:absolute;
        left:0px;
        top:0px;
        z-index:-1;        /*z轴控制盒子的前后次序*/
    }

    具有更高堆叠顺序的元素总是在前面。

    行内元素添加绝对定位后,可以设置高度、宽度

    块级元素添加绝对定位后,默认为内容大小

    绝对定位会压住下面标准流的所有内容,但浮动不会压住盒子中的文字、图片。


    overflow

    v2-b2525f5b1b09e16d0937f653e8ca5f74_r.png

    对齐

    1.元素居中对齐

    .center {
        margin: auto;
        width: 50%;
        border: 3px solid green;
        padding: 10px;
    }

    将两边的空外边距平均分配。如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用。

    2.文本居中对齐

    .center {
        text-align: center;
        border: 3px solid green;
    }

    3.图片居中对齐

    使用 margin: auto; 并将它放到  元素中

    4.左右对齐

    body {
        margin: 0;
        padding: 0;}
     .container {
        position: relative;
        width: 100%;}
     .right {
        position: absolute;
        right: 0px;
        width: 300px;
        background-color: #b0e0e6;}

    如果子元素的高度大于父元素,且子元素设置了浮动,那么子元素将溢出,这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。

    可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

    .clearfix {
        overflow: auto;}


    当使用 float 属性时,请始终设置 !DOCTYPE 声明。

    5.垂直居中(有多种写法)

    .center {
        padding: 70px 0;
        border: 3px solid green;}


    .center {
        line-height: 200px;
        height: 200px;
        border: 3px solid green;
        text-align: center;}
     /* 如果文本有多行,添加以下代码: */.center p {
        line-height: 1.5;
        display: inline-block;
        vertical-align: middle;}

    垂直居中:position和transform

    .center { 
        height: 200px;
        position: relative;
        border: 3px solid green; }
     .center p {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);}

    更多选择器

    组合选择符

    /*后代选择器:选取某元素的后代元素。*/div p{
      background-color:yellow;}/*子元素选择器:只能选择作为某元素直接/一级子元素的元素。*/div>p{
      background-color:yellow;}/*相邻兄弟选择器:选择紧接在另一元素后的元素,且二者有相同父元素。*/div+p{
      background-color:yellow;}/*后续兄弟选择器:选取所有指定元素之后的相邻兄弟元素。*/div~p{
      background-color:yellow;}

    伪类

    为处于某个状态的已有元素添加对应的样式。

    状态伪类:

    /*a:link    未被访问过的链接;a:visited 被访问过的链接,与:link互斥。    
    a:hover   鼠标悬停到的元素;a:active  被激活的元素;a:focus   拥有键盘输入焦点的元素。*//*a:hover  必须在 a:link 和 a:visited之后a:active 必须在 a:hover 之后伪类名称对大小写并不敏感*/

    CSS3新增,能够减少class和id属性的定义,使文档结构更简洁。

    /*:first-child 选择某个元素的第一个子元素;  
    :last-child 选择某个元素的最后一个子元素;:nth-child(n) 匹配属于其父元素的第 n个子元素,不论元素的类型;:nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素,不论元素的类型;:nth-of-type() 规定属于其父元素的第n个 指定 元素;:nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素;:first-of-type 选择一个上级元素下的第一个同类子元素;:last-of-type 选择一个上级元素的最后一个同类子元素;:only-child 选择它的父元素的唯一一个子元素;:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;:checked 匹配被选中的input元素,这个input元素包括radio和checkbox。:empty 选择的元素里面没有任何内容。:disabled 匹配禁用的表单元素。:enabled 匹配没有设置disabled属性的表单元素。:valid 匹配条件验证正确的表单元素。:in-range 选择具有指定范围内的值的 <input> 元素。:optional 选择不带 "required" 属性的 <input> 元素。:focus 选择获得焦点的 <input> 元素。*/

    伪元素

    创建一些不在文档树中的元素,并为其添加样式。

    伪元素使用两个冒号 (::), 伪类使用一个冒号 (:)

    /*p::after         在每个

    属性选择器

    /*简单属性选择 */a[href] {color:red;}a[href][title] {color:red;}/*根据具体属性值选择*/a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}/*根据部分属性值选择~=:包含^=: 以其开头$=: 以其结尾*=:包含子串|=: 带有以指定值开头的属性值的元素*/p[class~="important"] {color: red;}


    导航栏

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;}/*移除浏览器的默认设置将边距和填充设置为0*/

    垂直导航栏

    a{
        display:block;
        width:60px;}ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #f1f1f1;}
     li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;}
     /* 鼠标移动到选项上修改背景颜色 */li a:hover {
        background-color: #555;
        color: white;}

    全屏高度的固定导航条

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 25%;
        background-color: #f1f1f1;
        height: 100%; /* 全屏高度 */
        position: fixed; 
        overflow: auto; /* 如果导航栏选项多,允许滚动 */}

    水平导航栏

    内联列表项

    li{
        display:inline;}

    浮动列表项

    li{
        float:left;}a{
        display:block;
        width:60px;}

    实例

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;}
     li {
        float: left;}
     li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;}
     /*鼠标移动到选项上修改背景颜色 */li a:hover {
        background-color: #111;}

    固定导航条

    ul {
        position: fixed;
        top: 0;
        width: 100%;}

    下拉菜单

    提示框

    /* Tooltip 容器 */.tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; /* 悬停元素上显示点线 */}
     /* Tooltip 文本 */.tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
     
        /* 定位 */
        position: absolute;
        z-index: 1;}
     /* 鼠标移动上去后显示提示框 */.tooltip:hover .tooltiptext {
        visibility: visible;}

    表单

    input[type=text], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;}
     input[type=submit] {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;}
     input[type=submit]:hover {
      background-color: #45a049;}
     div {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;}


    网页布局

    响应式网页布局

    * {
      box-sizing: border-box;
    }
     
    body {
      font-family: Arial;
      padding: 10px;
      background: #f1f1f1;
    }
     
    /* 头部标题 */
    .header {
      padding: 30px;
      text-align: center;
      background: white;
    }
     
    .header h1 {
      font-size: 50px;
    }
     
    /* 导航条 */
    .topnav {
      overflow: hidden;
      background-color: #333;
    }
     
    /* 导航条链接 */
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
     
    /* 链接颜色修改 */
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
     
    /* 创建两列 */
    /* Left column */
    .leftcolumn {   
      float: left;
      width: 75%;
    }
     
    /* 右侧栏 */
    .rightcolumn {
      float: left;
      width: 25%;
      background-color: #f1f1f1;
      padding-left: 20px;
    }
     
    /* 图像部分 */
    .fakeimg {
      background-color: #aaa;
      width: 100%;
      padding: 20px;
    }
     
    /* 文章卡片效果 */
    .card {
      background-color: white;
      padding: 20px;
      margin-top: 20px;
    }
     
    /* 列后面清除浮动 */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
     
    /* 底部 */
    .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
      margin-top: 20px;
    }
     
    /* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */
    @media screen and (max-width: 800px) {
      .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
      }
    }
     
    /* 响应式布局 -屏幕尺寸小于 400px 时,导航等布局改为上下布局 */
    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }

    最后对CSS总结一下:学CSS并不像一些数学公式意义可推导,他给我的个人感觉更像是一个化学知识点,每一个标签都有其特异的地方,所以一定要在日常的学习中多多积累。总的来说CSS是一种强大的网页样式语言,它可以使我们的网页更加美观、易读和易于导航。通过掌握CSS的基本概念和常用技巧,我们可以创建出令人印象深刻的网页设计。