ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS总结

2021-06-04 18:02:19  阅读:113  来源: 互联网

标签:总结 color 标签 100px width background div 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;  /* 整个标签透明度 */
}

 

标签:总结,color,标签,100px,width,background,div,CSS
来源: https://www.cnblogs.com/XiaoYang-sir/p/14850652.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有