03.CSS介绍

层叠样式表：就是给HTML标签添加养的，让他变的更加的好看

注释：

/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写CSS样式的时候也会用注释来划定样式区域（因为HTML代码多所以对应的CSS代码也会很多）
/* 这是博客园首页的CSS样式文件*/
/*顶部导航条样式*/
/*左侧菜单栏样式*/
/*右侧菜单栏样式*/

# CSS的语法结构
选择器{属性1:值1;
      属性2:值2;
      属性2:值2;
   }

# css的三种引入方式
1.style标签内部直接书写
 <style>
        h1{
            color: aqua;
        }
    </style>
2.link标签引入外部css文件
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: aquamarine">
    你好啊
</h1>

'''
css的学习流程
    1.先学如何查找标签
    css查找标签的凡事你一定要学会
    因为后面所有的框架封装的查找语句都是基于css来的
    2.之后在学如何添加样式
'''

1.css选择器

1.1. 基本选择器

元素选择器

p{color:"red";}
id选择器

#id1{

}
类选择器

.c1{

font-size:14px;

}

p.c1{

color:red;

}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。
通用选择器

*{

color:white;

}

1.2. 组合选择器

在前端我们将标签的嵌套用亲戚关系来表述层级

<div>
    <p>div里面的p</p>
    <p>div p
        <span>div p span</span>
    </p>
    <span>div里面的span</span>
</div>
在此例子中：
div里面的p，span都是div的后代
p是div的儿子，span是p的儿子，span是div的孙子
div是p的父亲，p是span的父亲

后代选择器

/* 后代选择器*/
div span{
    color: red;
}

儿子选择器

/*儿子选择器*/
div>span{color: green}

毗邻选择器

/*毗邻选择器*/
div+p{
    /*同级别紧挨着的下面的第一个标签*/
    color: aqua;
}

弟弟选择器

/*弟弟选择器*/
div~span{
    /*同级别下面所有的span*/
    color: chartreuse;
}

1.3. 属性选择器

属性选择器是以[]作为标志的

含有某个属性

[username]{
               /*所有含有属性名是username的标签背景改为红色    */
           background-color:red ;
           }

含有某个属性并且有某个值

[username='wss']{
               /*找到所有属性名是username并且属性值为wss的标签    */
            background-color: green;
           }

含有某个属性并且有某个值的某个标签

input[username='wss']{
            /*找到所有属性名是username并且属性值是wss的input标签*/
         background-color: antiquewhite;
        }

2. 分组与嵌套

3. 伪类选择器

 a:link{
            /*访问之前的状态*/
            color: red;
        }
        a:hover{
            /*鼠标悬停的状态*/
            color: aqua;
        }
        a:active{
            /*鼠标点击不松开时的状态*/
            color: black;
        }
        a:visited{
            /*访问之后的状态*/
            color: antiquewhite;
        }
        input:focus{
            /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }

4. 伪元素选择器

p:first-letter{
    /*第一个字体改变格式*/
    font-size: 48px;
    color: aqua;
}
p:before{
    /*在文本开头 同css添加内容，用户无法选中*/
    content: '你说的对';
    color: blue;
}
 p:after{
    /*在文本结尾 同css添加内容，用户无法选中*/
    content: '你说的对';
    color: blue;
}

before和after通常都是用来清除浮动带来的影响：父标签塌陷的问题

5. 选择器优先级

'''
id选择器
类选择器
标签选择器
行内式
'''

选择器相同书写顺序不同就近原则：谁离标签近，听谁的
选择器不同行内（内联） > id选择器 > 类选择器 >标签选择器精确度越高优先级越高

6. CSS相关属性

6.1. 长宽设置

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: aqua;
            width: 300px;
            height: 100px;
        }
        span{
            /*行内标签无法设置长宽 就算写了，也不会生效*/
            background-color: green;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <p>p</p>
    <span>span</span>
</body>

6.2. 字体属性

font-family：设置字体

font-size：设置字体大小

font-weight：字体粗细，宽度

color：设置颜色

text-decoration：设置字体装饰

text-indent：可以设置缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-family: '华文宋体','微软雅黑'; /*第一个不生效，就用后面的字体*/
            font-size: 20px;
            text-indent: 32px;  /*缩进32px*/
            font-weight: bolder; /*bolder lighter 100~900 inherit 继承父元素的粗细值*/
          
            /*color: red;  !*直接写颜色英语*!*/
            /*color: #eeeeee;  !*颜色编号*!*/
            /*color: rgb(128,2,45);  !*三基色 数字 范围 0-255*!*/
            /*color: rgba(128,2,45,02);  !*第四个参数是颜色的透明度 范围是0-1*!*/
            /*text-decoration: underline;     !*下划线*!*/
            text-decoration: overline;  /*上划线*/
        }
        a {
            text-decoration: none;  /*无样式,主要给a标签去掉自带下划线*/
        }
    </style>
</head>
<body>
    <p>曹操了草草，草草了曹</p>
    <a href="https://www.mzitu.com">点我</a>

</body>
</html>

6.3. 文字属性

text-align:

center:设置居中

left：左对齐

right：右对齐

justify：两端对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*text-align: center;  !*居中显示*!*/
            /*text-align: left;  !*左对齐*!*/
            text-align: right;  /*右对齐*/
            text-align: justify;  /*两端对齐*/
        }
    </style>
</head>
<body>
    <p>你在叫什么啊。</p>
    <p>讲实话我不比你看的多。</p>
    <p>讲实话上海我不比你呆的时间长。</p>
</body>
</html>

6.4. 边框

边框属性

border-width 边框宽度
border-style 边框样式
border-color 边框颜色

#d1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

通常使用简写方式

#d1 {
  border: 2px solid red;
}

边框样式

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

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#d1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

具体实例，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            background-color: red;
            border-color: red;
        }
        #d1 {
            background-color: green;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆，不一样就是椭圆*/
        }
    </style>
</head>
<body>
    <p>你真帅啊，雀食蟀啊，雀食蟀，你搞的真不赖</p>
    <div id="d1"></div>
</body>
</html>

6.5. display属性

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

值	意义
display: none	隐藏标签不展示到前端页面并且原来的位置也不占有了但是元素还存在于文档上
display: inline	将标签设置为行内标签的特点
display: block	将标签设置成块级标签的特点
display: inline-block	标签既可以在一行显示又可以设置长宽

display:"none"与visibility:hidden的区别：

visibility：hidden：可以隐藏某个元素，但隐藏的元素仍需要占用与未隐藏之前一样的空间，也就是说，该元素虽然被隐藏了，但仍然会影响布局

display:none:可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

6.6. CSS盒子模型

margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
padding：用于控制内容与边框之间的距离
border：围绕内边距和内容外的边框
content：盒子中的内容，显示文本和图像

margin外边距 1、 margin是设置盒子与盒子之间的位置关系 2、边框线以外的距离都可以设置margin 3、使用margin

    单一方向margin
            margin-left
            margin-right
            margin-top
            margin-bottom

    多个方向margin
        1个值   4个方向
        2个值   上下   左右
        3个值   上     左右    下
        4个值   上     右      下   左

    margin-left:
                正值  右移动
                负值  左移动

    margin-top
                正值   下移动
                负值   上移动

4、让块元素水平居中（内联元素不起作用）
  margin：0  auto

  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;

推荐使用简写：

margin: 5px 10px 15px 20px;

常见居中：

 #d1 {
  margin: 0 auto;
}

padding内边距填充1、控制盒子与内容之间的位置关系 2、边框线以内的距离都可以设置padding 3、内边框会撑大盒子，如果设置padding，让盒子不变形，加上多少padding，盒子的宽高就需要减去多少padding 4、padding的设置单一方向padding padding-left padding-right padding-top padding-bottom

多个方向padding 1个值 4个方向 2个值上下左右 3个值上左右下 4个值上右下左

5、padding不能设置负值

#d1 {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推荐使用简写：

#d1 {
  padding: 5px 10px 15px 20px;
}

6.7. float浮动

在CSS中，任何元素都可以浮动

浮动元素会生成一个块级框，而不论它本身是何种元素

关于浮动的两个特点：

浮动的框可以向左或向右移动，知道它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

浮动带来的影响

浮动带来的影响：父标签塌陷

通用的解决浮动带来的影响方法

在写html页面之前先提前写好处理浮动带来的影响的 css代码

.clearfix:after {
    content:' ';
    display:block;
    clear:both;
}
只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可

6.8. clear

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

6.9. 清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

固定高度
伪元素清除法
overflow:hidden

伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

6.10. overflow溢出属性

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

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形头像</title>
    <style>
        body{
            margin: 0;
            background-color: #4e4e4e;
        }
        #d1 {
            height: 400px;
            width: 400px;
            border-radius:50% ;
            border: 5px solid white;
            margin: 0 auto;
            overflow: hidden;
        }
        #d1>img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="d1">
        <img src="22.png" alt="">
    </div>

</body>
</html>

6.11. 定位

静态

所有的标签默认都是静态的static，无法改变位置
相对定位

相对于标签原来的位置做移动relative
绝对定位

相对于已经定位过的父标签做移动（如果没有父标签那么就以body为参照）

当你不知道页面其他标签的位置和参数，只给你一个父标签的参数吗，让你基于该标签，左定位
固定定位

相对于浏览器窗口固定在某个位置

6.11. 验证浮动和定位是否脱离文档流（原来的位置是否还保留）

'''
浮动
相对定位
绝对定位
固定定位
'''
# 不脱离文档流
浮动
# 脱离文档流
相对定位
绝对定位
固定定位

6.12. 模态框

z-index

#i2 {
  z-index: 999;
}

设置对象的层叠顺序。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

eg:百度登录页面其实是三层结构

1.最底部是正常内容（z=0）离用户最远

2.黑色的透明层（z=90）

3.白色的注册区域（z=100）

模态框示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .cover{
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            z-index: 90;
            background-color: rgba(0,0,0,0.5);

        }
        .modal{
            background-color: white;
            height: 200px;
            width: 400px    ;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left:-200px ;
            margin-top:-100px ;
            z-index: 100;
        }

    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆</h1>
    <p>usernmae<input type="text"></p>
    <p>password<input type="text"></p>
</div>
</body>
</html>

6.13. opacity

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

03 CSS介绍的更多相关文章

前端 CSS 介绍
CSS介绍我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离在没有CSS之前,我们想要修改HTML标签的样式需要为每个HTML标签单独定义样 ...
一、CSS介绍
CSS介绍 1.css概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 selector{ property:value } 注:property(属性)大于1之后,property之间用 ...
前端学习之路-CSS介绍，Html介绍，JavaScript介绍
CSS介绍学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式利用标签中的style属性来改变显示样式 & ...
前端基础之css介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
7-[CSS]-css介绍，引入方式
1.CSS介绍:层叠样式表(Cascading Style Sheets) 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离在没有CSS之前 ...
1.css介绍
CSS介绍我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样 ...
Python web前端 03 CSS属性
Python web前端 03 CSS属性一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
CSS介绍&选择器&选择器优先级
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 '''se ...
前端之CSS介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS的语法 CSS语 ...

随机推荐

spring controller获取web前端post数据乱码解决
web.xml文件加上如下代码<filter> <filter-name>CharacterEncodingFilter&l ...
基于Spring实现策略模式
背景: 看多很多策略模式,总结下来实现原理大体都差不多,在这里主要是讲解下自己基于Spring更优雅的实现方案:这个方案主要是看了一些开源rpc和Spring相关源码后的一些思路,所以在此进行总结首 ...
kibana7.x安装配置操作elasticsearch
什么是Kibana? Kibana是一个基于Node.js的Elasticsearch索引库数据统计工具,可以利用Elasticsearch的聚合功能,生成各种图表,如柱形图,线状图,饼图等. 而且还 ...
Typora中本地图片无法上传CSDN解决方案
解决方法本地图片无法上传,我们可以选择使用在线免费图床把想要使用的图先上传到图床后复制对应的MarkDown语句到typora即可在这里,给大家推荐一个图床 [图床链接](Image Uploa ...
【pwn】学pwn日记——栈学习（持续更新）
[pwn]学pwn日记--栈学习(持续更新) 前言从8.2开始系统性学习pwn,在此之前,学习了部分汇编指令以及32位c语言程序的堆栈图及函数调用. 学习视频链接:XMCVE 2020 CTF Pw ...
Tomcat部署启动时发生错误
Tomcat启动后项目地址显示404:源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示. 严重: ContainerBase.addChild: start: org.apache. ...
VictoriaMetrics：使用vmctl来实现vm-storage向victoria-metrics-prod(单机版)迁移数据
前一篇提到了,vm-storage的备份数据,无法被victoria-metrics-prod(单机版)读取. 继续翻文档发现vmctl可以实现这个效果: 1.启动vm-restore恢复数据 vmr ...
看看CSDN的吃相
大伙快来看看CSDN的吃相.
2022GDUT寒训专题一C题
题目题面马在中国象棋以日字形规则移动. 请编写一段程序,给定n×m大小的棋盘,以及马的初始位置 (x, y),要求不能重复经过棋盘上的同一个点,计算马可以有多少途径遍历棋盘上的所有点. 输入格式 ...
理解cpu load
三种命令 1. w 2. uptime 3. top CPU负载和CPU利用率的区别 1)CPU利用率:显示的是程序在运行期间实时占用的CPU百分比 2)CPU负载:显示的是一段时间内正在使用和等待使 ...

03 CSS介绍