css学习笔记-黑马程序员前端视频

编程语言 2023-04-09 18:44:59 阅读次数: 0

css学习笔记-黑马程序员前端视频


以下是在b站上学习的黑马程序员的前端视频，记录一下学习笔记，用于自己复盘，有需要学习的可以去b站学习原版视频

1. css常见属性：

css写在style标签中

  • color:文字颜色
  • font-size:字体大小
  • background-color:背景颜色
  • width:宽度
  • height:高度
    <style>
        p {
      
      
            /* 文字颜色变红色 */
            color: red;
            /* 字变大 px:像素 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: green;
            /* width  height; */
            width: 400px;
            height: 400px;
        }
    </style>

2. css引入方式：

  1. 内嵌式：css写在style标签中(只应用于当前页面，小案例)
<head>
    <style>
    div {
      
      
         color: red;
    }
    </style>
</head>
<body>
    <div>这个div是什么颜色</div>
</body>
  1. 外联式：css写在一个单独的.css文件中（应用于多个页面，项目中使用）
<head>
    <!-- 关系: 样式表 -->
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <!-- css外联式 -->
    <p>这是p标签</p>
</body>

<!-- .css: -->
p {
    color: red;
}
  1. 行内式：css写在标签的style属性中（作用于当前标签，配合js使用）
<body>
    <div style="color: green; font-size: 30px;">这是div标签</div>
</body>

3.基础选择器

3.1 标签选择器

标签名 { css属性名：属性值； }

  1. 标签选择器选择的是一类标签，而不是单独某一个
  2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
<head>
    <style>
        /* 选择器 {} */
        /* 标签选择器 就是 以标签名命名的选择器 */
        p {
      
      
            color: red;
        }
        /* 标签选择器 选中所有的这个标签都生效css */
    </style>
</head>
<body>
    <p>pppppppp</p>
</body>

3.2 类选择器（最常用）

.类名{css属性名： 属性值}

  1. 所有标签上都有class属性
  2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
  3. 一个标签可以同时有多个类名，类名之间以空格隔开
<head>
    <style>
        .red {
      
      
            color: red;
        }

        .size {
      
      
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 类: 定义 和 使用才能生效 -->
    <!-- 一个标签可以使用多个类名 , 需要空格隔开即可 -->
    <p class="red size">222</p>
    <div class="red">这个标签文字也要变红</div>
</body>

3.3 id选择器

#id属性值{css属性名： 属性值}

  1. 所有标签上都有id属性
  2. 一个页面中id不可重复
  3. 一个标签只可以有一个id属性值
  4. 一个id选择器只能选中一个标签
<head>
    <style>
        /* 定义id选择器 */
        #blue {
      
      
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">这个div文字是蓝色的</div>
</body>

3.4 通配符选择器

<head>
    <style>
        * {
      
      
            color: red;
        }
    </style>
</head>
<body>
    <div>div</div>
    <h1>h1</h1>
    <span>span</span>
    <p>pppp</p>
</body>

4.字体样式

<head>
    <style>
        p {
      
      
            /* 字体大小 */
            font-size: 30px;
            /* 字体粗细-加粗：bold/700，不加粗：normal/400 */
            font-weight: 700;
            /* 字体样式：italic倾斜,normal正常 */
            font-style: italic;
            /* font-family: 宋体;微软雅黑, 黑体, sans-serif */
            font-family: 微软雅黑;
            /* 层叠性: 后面的覆盖前面的属性 */
            /* 字体颜色*/
            color: red;
            /* font连写属性: style  weight  size  字体; */
            font: italic 700 100px 微软雅黑;
            /* 文本缩进：1em(一个字)*/
            text-indent: 2em;
            /* 文本对齐方式：left center right; */
            text-align: center;
            /* 文本修饰：underline下划线 line-through删除线 overline上划线 none无线; */
            text-decoration: none;
            /* 行高line-height: 50px/1.5; */
            line-height: 1.5;
            /* font连写：66px 宋体 倾斜 加粗 行高是2倍 */
            font: italic 700 66px/2 宋体;
            /* 垂直居中技巧: 设置行高属性值 = 自身高度属性值 */
            /*盒子宽度，高度，背景颜色*/
            width: 552px;
            height: 400px;
            background-color: pink;
            /* 盒子垂直居中技巧: 设置行高属性值 = 自身高度（背景不是字号）属性值 */
            line-height: 400px;
            /* 盒子水平居中技巧: */
            margin: 0 auto;
        }
            /* 控制placeholder的样式 */
		.search input::placeholder {
      
      
    		font-size: 14px;
    		color: #bfbfbf;
		}
    </style>
</head>
<body>
    <p>段落文字</p>
</body>

混淆点：
文本，行内元素，行内块因素的水平居中：text-align: center;
块级元素的居中：margin: 0 auto;
单行文本垂直居中：line-height

5.选择器进阶

5.1 复合选择器

  • 后代选择器（选择器1 选择器2 { css }），常用的选择器类型
<head>
    <style>
        /* 选中div中的所有a，p中的a也会被选中 */
        div a {
      
      
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
  • 子代选择器（选择器1 > 选择器2 { css }）
<head>
    <style>
        /* 选中div中的a */
        div>a {
      
      
            color: red;
        }
    </style>
</head>
<body>
    <div>
        /* 只选中div中的a，不选p中的a */
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>

5.2 并集选择器

选择器1 ， 选择器2 { css }，同时选择多个选择器设置，用于浏览器布局相似的多个模块，可以优化浏览器处理速度

<head>
    <style>
        /* p div span h1 文字颜色是红色 */
        p, 
        div, 
        span, 
        h1 {
      
      
            color: red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>

    <h2>h2</h2>

5.3 交集选择器

选择既被选择器1选中又被选择器2选中的标签

<head>
    <style>
        p.box {
      
      
            color: red;
        }
    </style>
</head>
<body>
    <!-- 找到第一个p,带box类的, 设置文字颜色是红色 -->
    <p class="box">这是p标签:box</p>
</body>

5.4 hover伪类选择器

鼠标悬停时的状态，常用类型
选择器：hover {css}

<head>
    <style>
        /* 用户鼠标悬停到div的时候, 文字是绿色 */
        div:hover {
      
      
            color: green;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>

6.背景属性

css布局可以将所有内容看作是一个盒子，大盒子内部装小盒子，布局也就是盒子之间的排列

/* 盒子宽度，高度，背景颜色 */
width: 400px;
height: 400px;
/* 红绿蓝三原色, a是透明度0-1 */
background-color: pink;
background-color: #ccc;
background-color: rgba(0, 0, 0, .5);
/*背景图片，默认水平和垂直方向平铺*/
background-image: url(./images/1.jpg);
/*背景平铺属性*/
/*repeat:平铺，no-repeat:不平铺，repeat-x:沿着水平方向平铺，repeat-y:沿着垂直方向平铺*/
background-repeat:repeat
/*背景位置:水平方向位置 垂直方向位置;或者用像素表示*/
/*水平方向：left center right*/
/*垂直方向：top center bottom*/
background-position:left top;
background-position: 50px 100px;
/*背景复合属性连写，不分前后顺序*/
/*背景色  背景图  背景图平铺  背景图位置 */
background: pink url(./images/1.jpg) no-repeat center bottom;

7.元素显示模式

当设置行内标签宽高不生效时，需要按照实际需求转为块级元素或转为行内块元素

  1. 块级元素(display: block;)
  • 一行只能显示一个
  • 可以设置宽高
    块级标签：div，p，h
  1. 行内元素(display: inline;)
  • 一行可以显示多个
  • 不可以设置宽高
    行内标签：a，span
  1. 行内块元素(display: inline-block;)
  • 一行可以显示多个
  • 可以设置宽高
  • 行内块标签：input，textarea

tips

  • 可以使用括号内的语句改变元素默认的显示特点，复合布局要求
  • 块级元素可以嵌套其他元素，p标签不要嵌套div，p，h等块级元素
  • a标签可以嵌套任意元素，除了a标签

8.css三大特性

继承性，层叠性，优先级

8.1 继承性

优点：减少代码量

  • 控制文字的属性都能继承; 不是控制文字的都不能继承
  • 元素有浏览器默认样式，但优先显示浏览器的默认样式
  • a标签的color会继承失效
  • h系列标签的font-size会继承失效

可以继承的属性：

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height

8.2 层叠性

  1. 给同一个标签设置不同的样式，会共同作用在标签上
  2. 给同一个标签设置相同的样式，最终写在最后的样式会生效

8.3 优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

!important不能提升继承的优先级，只要是继承优先级最低！

权重叠加计算
在这里插入图片描述
权重叠加计算案例：

  1. 首先判断选择器是否能直接选中标签，如果不能则是继承，优先级最低
  2. 如果可以直接选中，则不是继承，看有没有!important，如果有则该项优先级最高
  3. 都没有情况下通过权重计算公式判断谁的权重最高
<head>
  <style>
    /* (行内, id, 类, 标签) */
    /* (0, 1, 0, 1) 权重最高*/
     div #one {
      
      
      color: orange;
    }
    /* (0, 0, 2, 0) */
    .father .son {
      
      
      color: skyblue;
    }
    /* 0, 0, 1, 1 */
    .father p {
      
      
      color: purple;
    }
    /* 0, 0, 0, 2 */
    div p {
      
      
      color: pink;
    } 
  </style>
</head>
<body>
  <div class="father">
    <p class="son" id="one">我是一个标签</p>
  </div>
</body>

9 盒子模型

便于布局网页元素

    <style>
        /* 纸箱子, 填充泡沫 */
        div {
      
      
            /*盒子宽度和高度，背景颜色，背景图片*/
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url();
            /* 边框线 == 纸箱子 */
            /*border：粗细 样式（solid实线，dashed虚线，电线dotted） 颜色*/
            border: 1px solid #000;
            /*单方向设置：border-top，border-bottom，border-left，border-right，*/
            border-left: 5px dotted #000;
            /* 内边距 == 填充泡沫 : 出现在内容和盒子边缘之间 */
            /*单方向设置：padding-top，padding-bottom，padding-left，padding-right，*/
            padding-top: 20px;
            /* 添加了4个方向的内边距 */
            padding: 20px;
            /* padding 最多取4个值,上，右，下，左的顺序，没有的属性看对面 */
            /* 外边距 : 出现在两个盒子之间, 出现在盒子的外面，四个方位，同上*/
            margin: 50px;
        }
        /*自动清除内外边距*/
        * {
      
      
            margin: 0;
            padding: 0;
            /* 內减模式 */
            box-sizing: border-box;
        }
        /*清除ul前边的小黑点*/
        ul {
      
      
            list-style:none;
        }
        /*清除a自带的下划线*/
        a {
      
      
    		text-decoration: none;
		}
    </style>

tips

  1. 水平布局的盒子，最终距离为左右margin的和
  2. 垂直布局的盒子，最终距离为上下margin的最大值-只设置一个盒子
  3. 互相嵌套的块级元素，子元素的margin-top会作用在父级元素上–给父元素设置overflow:hidden
  4. 给行内元素设置margin和padding时,水平方向的margin和padding布局中有效,垂直方向的margin和padding布局中无效

10.结构伪类

用于查找元素，可以减少对类的依赖，常用于查找父级选择器中的子元素

   <style>
        /* 选中第一个 */
        li:first-child {
      
      
            background-color: green;
        }

        /* 最后一个 */
        li:last-child {
      
      
            background-color: green;
        }

        /* 任意一个 */
        li:nth-child(5) {
      
      
            background-color: green;
        }

        /* 倒数第xx个 */
        li:nth-last-child(1) {
      
      
            background-color: blue;
        }
        /*公式中n从0开始*/
        /* ** 偶数 */
        li:nth-child(2n) {
      
      
            background-color: green;
        }

            /* *** 奇数 */
        li:nth-child(2n+1) {
      
      
            background-color: green;
        }
            /* 找到前3个 */
        li:nth-child(-n+3) {
      
      
            background-color: green;
        }

            /* *** 3的倍数 */
        li:nth-child(3n) {
      
      
            background-color: green;
        }
    </style>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>

11. 伪元素

伪元素是为了创建内容，一般页面中的非主体内容可以使用伪元素
伪元素和元素的区别是元素是在Html当中，而伪元素是写在css当中

  • 伪元素默认是行内元素，设置宽高不生效
  • 必须设置content属性才能生效
<head>
    <style>
        .father::before {
      
      
            /* 在内容之前加入元素 */
            /* content属性必须添加, 否则伪元素不生效 */
            content: '我';
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 默认是行内元素, 宽高不生效 */
            display: block;
        }
         /* 在内容之后加入元素 */
        .father::after {
      
      
            content: '你';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->
    <!-- 找父级, 在这个父级里面创建子级标签 -->
    <div class="father">爱</div>
    /*我爱你*/
</body>

12. 浮动（常用）

==标准流：==又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则
浮动作用：

  1. 文字环绕在图片周围
    <style>
        img {
      
      
            float: left;
        }        
    </style>
  1. 网页布局，让垂直布局的盒子变成水平布局
<head>
    <style>
        div {
      
      
            width: 100px;
            height: 100px;
        }
        .one {
      
      
            background-color: pink;
            float: left;
        }
        .two {
      
      
            background-color: skyblue;
            /* flr */
            /* float: right; */
            float: left;
        }
    </style>
</head>
<body>
    <!-- 2. 网页布局: 块在一行排列 -->
    <div class="one">one</div>
    <div class="two">two</div>
</body>

效果如下：
在这里插入图片描述
浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离，设置浮动之后空格会消失

浮动的特点：

  1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，当设置浮动后，该元素不占位置，后面的元素会补上空位，浮动的标签默认顶对齐，浮动后的标签具备行内块特点。
  2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
  3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
  4. 浮动元素有特殊的显示效果，一行显示多个，同时可以设置宽高
  5. 浮动的元素不能通过text-align:center或者margin:0 auto（浮动优先）
<style>
        .one {
      
      
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            /* margin-top: 50px; */
        }
        .two {
      
      
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* float: left; */
            /* 因为有浮动, 不能生效 - 盒子无法水平居中 */
            /* margin: 0 auto; */
        }
        .three {
      
      
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

第一个粉色盒子设置左浮动之后效果如下：
在这里插入图片描述
再设置第二个蓝色盒子浮动后，效果如下：
在这里插入图片描述
当给第一个盒子设置上边缘内边距后粉色盒子下移
在这里插入图片描述
要想做版心居中的元素，首先要加一个背景盒子，设置居中再加分区的盒子设置浮动

浏览器执行效率更高，css书写顺序：

  1. 浮动 / display
  2. 盒子模型：margin border padding 宽度高度背景色
  3. 文字样式

清除浮动带来的影响：

**浮动的影响：**父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置
网页制作过程中一些常用的布局：
清除方法：

  1. 在父级元素最后添加一个块级元素，给添加的块级元素设置：clear:both
.clearfix {            
       /* 清除左右两侧浮动的影响 */            
       clear: both;        
}
  1. 单伪元素清除法
.clearfix::after {            
        content: '';
        /* 伪元素添加的标签是行内, 要求块 */            
        display: block;           
        clear: both;
        /* 为了兼容性 */            
        height: 0;            
        visibility: hidden;        
}
  1. 双伪元素清除法
         /*  .clearfix::before 作用: 解决外边距塌陷问题*/
         /* 外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置 */        
         /* 清除浮动 */
        .clearfix::before,        
        .clearfix::after {            
	        content: '';            
	        display: table;        
        }
        /* 真正清除浮动的标签 */        
        .clearfix::after {            
	        /* content: '';            
	        display: table; */            
	        clear: both;        
        }
  1. 给父元素设置overflow:hidden

14.定位

三大布局方式：标准流，浮动和定位

定位的作用：

  1. 解决盒子之间的层叠作用
  2. 可以让盒子始终固定在屏幕中的某个位置

定位的属性：position
定位方式：

  • 静态定位-position: static;

  • 相对定位-position: relative;

    • 占有原来的位置
    • 仍然具体标签原有的显示模式特点
    • 改变位置参照自己原来的位置
    • 如果left和right都有, 以left为准; top和bottom都有以top 为准

  • 绝对定位-position: absolute;

    • 脱标, 不占位
    • 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)
    • 先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位
    • 绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位(子绝父相)
    • 绝对定位的盒子不能使用左右margin auto居中
/* 1. 绝对定位的盒子不能使用左右margin auto居中 */
position: absolute;
/* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
left: 50%;
/* 把盒子向左侧移动: 自己宽度的一半 */
margin-left: -150px;
top: 50%;
margin-top: -150px;
/* 位移: 自己宽度高度的一半 */
transform: translate(-50%, -50%);

/* 绝对定位的盒子显示模式具备行内块特点: 加宽度高度生效, 如果没有宽度也没有内容, 盒子的宽度尺寸就是0 */
/* 如果子级和父级的宽度相同,用width: 100%;表示宽度  */
width: 100%;
  • 固定定位-position: fixed;
    • 脱标-不占位置
    • 改变位置参考浏览器窗口
    • 具备行内块特点
        .box {
    
    
            position: fixed;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

偏移值设置：

  • 水平-left/right: px
  • 垂直-top/bottom: px

不同布局方式元素的层级关系：

  1. 标准流<浮动<定位
  2. 相对、绝对、固定默认层级相同
  3. 默认情况下，按照书写顺序后来者居上，除此之外，可以设置z-index:整数，整数默认为0，取值越大，显示顺序越靠上。

15.装饰

15.1 基线

基线：文字排版过程中存在用于对齐的基线，解决行内/行内块元素垂直对齐问题

解决问题1：浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象

解决方案：vertical-align: middle;或者display: block;

解决问题2：图片在盒子中间居中

解决方案：父级添加一个 行高line-height:行高;，然后将图片添加vertical-align:middle;，想让图片水平也居中，再给父级添加上text-align:center;

/*默认基线对齐*/
vertical-align: baseline;
/*顶部对齐*/
vertical-align: top;
/*中部对齐*/
vertical-align: middle;
/*底部对齐*/
vertical-align: bottom;

15.2 光标

默认是箭头

/* 手型，提示用户可以点击 */
cursor: pointer;

/* 工字型, 表示可以选择文字 */
cursor: text;

/* 十字型, 表示用户可以移动 */
cursor: move;

15.3 边框圆角

作用：让盒子四个角变得圆润，增加页面细节，提升用户体验

border-radius: 数字+px/百分比，从左上角开始赋值，顺时针赋值，没有赋值的看对角

border-radius: 10px;
border-radius: 10px 20px 40px 80px;

**正圆：**盒子必须是正方形，设置边框圆角为盒子宽高的一半，border-radius最大值只能取到50%

.one {
    
    
         width: 200px;
         height: 200px;
         background-color: pink;

         /* border-radius: 100px; */
         /* 50% : 取盒子尺寸的一半 */
         border-radius: 50%;
     }

胶囊按钮：盒子为长方形，设置border-radius为盒子高度的一半

/* 胶囊状: 长方形, border-radius取值是高度的一半 */
.two {
    
    
         width: 400px;
         height: 200px;
         background-color: skyblue;
         border-radius: 100px;
     }

15.4 溢出部分显示效果

字体过多，超过盒子的部分显示类型：

/* 默认溢出部分可见 */
overflow: visible;
/* 溢出隐藏，最常用，可以解决外边距塌陷的问题 */
overflow: hidden;
/* 滚动: 无论内容是否超出都显示滚动条的位置 */
overflow: scroll;
/* auto: 根据内容是否超出, 判断是否显示滚动条 */
overflow: auto;

15.5 元素隐藏效果

/* 占位隐藏 */
visibility: hidden;
/* 不占位隐藏 */
display: none;

15.6 元素透明度

/*opacity: 0-1之间的数字*/
opacity: 0.5;

15.7 边框合并

    table {
    
    
      border: 1px solid #000;

      /* 注意: 一定要加给table标签 : 做细线表格 */
      border-collapse: collapse;
    }

15.8 三角形

实现步骤：

  1. 设置一个盒子
  2. 设置四周不同颜色的边框
div {
    
    
            width: 100px;
            height: 100px;
            border-top: 10px solid pink;
            border-right: 10px solid green;
            border-bottom: 10px solid blue;
            border-left: 10px solid orange;
        }

在这里插入图片描述
3. 将盒子宽高设置为0，仅保留边框

        div {
    
    

            width: 0;
            height: 0;
            /* background-color: pink; */
            /* transparent: 透明 */
            border-top: 10px solid pink;
            border-right: 10px solid green;
            border-bottom: 10px solid blue;
            border-left: 10px solid orange;
        }

在这里插入图片描述
4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

        div {
    
    
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid orange;
        }

在这里插入图片描述

15.9 选择器

1.链接伪类选择器

常用于选中超链接的不同状态

/*选中a链接未访问过的状态*/
a:link{
    
     }
/*选中a链接访问之后的状态*/
a:visited{
    
     }
/*选中鼠标悬停的状态*/
a:hover{
    
     }
/*选中鼠标按下的状态*/
a:active{
    
     }

2. 焦点伪类选择器

用于选中元素获取焦点时状态，常用于表单控件

/* 获得焦点的状态 */
/* 获得焦点: 把光标点到input里面; 失去焦点: 把光标从input里面拿出来 */
input:focus {
    
    
            background-color: pink;
        }

3. 属性选择器

通过元素上的HTML属性来选择元素，常用于选择 input 标签

        /* text:背景色是粉色; password背景色是skyblue */
        input[type='text']  {
    
    
            background-color: pink;
        }

        input[type="password"] {
    
    
            background-color: skyblue;
        }

15.10 项目样式补充

1. 精灵图

作用：项目中将多张小图片，合并成一张大图片，这张大图片称为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用步骤：

  1. 创建一个盒子，设置盒子尺寸和小图尺寸相同
  2. 将精灵图设置为盒子的背景图片
  3. 修改背景图位置，通过pxcook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

2.背景图片大小

background-size：宽度 高度； 

/*常用*/
background-size: 300px;
/*相对于当前盒子的宽高百分比*/
background-size: 50%;
/* 如果图的宽或高与盒子的尺寸相同了, 另一个方向停止缩放 -- 导致盒子可能有留白 */
background-size: contain;
/* 保证宽或高和盒子尺寸完全相同 , 导致图片显示不全 */
background-size: cover;
/* 工作中, 图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */

3.文字阴影

作用：能够使用精灵图，能够给元素添加阴影效果 ，能够让元素完成过渡效果

text-shadow: h-shadow v-shadow blur color;
/*h-shadow:水平偏移量，允许负值*/
/*v-shadow:垂直偏移量，允许负值*/
/*blur:模糊度*/
/*color:阴影颜色*/

4.盒子阴影

给盒子添加阴影效果

/* box-shadow:h-shadow v-shadow blur spread color inset;*/
box-shadow: 5px 10px 20px 10px green inset;
/*h-shadow:水平偏移量，允许负值*/
/*v-shadow:垂直偏移量，允许负值*/
/*blur:模糊度*/
/*spread:阴影扩大*/
/*color:阴影颜色*/
/*设置为内部阴影*/

5.过渡

作用：让元素的样式慢慢变化，增强交互效果，常配合hover使用transition: 属性 时间；

        /* 过渡配合hover使用, 谁变化谁加过渡属性 */        
        .box {
    
                
            width: 200px;            
            height: 200px;            
            background-color: pink;           
            /* 宽度200, 悬停的时候宽度600, 花费1秒钟 */            
            /* transition: width 1s, background-color 2s; */
            /* 如果变化的属性多, 直接写all,表示所有 */            
            transition: all 1s;        
         }
        .box:hover {
    
                
            width: 600px;            
            background-color: red;       
         }

15.11 项目前置认知

1.骨架结构标签

/*<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本,DOCTYPE需要写在页面的第一行，不属于HTML标签*/
<!DOCTYPE html>
<!-- zh-CN:中文网站,en:英文-->
<html lang="zh-CN">
<head>    
    <!--charset="UTF-8" 规定网页的字符编码，否则会出现乱码  -->
    <meta charset="UTF-8">
    <!-- ie(兼容性差) / edge -->    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 宽度 = 设备宽度 : 移动端网页的时候要用 -->    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

2.SEO三大标签

作用：搜索引擎优化，让网站在搜索引擎上的排名靠前
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签

<!-- meta:desc -->    
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">    
<!-- meta:kw -->    
<meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">    
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>

3.ico图标设置

显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

4.版心

作用：把页面的主题内容约束在网页中间，让不同大小的屏幕都能看到页面的主体内容版心常用类名：container、wrapper、w

.container {
    
    
  width: 1240px;
  margin: 0 auto;
}

css书写顺序

  1. 布局属性
    display、position、float、clear、visibility、overflow

  2. 盒子模型+背景
    width、height、margin、padding、border、background

  3. 文本内容属性
    color、font、text-decoration、text-align、line-height

  4. 点缀属性
    cursor、border-radius、text-shadow、box-shadow

一般每一个css布局最开始都需要具备的元素：

/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
* {
    
    
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}

li {
    
    
    list-style: none;
}
a {
    
    
    text-decoration: none;
}

.clearfix:before,.clearfix:after {
    
    
    content:"";
    display:table; 
  }
  .clearfix:after {
    
    
    clear:both;
  }

tips：

  1. 网页的主导航;必须是li标签中嵌套a标签，

  2. 谷歌查错工具：
    在这里插入图片描述

  3. PxCook工具
    测量尺寸和颜色,从外到内，先放宽高背景色，再放内容，调节内容的位置，控制文字细节

  4. 背景图位置负责2件事: 改变箭头在盒子里面的位置; 改变精灵图的位置,导致在精灵图中测量的尺寸不准确
    解决方案有2种:

    1. 书写背景图位置属性, 借助谷歌的调试工具调试具体的位置数值
    2. 书写标签的时候, a负责盒子,里面再添加一个span负责箭头

猜你喜欢

转载自blog.csdn.net/qq_45699150/article/details/125096610
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022