码迷,mamicode.com
首页 > Web开发 > 详细

前端入门04——CSS

时间:2020-05-14 19:17:01      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:use   arm   边框   ted   stat   Fix   tle   focus   type   

昨日内容回顾

  • 分组与嵌套

    # 多个选择器可以并列公用一套css样式
    div,p,span {}
    # 不同选择器之间也可以混合使用
    .c1,#d1>span {}

     

  • 伪类选择器

    a:link {}
    a:hover {}  # 需要记忆
    a:active {}
    a:visited {}
    input:focus {}  # input框获取焦点

     

  • 伪元素选择器

    p:first-letter {}  # 通过css加文本内容 但是无法选中
    p:before {}
    p:after {}
    # ps:before和after多用于清除浮动带来的负面影响

     

  • 选择器优先级

    """
    选择器相同 就近原则
    ?
    行内 > id > class > 标签
    精确度越高说话越硬
    """
    ps:!important强制让标签采用你的样式 不推荐使用

 

  • 宽和高

    width
    height
    # 块儿级标签的宽度不修改的情况下默认占浏览器一整行,块儿级标签的高度也是取决于标签内部的文本的高度 但是可以通过css设置
    # 行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效

 

  • 字体属性

    # 字体样式 草书 行书 ...
    font-family
    # 字体大小
    font-size
    # 字重
    font-weight
    # 文本颜色
    1 直接写颜色英文
     2 写颜色编号 #4e4e4e
     3 写颜色的三基色 rgb(128,128,128)  # 范围0-255
     4 可以给颜色加透明度 rgba(128,128,128,0.5)  # 范围0-1
    ps:可以用pycharm 微信 qq等软件快速的获取你想要的颜色

 

  • 文字属性

    # 文字对齐
    text-align
    center
    # 文字装饰 记忆 主要就是用来给a标签去掉自带的下划线
    text-decoration
    none
    # 首行缩进
    text-indent

 

  • 背景属性

    # 背景色
    backgroud-color
    # 背景图片
    background:#fff url() no-repeat center center
    """
    ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀
    """
    ps:在调样式的时候 可以借助于浏览器快速的微调,然后讲调整好的参数修改到css样式中
     
    # 背景图片实际应用的案例

 

  • 边框border

    # 任何一个标签都有上下左右四个方向的边框
    border-width
    border-style
    border-color
    简写
    border
    ?
    # 画圆
    border-radius:50%

 

  • display属性

    # 能够让标签具有自身没有的属性和特征
    display
    none  隐藏 并且原来的位置也没了
     inline
     block
     inline-block
    ps:visibility:hidden只隐藏 位置还在

 

  • css盒子模型

    # 1 外边距(标签与标签之间的距离)          margin
    # 2 边框 border
    # 3 内边距/内填充 padding
    # 4 内容 content
    ?
    """
    body标签默认自带8px的margin
    ?
    margin:
    10 上下左右
    10 20 上下 左右
    10 20 30 上 左右 下
    10 20 30 40 上 右 下 左
    padding:
    10 上下左右
    10 20 上下 左右
    10 20 30 上 左右 下
    10 20 30 40 上 右 下 左
    """

 

  • 浮动float

    """
    只要是前期页面布局 一般都是用浮动来设计页面
    能够让标签脱离正常的文档流漂浮到空中(距离用户更近)
    ?
    浮动的元素没有块儿级和行内一说 标签多大浮动起来之后就占多大
    """

 

 

 

 

 

今日内容

  • 解决浮动带来的影响

  • 溢出属性

  • 定位

  • 验证浮动和定位是否脱离文档流

  • z-index模态框

  • 透明度opacity

  • 简单博客园首页搭建

  • JavaScript编程语言开头

 

 

今日内容详细

解决浮动带来的影响

# 浮动带来的影响
会造成父标签塌陷的问题
?
"""
解决浮动带来的影响 推导步骤
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;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->

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

<div style="height: 100px;width: 200px;"></div>
<div style="height: 100px;width: 200px;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;"></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可以修改颜色和字体

opacity: 0.5;






 

 

 

 

 

 

前端入门04——CSS

标签:use   arm   边框   ted   stat   Fix   tle   focus   type   

原文地址:https://www.cnblogs.com/lucky-cat233/p/12890622.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!