CSS总结

本文主要是介绍CSS总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、css介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

二、css语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

h1{color:red;font-size:14px;}

h1——>选择器
color:red；——>声明
color——>属性
red——>值
font-size:14px;——>声明
font-size——>属性
14px——>值

/* 这是注释 */

三、css引入方式

行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

内部样式

嵌入式是将CSS样式集中写在网页的head标签对的style标签对中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>

外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。

# 现在写的这个.css文件是和你的html是一个目录下，如果不是一个目录，href里面记得写上这个.css文件的路径

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

文件内容是：

p {color:blue;}
/*注释*/

注释一般都使用来描述后面这段css代码是给页面上哪一个板块用的
/*标题样式*/
xxxxx

/*个人中心设置*/

四、css选择器

css选择器——>如何找到对应的标签

基本选择器

元素选择器:

div{
    color: red;
}

id选择器：id值不能重复

#bob{
    color:green;
}

<div id="bob">
    鲍勃
</div>

类选择器: 类值可以重复

/* 所有标签里面含有class值为c1的标签 */
.c1{
    color: green;
}

/* div标签里面含有class值为c1的标签 */
div.c1{ 
    color: green;
}

<div id="bob" class="c1">
    鲍勃
</div>
<div id="xy" class="c1">
    小杨
</div>

通用选择器：找到所有的标签

*{ 
    color: green;
}

组合选择器

后代选择器：找到div标签后代里面的所有a标签

div a{   
    color:red;
}

儿子选择器：找到div的儿子标签这一代的a标签

div>a{ 
    color:red;
}

毗邻选择器：找到是紧挨着div标签的下一个a标签(是兄弟标签)

div+a{  
     color: red;
}

弟弟选择器：找到的是同级的后面的所有兄弟 a 标签

div~a{  
    color: red;
}

属性选择器

通过属性名来查找：找到所有含有title属性的标签

[title]{
    color: red;
}

/* 含有title属性的div标签 */
div[title]{
    color: red;
}

通过属性名对应的值来查找：当属性值的值为数字的时候,数字要加上引号

[title='666']{
    color: red;
}

/* 含有type属性,并且type属性的值为text的input标签 */
input[type=text]{ 
        background-color: red;
}

分组选择器

多个选择器选择的标签设置相同css样式的时候,就可以用分组

div 选择器和 p 选择器共同设置相同的样式,可以逗号分隔

div,p{  
    color:red;
}

伪类选择器

a 标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线

/* 未访问的链接颜色 */
a:link {
  color: #FF0000
}

/* 已访问的链接颜色 */
a:visited {
  color: #00FF00
} 

/* 选定的链接，就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色*/
a:active {
  color: #0000FF
}

input 输入框获取焦点时样式

input 默认的有个样式，鼠标点进去的时候，input 框会变浅蓝色的那个感觉

input:focus {
  background-color: red; /* 框里面的背景色 */
}

hover的用法

用法1：这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色

a:hover{
    background-color:yellow;
}

用法2：使用 a 控制其他块的样式：

使用 a 控制 a 的子元素 b：

.a:hover .b {
    background-color:blue;
}

使用 a 控制 a 的兄弟元素 c (同级元素)

.a:hover + .c {
    color:red;
}

使用 a 控制 a 的就近元素 d ：

.a:hover ~ .d {
    color:pink;
}

伪元素选择器

通过css来造标签，不推荐使用

first-letter：常用的给首字母设置特殊样式

/* 将p标签中的文本的第一个字变颜色变大小 */
p:first-letter { 
  font-size: 48px;
  color: red;
}

before：

/* 在每个<p>元素之前插入内容 */
p:before {
  content:"*";        ——>插入的内容
  color:red;
}

after：

/* 在每个<p>元素之后插入内容 */
p:after {
  content:"[?]";    ——>插入的内容
  color:blue;
}

before和after多用于清除浮动。

选择器的优先级

优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式

important > 内敛样式 > id选择器 > 类选择器 > 元素选择器 > 继承选择器

/* id选择器优先级为100 */
#d1{
    color:deepskyblue;
}
/*--------------------------------------------------------------*/
/* 继承的优先级为0 */
body{
    color:red;
}
/*--------------------------------------------------------------*/
/* 类选择器的优先级是10 */
.c1{
    color: blue;
}
/*--------------------------------------------------------------*/
/* 元素选择器优先级是1 */
div{
    color: green;
}
/*--------------------------------------------------------------*/
/* 内敛样式优先级为1000 */
<p class="cc3" style="color: red;">我是cc3的p标签</p>
/*--------------------------------------------------------------*/
/* important优先级最高,最牛逼 */
.cc1 .cc3 {
    color: purple!important;
}

五、css属性相关

高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的

div{
    width: 100px;  ——>宽度
    height: 100px; ——>高度
    background-color: pink;        ——>背景颜色
}

字体属性

字体

.c1{
    font-family: '楷体','宋体','微软雅黑';
}

字体大小

.c1{
    font-size:14px; /* 默认字体大小为16px */
}

字体颜色

.c1{
    color: red;
}

子重,粗细

.c1{
    font-weight: bold;
    font-weight: 100;
}
        

值             描述
normal         默认值，标准粗细
bold           粗体
bolder         更粗
lighter        更细
100~900        设置具体粗细，400等同于normal，而700等同于bold

颜色表示方式

p{
    color: red;                 
    color: #78FFC9;
    color: rgb(123,199,255);
    color: rgba(123,199,255,0.3);  /* 多了一个透明度的数字:0-1的一个数字 */
}

文字属性

文字对齐：text-align

div{
    width: 200px;
    height: 200px;
    background-color: yellow;
    text-align: center;
}

left    左边对齐 默认值
right    右对齐
center    居中对齐

文字装饰：text-decoration

div a{
    text-decoration: none;      /* 给a标签去除下划线 */
}


值                描述
none            默认。定义标准的文本。
underline       定义文本下的一条线。
overline        定义文本上的一条线。
line-through    定义穿过文本下的一条线。

首行缩进

/* 首行缩进两个字符，因为一个字的默认大小为16px */

p {
  text-indent: 32px; 
}

背景属性

div{
    height: 600px;
    width: 600px;
    background-image: url("1.jpg");     /* 图片背景 */
    background-color: red;              /* 颜色背景 */
}

/* 背景重复 */
div{
    height: 600px;
    width: 600px;
    background-image: url("1.jpg");     /* 图片背景 */
    background-repeat: no-repeat;       /* 背景图片不平铺 */
}

repeat(默认): 背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
repeat-x： 背景图片只在水平方向上平铺
repeat-y： 背景图片只在垂直方向上平铺
no-repeat： 背景图片不平铺

/* 图片背景位置 */
div{
    height: 600px;
    width: 600px;
    background-image: url("1.jpg");         /* 图片背景 */
    background-repeat: no-repeat;           /* 背景图片不平铺 */
    background-position: center center;     /* 九宫格形式，正中间 */
}

|----------------------------------------------|
| left，top    | center，top    | right，top    |
|----------------------------------------------|
| left，center | center，center | right，center |
|----------------------------------------------|
| left，bottom | center，bottom | right，bottom |
|----------------------------------------------|

div{
    height: 600px;
    width: 600px;
    background-image: url("1.jpg");         /* 图片背景 */
    background-repeat: no-repeat;           /* 背景图片不平铺 */
    background-position: 100px 50px;        /* 相对于div标签的,距离左边100px,距离上面50px */
}

/* 简写方式 */
background:颜色/图片路径 是否平铺 图片位置

div{
    height: 600px;
    width: 600px;
    background: url("1.jpg") no-repeat center center;
}

六、边框

边框属性：

1、border-width 宽度

2、border-style 样式

3、border-color 颜色

div{
    height: 200px;
    width: 200px;
    border-width: 2px;
    border-style: solid;
    border-color: red;
}

/* 简写方式 */
div{
    height: 200px;
    width: 200px;
    border: 2px solid red;
}

边框样式：border-style

值	描述
none	无边框
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实线边框

单独设置边框样式：

div{
    height: 200px;
    width: 200px;
    border-top-style: solid;    /* 单独设置上边框为实线 */
    border-top-color: red;      /* 单独设置上边框为红色 */

    border-bottom-style: dashed;    /* 单独设置下边框为虚线 */
    border-left-style: none;        /* 单独取消左边框 */
}

border-left:10px solid red;      /* 单独设置左边框的简写方式 */

border-radius: 50%                /* 控制圆角 */

七、display属性

用于控制HTML元素的显示效果。

div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: inline;            /* 将标签设置为内敛标签 */
    display: inline-block;      /* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 */
    display: none;              /* 隐藏标签 ,并且不占用自己之前的空间 */
    display: block;             /* 将内敛标签设置为块级标签 */
}

隐藏标签
visibility: hidden;     /* 隐藏标签,但是标签还占用原来的空间 */
display: none;          /* 隐藏标签 ,并且不占用自己之前的空间* */

值	意义
none	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
block	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
inline	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
inline-block	使元素同时具有行内元素和块级元素的特点。

八、css盒子模型

css里面，每个标签可以称为一个盒子模型：

1、content（内容）：盒子的内容，显示文本和图像所占的空间

2、padding（内填充）：内边距，用于控制内容与边框之间的距离

3、border（边框）：围绕在内边距和内容的外边框宽度

4、margin（外边距）：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

border内边距
div{
    height: 100px;
    width: 100px;
    background-color: red;
    padding-left: 10px;            
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    /* 简写 */
    padding: 10px 20px;            /* 10px上下内边距 ,20px左右内边距 */
    padding: 10px 20px 5px 2px;    /* 对应上右下左 */
}

margin外边距
top            距离上面标签的距离
bottom        距离下面标签的距离
left         距离左边标签的距离
rigth         距离右边标签的距离

div.d1 {
    width: 200px;
    height: 100px;
    border: 2px solid deeppink;
    margin-bottom: 200px;
}
div.d2{
    width: 200px;
    height: 100px;
    margin-top: 100px;
    border: 2px solid blue;
/* 简写方式 */
margin: 10px 20px;
margin: 10px 5px 6px 3px;

两个情况:
        垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
        水平方法,两个标签都设这外边距,取两者的边距之和

九、浮动float

浮动的两个特点：

1、浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

2、浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值：

left：向左浮动

right：向右浮动

none：默认值，不浮动

div.d1 {
    width: 200px;
    height: 100px;
    background-color: red;
    float: left;        /* 向左浮 */
}
div.d2{
    width: 200px;
    height: 100px;
    background-color: yellow;
    float: right;        /* 向右浮 */
}

浮动会造成父级标签塌陷问题 解决方法： 1 父级标签设置高度 2 伪元素选择器清除浮动，给父级标签加上类值

/* 方法1：*/
div.d1 {
    width: 200px;
    height: 100px;
    background-color: red;
    float: left;
}
div.d2{
    width: 200px;
    height: 100px;
    background-color: yellow;
    float: right;
}

div.d3{
    width: 100%;
    height: 150px;
    background-color: blue;
}

div.dd{
    height: 100px;        /* 设置父级标签高度 */
}


/* 方法2：*/
div.d1 {
    width: 200px;
    height: 100px;
    background-color: red;
    float: left;
}

div.d2{
    width: 200px;
    height: 100px;
    background-color: yellow;
    float: right;
}

div.d3{
    width: 100%;
    height: 150px;
    background-color: blue;
}

div.dd:after{
    content: '';      /* 结尾插入内容 */
    display: block;   /* 将内敛标签设置为块级标签 */
    clear: both;      /* 清除浮动 */
}

clear的值和描述        
    值        描述
    left    在左侧不允许浮动元素。
    right    在右侧不允许浮动元素。
    both    在左右两侧均不允许浮动元素。
---------------------------------------------------------
<div class="dd">

    <div class="d1">

    </div>
    <div class="d2">

    </div>
</div>

<div class="d3">

</div>

十、overflow溢出属性

值	描述
visible	默认值：内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

1 overflow（水平和垂直均设置）

2 overflow-x（设置水平方向，只出现x轴的滚动条）

3 overflow-y（设置垂直方向，只出现y轴的滚动条）

比如我们在一个标签里面写了一堆的文字，然后把标签的高度和宽度设置的比较小的时候，文字就溢出了：

div.d1{
    height: 50px;
    width: 100px;
    border: red solid 3px;
    overflow: auto;     /* 内容被修剪，显示滚动条 */
}


<div class="d1">
在茫茫的大海上，狂风卷记着乌云，在乌云和大海之间。
</div>

圆形头像示例

div.d1{
    width: 100px;
    height: 100px;
    border: red solid 2px;      /* 设置div的边框 */
    border-radius: 50%;         /* 设置边框圆角 */
    overflow: hidden;           /* 内容溢出隐藏 */
}
div.d1>img{
    max-width: 100%;    /* 让img标签按照外层div标签的宽度来显示 */
}


<div class="d1">
<img src="1.jpg">
</div>

总结一点：width宽度设置的时候，直接可以写100px，30%这种百分比的写法，它的宽度按照父级标签的宽度的百分比来计算。

十一、position定位

相对定位：relative 保留原来的空间位置，相对自己原来的位置移动，以左上角为基准

即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，所以不会出现像浮动那种父级标签塌陷的副作用

top：向下移动距离

bottom：向上移动距离

right：向左移动距离

left：向右移动距离

div.d2{
    height: 100px;
    width: 100px;
    background-color: yellow;
    position: relative;
    top: 100px;     /* 相对于自己原来的位置向下移动100px */
    left: 100px;    /* 在相对于自己原来的位置向右移动100px */
}

绝对定位：absolute 不保留自己原来的位置，按照父级标签或者祖先级标签，设置了position 为 relative 的标签的位置进行移动,如果一直找不到设置了设个属性的标签，那么按照浏览器界面来移动

div.d2{
    height: 100px;
    width: 100px;
    background-color: yellow;
    position: absolute;
    top: 100px;     /* 相对浏览器界面位置向下移动100px不保留原来的位置 */
    left: 100px;    /* 在相对浏览器界面位置向右移动100px不保留原来的位置 */
}

固定：fixed 不管页面怎么动，都在整个屏幕的某个位置

对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

div.d2{
    height: 100px;
    width: 100px;
    background-color: yellow;
    position: fixed;
    top: 100px;     /* 相对浏览器界面位置向下移动100px */
    left: 100px;    /* 在相对浏览器界面位置向右移动100px */
}

十二、z-index控制层级

设置对象的层叠顺序。一般用在模态对话框上：

div.d2{
  z-index: 999;
}

1、z-index 值表示谁压着谁，数值大的压盖住数值小的，

2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index

3、z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

4、从父现象：父亲怂了，儿子再牛逼也没用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        /* 最下面层 */
        div.d1 {
            height: 100px;
            width: 100px;
            background-color: red;
        }
        
        /* 中间层 */
        div.d2 {
            position: fixed;
            background-color: black;
            /* top\right\bottom\left都设置为0 */
            /* 意思就是全屏，这个标签把全屏都覆盖了 */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 99;
            opacity: 0.4; /* 设置透明度 */
        }
        
        /* 最上面层 */
        div.d3 {
            height: 400px;
            width: 300px;
            background-color: white;
            position: fixed;
            /* 设置了left：50% 和top：50%，你就会发现，
            你这个标签的左上角相对于页面的左面是50%，上面是50%，
            所以我们还要移动窗口，往左移动标签宽度的一半，
            往上移动高度的一半就行了。就是下面的margin设置 */
            left: 50%;
            top: 50%;
            /* 左下右上，别忘了，往左移动要负值，往上移动要负值，
            因为它的移动是按照自己标签的左上角来移动的。 */
            margin: -200px 0 0 -150px;
            z-index: 100;
        }
    </style>
</head>
<body>


<div class="d1">

</div>
<div class="d2">

</div>
<div class="d3">

</div>

</body>
</html>

十三、opacity透明度

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

方式一：针对背景透明度
div.d1{
    /* 背景颜色或者字体颜色等单独的透明度 */
    background-color: rgba(255,0,0,0.3); 
    height: 100px;
    width: 100px;
}

方式二：整个
div.d2{
    background-color: rgb(255,0,0);
    height: 100px;
    width: 100px;
    opacity: 0.3;  /* 整个标签透明度 */
}

这篇关于CSS总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！