前端笔记2 CSS

如何学习css

css 就是给HTML添加样式的，让他变得更好看

1. 先学习如何查找标签通过选择器
2. 在学习css的相关属性

注释语法 /* 需要注释的内容 */

语法结构：
   <style>
       选择器 {
            属性名：属性值；
            属性名：属性值；
            属性名：属性值；
            属性名：属性值；
        }
    </style>

css的三种引入方式

　　1.style 内部标签直接书写

<style>
    h1 {
        color:red;
    }

</style>

　　2.link标签引入外部css文件（最正规，HTML，css，js全部分开，解耦合）

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

　　3.行内式

在标签的内部直接书写（只是临时用）

<body>
    <h1 style="color:red">
        老板好，要洗脚吗
    </h1>
</body>

选择器：

1. 基本选择器（重要）

　　id选择器　　　　　　在style标签下，#起手+id值（用的多）
        class选择器　　　　 .（这是个点）起手，加类名　　　　　　　（用的多）
        元素/标签选择器　　标签名起手，加{}，
        通用选择器　　　　　*起手，基本不用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*id选择器*/
        #d1 {
            color:green; /*将d1标签内的字体变成绿色*/这是id选择器
        }

    </style>
</head>
<body>
    <div id="d1">div
        <p>我在div里面</p>
        <span>我在span里面</span>
    </div>
    <p id="d2">ppp</p>
    <span id="d3">span111</span>
    <span id="d4">span22</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器*/
        .c1{
            color:red;/*找到class值里面包含c1类的标签*/
        }
    </style>
</head>
<body>
    <div id="d1" class="c1 c2">div
        <p>我在div里面</p>
        <span>我在span里面</span>
    </div>
    <p id="d2" class="c1 c3">ppp</p>
    <span id="d3" class="c2">span111</span>
    <span id="d4" class="c3">span22</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*元素/标签选择器 */
        span{   /*找到所有的span，都要变成红色*/
            color: red;
        }
    </style>
</head>
<body>
    <div id="d1" class="c1 c2">div
        <p>我在div里面</p>
        <span>我在span里面</span>
    </div>
    <p id="d2" class="c1 c3">ppp</p>
    <span id="d3" class="c2">span111</span>
    <span id="d4" class="c3">span22</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通用选择器 */
        *{  /*将所有html页面上的标签全部找到*/
            color:red;
        }
    </style>
</head>
<body>
    <div id="d1" class="c1 c2">div
        <p>我在div里面</p>
        <span>我在span里面</span>
    </div>
    <p id="d2" class="c1 c3">ppp</p>
    <span id="d3" class="c2">span111</span>
    <span id="d4" class="c3">span22</span>
</body>
</html>

2. 属性选择器

　　　　以中括号[ ]起手的作为标志的

　　　　1.含有某个属性

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [username] { /*将左右含属性名username标签的背景色改为红色*/
            background-color: red;
        }

        [username='jason'] {    /*找到username是json老师标签，黄色*/
            color: yellow;
        }
        input[username='egon']{    /*找到所有属性名是username，属性值是egon的input标签*/
            color:green;
        }
    </style>
</head>
<body>
    <input type="text" username>
    <input type="text" username="ly">
    <input type="text" username="egon">
    <p username="jason"> 杰森老师</p>
    <div input username="kevin">凯文老师</div>
</body>
</html>

3. 伪类选择器

# 针对的是a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {    /*链接的初始化颜色*/
            color:red;
        }
        a:hover {   /*鼠标悬浮的颜色*/(重点）
            color:green;
        }
        a:active {  /*鼠标点击不松开的状态*/
            color: black;
        }
        a:visited { /*鼠标点击之后的状态*/
            color: darkgrey;
        }
        input:focus { /*input框获取焦点（就是鼠标点击进去之后，显示出来的颜色）*/
            background-color: green;
        }
    </style>
</head>
<body>
<a href="http:\\www.mzitu.com">这是妹子图</a>
<p>这里不写就是换行</p>
<input type="text">
</body>
</html>

4. 伪元素选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter { /*第一个字为48px大小，而且是绿色*/
            font-size: 48px;
            color: green;
        }
        p:before {  /*在文本开头用css添加内容，且无法选中*/
            content: '我是选不中的';
            color: pink;
        }
        p:after {   /*在文本结尾用css添加内容，且无法选中*/
            content: '我也是选不中的';
            color: orange;
        }
    </style>
</head>
<body>
    <p>我是P标签</p>
</body>
</html>

选择器优先级

1.在选择器相同的情况下，

　　就近原则，谁离的近，听谁的，行内式选择器有限期最高

2.在选择器不同的情况下

　　行内式 > id选择器 > class类选择器 > 标签选择器

　　精度越高越有效

设置长宽

块级元素内，可以设置长宽

行内元素内，不能设置长宽

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            background-color: red;
            height: 200px;
            width: 100px;
        }
        span {/*因为span是行内标签，所以设置了也没用，而且也不报错*/
            background-color: green;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
<p>块级标签</p>
<span>行内标签</span>
</body>
</html>

字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-family: 微软雅黑; /*设置字体*/
            font-weight: bolder;
            /*设置字体 boder(加粗）lighter（细）inherit(集成父元素的粗细值)*/
            font-size: large; /*设置字体大小*/
            color: #FF5945; /*可以写颜色编号*/
            color: red; /*可以直接写英文*/
            color: rgb(122,122,122);  /*三基色 范围0-255*/
            color: rgba(41,111,111,0.8) /*第四个参数是透明度*/
            /*
            当你想要用其他颜色，其他的颜色时候，
            1.pycharm提供取色器
            2.用QQ，微信等提供的截图（感觉这个更方便）
            */
        }
    </style>
</head>
<body>
<p>块级标签</p>
<span>行内标签</span>
</body>
</html>

文字属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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; /* 没有任何样式，可以用来去除a标签默认的下划线*/
            /*在HTML中，右很多标签渲染出来的样式效果是一样的，但是语义不一样*/
            font-size: 16px;
            text-indent: 32px;/*首行缩进32px（正好2个字）*/
        }
    </style>
</head>
<body>
<p>块级标签</p>
<span>行内标签</span>
</body>
</html>

背景属性

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 800px;
            width: 999px;
            background-color: green;
            /*背景图片*/
            background-image: url("12111.png"); /*默认全部铺满*/
            background-repeat: repeat;
            /*repeat默认铺满，no-repeat是不平铺，就一张图*/
            /*浏览器是三维立体结构，z轴只想用户，越大用户越清晰*/
            background-repeat:repeat-x; /*在X轴方向平铺*/
            background-repeat:repeat-y; /*在y轴方向平铺*/
            background-position: center center; /*是2个参数，左右和上下都居中*/
            /*如果出现了多个属性名是一样的情况下，一般清下都可以简写，只写前缀,后面跟上参数，没有顺序要求*/
            background:green no-repeat url("12111.png") center center;
        }

    </style>
</head>
<body>
    <div>
        呵呵哈哈哈
    </div>
</body>
</html>

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            background-color: green;
            border: 5px;
            border-style: solid;/*边框样式*/
            border-color: red;/*边框颜色*/
        }
        div {
            border:3px solid red;
            height: 300px;
            width: 300px;
            border-radius: 50%;/*就是画个圆，长宽一样就是园，长宽不一样就是椭圆*/
        }

    </style>
</head>
<body>
<p>
    啊啊啊啊啊啊啊啊
</p>
<div>
    采菊东篱下，悠然见南山
</div>
</body>
</html>

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            display: none; /*d1就隐藏了，不展示在前端页面，并且为之也不再占有*/
            display: inline; /*将标签显示为行内标签的特点，不能设置长宽高度*/
        }
        #d2 {
            display: inline;
        }
        #d3 {
            display: block; /*可以把行内标签 设置成块级标签的特点*/
        }
        #d4 {
            display: inline-block;/*既可以显示在一行，也可以有长宽*/
        }
    </style>
</head>
<body>
    <div style="visibility: hidden">  /*既隐藏又占位置*/
        哦吼是啥是
    </div>
    <div id="d1">
        采菊东篱下，悠然见南山
    </div>
    <div id="d2">
        床前明月光，疑是地上霜
    </div>
    <p id="d3">
        举头望明月
    </p>
    <p id="d4">
        低头思故乡
    </p>
</body>
</html>

盒子模型

以快递盒为例（2个盒子套一起）

　　快递盒与快递盒之间的距离（标签与标签之间的距离 margin 外边距）

　　盒子的厚度（标签的边框 border）

　　盒子里面物体到盒子的距离（内容到边框的距离 padding 内边距）

　　物体的大小（内容 content）

　　如果要调整标签与标签之间的距离，就可以直接调整margin

　　浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会线将body的margin去除（在style中，body为对象使用margin参数）

浮动

页面的最表是三位的，浮动的元素没有块级一说，浮动的元素再Z轴上，原本多大，浮动起来就占多大

设计页面时，一般先用浮动占了位置提前规划好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            height: 200px;
            width: 200px;
            background-color: orange;
            float:left      /*浮动  浮动左边*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: blue;
            float: right;  /*浮动  浮动右边*/
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

解决塌陷问题的固定模板（重要）

只需要在head标签内，提前写好一个伪类选择器.clearfix，哪个元素他先，就把他的class=clearfix 就可以解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            border: 3px solid black;
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: blue;
            float: left;  /*浮动  浮动左边*/
        }
        #d3 {
            height: 200px;
            width: 200px;
            background-color: green;
            float: left;  /*浮动  浮动左边*/
        }
        .clearfix:after {   /*清楚浮动的固定模板的伪元素选择器*/
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div id="d2"></div>
    <div id="d3"></div>
</div>
</body>
</html>

溢出属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            height: 100px;
            width: 100px;
            background-color: green;
            border: 3px solid red;
            /*overflow: hidden; !* 溢出部分直接隐藏 *!*/
            /*overflow: visible; !* 溢出部分还是展示，太丑了不用，默认就是这样 *!*/
            overflow: scroll; /* 以滚动条的形式展出*/
            /*overflow: auto;  !* 上下左右2个滚动条 *!*/
        }
    </style>

</head>
<body>
<p>采菊东篱下youren jianna采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下</p>
</body>
</html>

制作圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            background-color: pink;
        }
        div {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 2px solid red;
            margin: 0 auto;
            overflow: hidden;
        }
        div img{
            width: 100%; /*是父标签宽度的100%*/
        }
    </style>

</head>
<body>
<div>
    <img src="12111.png" alt="">
</div>
</body>
</html>

定位

静态：所有的标签都是静态static的，无法改变位置

相对定位（了解）：相对于标签原来的位置，做移动 relative

绝对定位（常用）：相对于已经定位过的父标签，做移动（如果没有父标签，那么就以body做参照）eg：相对小米网站购物车

当你不知道页面其他元素的定位和参数时，让你给予改标签做定位，这时候用绝对定位

固定定位（常用）：相对于浏览器窗口固定在某个位置 eg：右侧小广告

绝对定位
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            height: 50px;
            width: 50px;
            border: 2px solid blue;
            position: relative;/*设置了position，说明已经是被定位过了，可以其他标签做绝对定位*/
        }
        #d2 {
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;/*基于已经定位过的父标签来进行绝对定位*/
            left: 50px;
            top:50px;
        }
    </style>
</head>
<body>
<div>
    <div id="d1">
        <div id="d2">

        </div>

    </div>
</div>
</body>
</html>

绝对定位
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            bottom: 10px; 
            position: fixed; /*是根据浏览器，固定在浏览器的固定位置*/
        }

    </style>
</head>
<body>
<div id="d1">
    回到顶部
</div>
</body>
</html>

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

不脱离文档流：相对定位

脱离文档流：浮动，绝对定位，固定定位

z-index模态框

eg：百度的登录页面，点击了登录之后，3层结构（最底部，黑色透明去，登录框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.1);
            z-index: 10;
        }
        .modal {
            background-color: white;
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            position: fixed;
            z-index: 20;
            margin-left: -100px;
            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="password">
    </p>
</div>

</body>
</html>

posted @ 2022-03-13 04:21 Damon1899 阅读(57) 评论(0) 收藏举报

刷新页面返回顶部

Damon1899