1. 所有标签
  2. css

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%;}

    下拉菜单

      鼠标移动到我这！  
        
    菜鸟教程
        
    www.runoob.com
      

    提示框

    /* 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的基本概念和常用技巧，我们可以创建出令人印象深刻的网页设计。












    有人知道这是什么原因吗？

    易舞宇·10.30 22:04:24· 回答·问答

    想问一下不用装修插件单纯改模版的css可行吗？

    bbbbbb·10.20 22:26:24·1 回答·问答

    CSS网页样式表是什么？

    黑白配·02.03 21:52:55·1 回答·问答

    CSS和语义标记支持哪几种类型？

    沉世·02.27 16:29:57·1 回答·问答

    • 关于我们
    • 燃灯学习 照亮未来！
    • 湖南燃灯教育SEO搜索学院，是一群拥有14年SEO搜索引擎行业背景的导师组成
    • SEO技术研发始于2009-2022，导师均为行业知名大咖，带过的学生超4万多名。
    联系我们

    官方微信号

    解答老师微信

    Copyright © 2009-2021 湖南燃灯教育科技有限公司 版权所有 湘ICP备19023095号-1 湘公网安备 43010402000980号 问答XML地图 文章xml地图