css

CSS知识全面汇总

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

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

CSS 知识点

基本语法

/*注释*/
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></head>

内联样式

在相关的标签内使用样式属性（style）。

这是一个段落。

多重样式优先级

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

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

CSS属性书写顺序：

布局定位属性：display/ position/ float/ clear/ overflow
自身属性：width/ height/ margin/ backgroud
文本属性
其他属性（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;}

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

background-color
background-image
background-repeat
background-attachment
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;  /*转换为行内块元素*/

盒子模型

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

特点：

脱离标准流（脱标），浮在上方，不在保留原先位置
与其他浮动的盒子一行内显示并且顶端对齐排列，父级宽度不够则另起一行
有行内块元素特征

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

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

清除浮动：

理想中应该是子盒子撑开父元素，而不是把父元素高度写死，但是子盒子浮动不占位置，父盒子高度为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

对齐

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

css

CSS知识全面汇总

CSS 知识点

文本

轮廓 Outline

外边距 Margin

填充 Padding

定位

更多选择器

伪类

伪元素

属性选择器

下拉菜单

提示框

表单

网页布局

robosts文件有什么用处?怎么写？

织梦源码和织梦模板的区别是什么呢?

新老网站没有排名和流量怎么办？

SEO代码优化之img图片标签详解

织梦dedecms企业网站模板选择技巧

相关标签