CSS基础

CSS

层贴样式表:就是给HTML标签添加样式的,让它变的更加的好看

CSS学习流程

  1.先学如何查找标签
css查找标签的方式你一定要学会
因为后面所有的框架封装的查找语句都是基于css来的
css选择器很简单很好学不要有压力!!!

  2.之后再学如何添加样式

注释:

  单行注释:

/*单行注释*/

  多行注释:

/*
多行注释1
多行注释2
多行注释3
*/

书写格式:

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)

/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

CSS的语法结构

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

CSS的三种引入方式

 1.style标签内部直接书写(为了教学演示方便我们用第一种)

<style>
	h1  {
	color: burlywood;
	}
</style>

 2.link标签引入外部css文件(最正规的方式 解耦合)

<link rel="stylesheet" href="mycss.css">

 3.行内式(一般不用)

<h1 style="color: green">老板好</h1>

CSS选择器

基本选择器

# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器
<style>
        /*id选择器*/
        /*#d1 {  !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
        /*    color: greenyellow;*/
        /*}*/
        /*类选择器*/
        /*.c1 {  !*找到class值里面包含c1的标签*!*/
        /*    color: red;*/
        /*}*/
        /*元素(标签)选择器*/
        /*span {  !*找到所有的span标签*!*/
        /*    color: red;*/
        /*}*/
        /*通用选择器*/
        /** {  !*将html页面上所有的标签全部找到*!*/
        /*    color: green;*/
        /*}*/
</style>

组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
	<div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
  </div>
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
"""

# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器

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

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

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

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

属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

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

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

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

分组与嵌套

div,p,span {  /*逗号表示并列关系*/
            color: yellow;
        }
#d1,.c1,span  {
            color: orange;
        }

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: black;
        }
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }
        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }
        
        input:focus {  /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>

总结:

状态 功能
link 访问之前的状态
hover 鼠标悬浮态
active 鼠标点击不松开的状态(激活态)
visited 访问之后的状态
focus input框获取焦点(鼠标点了input框)

伪元素选择器

<style>
	p:first-letter { /*给文章第一个字调样式*/
            font-size: 48px;
            color: orange;
        }
	p:before {  /*在文本开头 同css添加内容*/
            content: '你说的对';
            color: blue;
        }
	p:after {
            content: '雨露均沾';
            color: orange;
        }
</style>

总结:

功能 简介
first-letter 给文章第一个字调样式
before 文本开头用CSS添加内容
after 文本结尾用CSS添加内容(一般用作注释)

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

选择器优先级

/*
id选择器
类选择器
标签选择器
行内式
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        #d1 {
            color: aqua;
        }
        .c1 {
            color: orange;
       }
        p {
            color: red;
        }
    </style>
<!--    <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
    <p id="d1" class="c1" style="color: blue">喵喵喵喵喵喵喵~</p>
</body>
</html>

总结:

选择器相同:

  因为页面是从上往下加载的,由于书写顺序不同,所以遵循就近原则,谁离标签更近就听谁的。

选择器不同:

  越精度越高优先级越高,也就是说:行内式 > id选择器 > 类选择器 > 标签选择器

  

CSS属性相关

<style>
        p {
            background-color: red;
            height: 200px;
            width: 400px;
        }
        span {
            background-color: green;
            height: 200px;
            width: 400px;
        }
</style>

知识点总结:

  行内标签无法设置长宽,就算你写了,也不会生效

字体属性

p {
            /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

            /*font-size: 24px;  !*字体大小*!*/

            /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/

            /*color: red;  !*直接写颜色英文*!*/
            /*color: #ee762e;  !*颜色编号*!*/
            /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/
            /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/

            /*当你想要一些颜色的时候 可以利用现成的工具
                1 pycharm提供的取色器
                2 qq或者微信截图功能
  							也可以多软件结合使用 
            */
        }

知识点总结:

功能 简介
font-family 控制字体
font-size 字体大小
font-weight 字体属性
color 颜色:中文、#eee762e(颜色编号)、rgb、rgba

注:当你想要一些颜色的时候 可以利用现成的工具
  1、Pycharm提供的取色器
  2、QQ或者微信截图功能
  3、也可以多软件结合使用

文字属性

<style>
p {
            /*text-align: center;  !*居中*!*/
            /*text-align: right;*/
            /*text-align: left;*/
            /*text-align: justify;  !*两端对齐*!*/

            /*text-decoration: underline;  下划线*/
            /*text-decoration: overline;   上划线*/
            /*text-decoration: line-through;   删除线*/
            /*text-decoration: none;  没有任何样式*/
            /*在html中 有很多标签渲染出来的样式效果是一样的*/
            font-size: 16px;
            text-indent: 32px;   /*缩进32px*/
        }
        a {
            text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
        }
</style>

知识点总结:

功能 简介
text-align 文字位置
text-decoration 文字装饰
text-decoration: none 给a标签去掉自带的下划线
text-indent 首行缩进

注:

  在html中,有很多标签渲染出来的样式效果是一样的

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #d1 {
            height: 500px;
            background-color: red;
        }
        #d2 {
            height: 500px;
            background-color: green;
        }
        #d3 {
            height: 500px;
            background-image: url("111.png");
            background-attachment: fixed;
        }
        #d4 {
            height: 500px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>

知识点总结:

功能 简介
background-image:url(图片地址) 默认全部铺满
background-repeat:no-repeat 不平铺(默认平铺)
background-repeat:no-repeat-x(y) 往左铺(右)
background-position: == == 控制图片位置,第一个参数控制左右,第二个控制上下(center center 表示居中)

注:

  1、其实浏览器不是一个平面,而是一个三维立体结构,Z轴指向用户,越大离用户越近

  2、如果出现了多属性名都是一样的情况,一般情况下都可以简写,只写前缀,而且只需要填上你所需要的参数即可,为止没有关系,参数个数也不做限制,加就是显示,不加就是默认。

    如:background:red no-pepeat url("111.png") center center

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        p {
            background-color: red;
            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
            /*border-left-width: 5px;*/
            /*border-left-color: red;*/
            /*border-left-style: dotted;*/

            /*border-right-width: 10px;*/
            /*border-right-color: greenyellow;*/
            /*border-right-style: solid;*/

            /*border-top-width: 15px;*/
            /*border-top-color: deeppink;*/
            /*border-top-style: dashed;*/

            /*border-bottom-width: 10px;*/
            /*border-bottom-color: tomato;*/
            /*border-bottom-style: solid;*/
            border: 3px solid red;  /*三者位置可以随意写*/

        }
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }
    </style>
</head>
<body>
    <p>穷人  被diss到了  哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>
</body>
</html>

知识点总结:

功能 简介
border-width 边框长度
border-style 边框样式
border-color 边框颜色
border-radius: 50% 边框是圆

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*#d1 {*/
        /*    !*display: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
        /*    display: inline;  !*将标签设置为行内标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: inline;*/
        /*}*/
        /*#d1 {*/
        /*    display: block;  !*将标签设置成块儿级标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: block;*/
        /*}*/
        /*#d1 {*/
        /*    display: inline-block;*/
        /*}*/
        /*#d2 {*/
        /*    display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!*/
        /*}*/
    </style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>  
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>

知识点总结:

功能 简介
display: none 隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上
display: inline 将标签设置为行内标签的特点
display: block 将标签设置成块儿级标签的特点
display: inline-block 标签即可以在一行显示又可以设置长宽
visibility: hidden 单纯的隐藏 位置还在

盒子模型

就以快递盒为例:  

  快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
  盒子的厚度(标签的边框 border)
  盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
  物体的大小(内容 content)

  如果你想要调整标签与标签之间的距离 你就可以调整margin

  浏览器会自带8px的margin,一般情况下我们在写页面的时候,上来就会先将body的margin去除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;  /*上下左右全是0
            /*margin: 10px 20px;  !* 第一个上下 第二个左右*!*/
            /*margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*!*/
            /*margin: 10px 20px 30px 40px;  !*上 右 下 左*!*/
        }
        /*p {*/
        /*    margin-left: 0;*/
        /*    margin-top: 0;*/
        /*    margin-right: 0;*/
        /*    margin-bottom: 0;*/
        /*}*/

        #d1 {
            margin-bottom: 50px;
        }


        #d2 {
            margin-top: 20px;  /*不叠加 只取大的*/
        }

        #dd {
            margin: 0 auto;  /*只能做到标签的水平居中*/
        }
        p {
            border: 3px solid red;
            /*padding-left: 10px;*/
            /*padding-top: 20px;*/
            /*padding-right: 20px;*/
            /*padding-bottom: 50px;*/

            /*padding: 10px;*/
            /*padding: 10px 20px;*/
            /*padding: 10px 20px 30px;*/
            /*padding: 10px 20px 30px 40px;*/  /*规律和margin一模一样*/
        }
    </style>
</head>
<body>
<!--    <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!--    <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!--    <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->

<p>ppp</p>

</body>
</html>

浮动

/*浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大
只要是设计到页面的布局一般都是用浮动来提前规划好*/
<style>
        body {
            margin: 0;
        }
        #d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;  /*浮动  浮到空中往左飘*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: greenyellow;
            float: right;   /*浮动 浮到空中往右飘*/
        }
</style>

解决浮动带来的影响

# 浮动带来的影响
会造成父标签塌陷的问题

"""
解决浮动带来的影响 推导步骤
	1.自己加一个div设置高度
	2.利用clear属性
		#d4 {
            clear: left;  /*该标签的左边(地面和空中)不能有浮动的元素*/
        }
  3.通用的解决浮动带来的影响方法
  	在写html页面之前 先提前写好处理浮动带来的影响的 css代码
  	.clearfix:after {
            content: '';
            display: block;
            clear:both;
        }
    之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
    上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""

溢出属性

p {
            height: 100px;
            width: 50px;
            border: 3px solid red;
            /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/
            /*overflow: hidden;  !*溢出部分直接隐藏*!*/
            /*overflow: scroll;  !*设置成上下滚动条的形式*!*/
            /*overflow: auto;*/
        }

定位

  • 静态

    所有的标签默认都是静态的static,无法改变位置

  • 相对定位(了解)

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

  • 绝对定位(常用)

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

    eg:小米网站购物车

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

  • 固定定位(常用)

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

    eg:右侧小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
            left: 50px;  /*从左往右   如果是负数 方向则相反*/
            top: 50px;  /*从上往下    如果是负数 方向则相反*/
            /*position: static;  !*默认是static无法修改位置*!*/
            position: relative;
            /*相对定位
            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然你哪怕没有动 但是你的性质也已经改变了
            */
        }

        #d2 {
            height: 100px;
            width: 200px;
            background-color: red;
            position: relative;  /*已经定位过了*/
        }
        #d3 {
            height: 200px;
            width: 400px;
            background-color: yellowgreen;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        #d4 {
            position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
            bottom: 10px;
            right: 20px;

            height: 50px;
            width: 100px;
            background-color: white;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<!--    <div id="d1"></div>-->

<!--<div id="d2">-->
<!--    <div id="d3"></div>-->
<!--</div>-->

<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>

</body>
</html>

ps:浏览器是优先展示文本内容的

验证浮动和定位是否脱离文档流(原来的位置是否还保留)

"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
	1.相对定位
# 脱离文档流
  1.浮动
  2.绝对定位
  3.固定定位
  
<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->

<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->

<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>

z-index模态框

eg:百度登陆页面 其实是三层结构
  1.最底部是正常内容(z=0)  最远的
  2.黑色的透明区(z=99)  		中间层
  3.白色的注册区域(z=100)  离用户最近

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .modal {
            background-color: white;
            height: 200px;
            width: 400px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -200px;
            margin-top: -100px;

        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆页面</h1>
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <button>点我点我~</button>
</div>
</body>
</html>

透明度opacity

它不单单可以修改颜色的透明度还同时修改字体的透明度

比较:

rgba只能影响颜色
opacity可以修改颜色和字体

posted @ 2020-05-12 21:19  Lance_王  阅读(164)  评论(0编辑  收藏  举报