前端学习小白打卡3

最新推荐文章于 2024-08-14 12:45:22 发布

白潏

最新推荐文章于 2024-08-14 12:45:22 发布

阅读量52

点赞数

分类专栏：前端文章标签：前端学习 html5 vscode

本文链接：https://blog.csdn.net/qq_65719034/article/details/131628556

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

标签选择器
选中所有的标签以标签命名的选择器
p{} 标签名{css属性名：属性值}类选择器
通过类名找到页面中带有这个类名的标签，设置样式
所有的标签都可以加class
类名只能由数字，字母，下划线，中划线组成，不能哦用数字或中划线开头
一个标签可以有多个类名，类名之间用空格
类名可以重复，一个类选择器可以同时选择多个标签
.类名{css属性名：属性值}
在标签名中加 class="类名”

 <style>
    .red{
            color: blanchedalmond;
        }
 </style>
 <p class="red">1111</p>

 .red{
            color: blanchedalmond;
        }
        .li{
            font-size: 66px;
        }
   <p class="red li">1111</p>

id选择器（配合js加动态）(规定，但不报错)
#id属性值{css属性名：属性值}
作用通过id属性值找到页面中带有id属性值的标签，设置样式
所有的标签都有id属性
id属性值类似于身份证，一个页面中是唯一的，不可重复
一个标签只能有一个id属性值
一个id选择器只能选中与一个标签

通配符选择器
*{css属性名：属性值}
找到页面中所有的标签，设置样式
可以去除标签默认单独margin和padding
内外边距

字体和文本样式

字体样式
字体大小 font-size
数字+px谷歌默认16px
单位要设置不然无效

字体粗细 font-weight
取值：关键字：
正常 normal
加粗 bold
100-900数字整百
正常 400
加粗 700
不是所有字体都提供了九种粗细，因此部分取值页面中无效

字体样式 font-style
正常 normal
倾斜 italic

字体类型 font-family
具体字体：Microsoft YaHei，微软雅黑，黑体，宋体楷体
字体系列 sans-serif（无衬线）网页
serif（衬线） monospace（等宽）

渲染规则
从左往右按照顺序查找，若未安装该字体，则显示下一个
如果都不支持，会显示最后字体系列的默认字体
font-family: 微软雅黑, 黑体,sans-serif;
如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号
网页开发中，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正常显示
win默认微软雅黑 mac默认苹方

样式的层叠问题
一个标签设置了相同的属性，样式会层叠写在最下面的生效
css 叫层叠样式表

字体类型 font属性连写
font ：style weight size family
省略要求：
只能省略前2个，省略了相当于设置了默认值
同时设置了单独和连写
1.把单独的样式写在连写下面
2.把单独的样式写在连写里面

文本样式
属性名：text-indent
取值数字+px
数字+em（1em=当前标签的font-size的大小）一个字的大小
浏览器默认16px，首先缩进2个就是32px

内容水平对齐方式（图也是）
text-align
left 左对齐
center 居中对齐
right 右对齐
可以更改其他标签，需要在父标签中设置

文本修饰
text-decoration
属性值：underline 下划线
line-through 删除线
overline 上划线
none 无装饰线
会用 text-decoration：none ;清楚a标签默认的下划线

行高
控制一行的上下行间距
属性名：line-height
取值数字+px 或倍数（当前font-size的倍数）

让单行文本垂直居中可以设置line-height 文字父元素高度
网页精准布局时，会设置 line-height：1 可以取消上下间距

行高与font连写注意
如果同时设置了行高和font连写注意覆盖问题
font:style weight size/line-height family

行高是上间距+文本高度+下间距

chrome调试工具

颜色取值

属性名：文字颜色 color
背景颜色 background-color
关键词 red、bule，，。
rgb表示 rgb（11,11,11）红绿蓝
rgb表示 rgba（11,11,11,0.5）+a表示透明度取值为0-1
十六进制表示 #ff0000
00 00 00 红绿蓝如果2个数字一样就可以简写 f 0 0

标签水平居中 margin：0 auto
0表示上下间距 auto表示左右
让 div p h（大盒子）水平居中直接给当前元素本身设置即可
一般针对于固定宽度的盒子如果大盒子没有设置宽度会默认占满父元素的宽度

div用来网页布局一个页面可能用多次如果使用div
尽量使用类名控制样式

选择器进阶

复合选择器
后代选择器：空格
根据html标签的嵌套关系，选择父元素后代中满足条件的元素
语法：选择器1 选择器2 {css}
结果：在选择器1所找到的标签的后代（儿子，孙子。。。。）中，找到满足选择器2的标签，设置样式
（要有父子嵌套）
子代选择器：>（只包含儿子）
作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素
语法：选择器1>选择器2{css}
在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

并集选择器
同时选择多组标签，设置相同样式
语法：选择器1，选择器2{css}
结果：找到选择器1和2选中的标签
并集选择器在中的每组选择器可以是基础选择器或复合选择器
，通常每组选择器一行写一个

p,
        div,
        span{
            color: chocolate;
        }

交集选择器
选出同时满足多个选择器的标签
选择器1选择器2{css}
交集选择器之间紧挨，无其他东西隔开，如果有标签选择，标签必须写在前面

hover伪类选择器
作用：选中鼠标悬停在元素上的状态
选择器：hover{css}
任何标签都可以添加，都可以鼠标悬停

Emmet语法
通过简写语法快速生成代码
如：
写div tab键生成<><>
p.box-><p class=“box”></p>
#->id
同级+
div+p-><div><P>
父子>

多个
ul>li{111}*3
ul>li{$)*3 $1 2 3
提示css属性
单词首字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: blanchedalmond;
        }
        .li{
            font-size: 66px;
        }
        .red{
            background-color: aqua;
            color: black;
        }
        *{
            color:blueviolet;
        }
        p{
            font-weight: 700;
            font-style: oblique;
            font-size: larger;
            font-family: 微软雅黑, 黑体,sans-serif;
        }
        p{
            font: 800 italic  16px/2 宋体;
        }
        p{
            text-indent: 2em;
            text-align: center;text-align: center;
            /* line-height: 5; */
            /* 40px */
        }
        body{
            text-align: center;
        }
        img{
            height: 200px;
            /* weight: 200px; */
        }
        a{
            text-decoration: none;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            margin: 0 auto;
        }
        /* div p{
            color: aquamarine;
        } */
        div > p{
            color:blue;
        }
        p,
        div,
        span{
            color: chocolate;
        }
        p.box{
            color: blueviolet;
        }
        a:hover{
            color: black;
            background-color: aquamarine;
        }
        img{

            display: block;
         
        }
    </style>
</head>
<body>
    <p>lllllaA1</p>
    <p class="red li">1111</p>
    <p>1233</p>
    <img src="./1.jpg" alt="">
    <a href="#">空链接</a>
    <div>

        <p>div的儿子p
            <a href="#">kong</a>
        </p>
    </div>
    <p>ppp</p>
    <div>ssss</div>
    <span>dsadas

    </span>
    <p class="box">123123</p>
    <p>1111111111111</p>
    <div class="box"> 12312321</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
        {
            background-color: #f5f5f5;
        }
        .goods{
            width: 234px;
            height: 400px;
            background-color: #fff;
            margin: 0 auto;
            text-align: center;
        }
        img{
            width: 160px;
            height: auto;
        }
        h3{
            color: black;
            font-size: 10px;
            line-height: 25px;            
        }
        .info{
            color: #ccc;
            font-size: 12px;
            line-height: 30px;
        }
        .mon{
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <div class="goods">
        <div>&nbsp;</div>
        <div>&nbsp</div>
        <img src="./1.jpg" alt="">
        <h3>荷花</h3>
        <p class="info">我的眼睛</p>
        <p class="mon">199999999999999999999元</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
        {
            height: 500px;
            width: 400px;
            background-color: pink;
            margin: 0  auto;
        }
        .center{
            text-align: center;
        }
        .color1{
            color: aquamarine;
        }
        .color2{
            color:beige;
        }
        .color3{
            color:black;
        }
        a{
            text-decoration: none;
        }
        .indent{
            text-indent: 2em;
        }       
    </style>
</head>
<body>
    <div >
        <h1 class="center">标题</h1>
        <p class="center">
            <span class="color1">2023年7月9日15:47:51 </span>
            <a href="https://www.baidu.com/" target="_blank" class="color2">百度</a> 
            <a href="#" target="_blank" class="color3">收藏</a>          
        </p>
        <hr>
        <p class="indent">
            让单行文本垂直居中可以设置line-height 文字父元素高度
网页精准布局时，会设置 line-height：1 可以取消上下间距
 </p>
        <p class="indent">
            让单行文本垂直居中可以设置line-height 文字父元素高度
            网页精准布局时，会设置 line-height：1 可以取消上下间距</p>
        <p class="indent">
            让单行文本垂直居中可以设置line-height 文字父元素高度
网页精准布局时，会设置 line-height：1 可以取消上下间距 </p>
    </div>
</body>
</html>

背景相关属性
背景bgc（简写）
背景默认透明

背景图bgi（简写）
属性值url（‘路径’）
如果图小盒子大会自动填图

背景平铺 bgr（填图）
background-repeat
属性值
repeat 默认水平竖直都平铺
no-repeat 不平铺
repeat-x沿x轴方向水平平铺
repeat-y沿y轴方向垂直平铺

背景位置
background-position bgp
第一个水平方向第二个是垂直方向
属性值
1.方位名词
水平（left center right ）
垂直（top center bottom ）
2.数字+px（坐标）
原点（0,0）左上角
x水平向右
y垂直向下

背景相关属性连写
background bg
顺序 background ：color image repeat position 不分顺序（位置如果是英文单词可以交换顺序，数字不行）
如果设置单独的样式和连写，把单独样式写在下面或里面

img（插入图）和背景图的区别
img用于实现重要的图片
背景图用不重要的
背景图是div中background-image

元素标签标记-> <>
常见的元素显示模式有
块级元素
独占一行宽度默认父元素的宽度高度默认由内容撑开
可以设置宽高
div p h ul li dl dt dd form header nav footer

行内元素
一行可以显示多个
宽度和高度默认由内容撑开设置宽高不生效
不可以设置宽高
a span b u i s strong ins em del

行内块元素
一行可以显示多个
可以设置宽高
input textarea buton select
img标签有行内块元素特点但是Chrome调试工具中显示结果是inline

元素显示模式转换
改变元素默认的显示特点，让元素符合布局要求
语法：
属性
放在css里面
display：block 转换成块级元素
display：inline-block 转换成行内块元素
display：inline 转换成行内元素

html嵌套规范
块级元素作为大容器可以嵌套：文本块级元素行内元素行内块元素
但是p标签中不嵌套div p h 等块级元素

a标签内部可以嵌套任意元素但不能嵌套a标签

css特性
继承性
子元素有默认继承父元素样式的特点
文字控制属性都可以继承
color
font-style font-weight font-size font-family
text-indent text-align
line-height

a标签的color会继承失败
h系列标签的font-size会继承失效

层叠性
给同一个标签设置不同的样式样式重叠共同作用
给用一个标签设置相同的样式样式重叠最后的生效
当样式冲突只有选择器优先级相同才能通过层叠判断结果

通过hover实现鼠标悬停

展示不同信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            width: 100px;
            height: 100px;
            background-color:blueviolet;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            /* 下划线不要 */
            color: aquamarine;
            line-height: 100px;
        }
        a:hover{
            color: black;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <a href="#">地址1</a>
    <a href="#">地址2</a>
    <a href="#">地址3</a>
    <a href="#">地址4</a>
    <a href="#">地址5</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         a{
            width: 600px;
            height: 400px;
            font-size: larger;
            
            display: inline-block;
            text-align: center;
            text-decoration: none;
            /* 下划线不要 */
            color: aquamarine;
            line-height: 400px
        }
        .one{
            background-image: url(./_DSC6737-4.jpg);
        }
        .two{
            background-image: url(./_DSC6930-1.jpg);
        }
        .one:hover{
            color: brown;
            background-image: url(./_DSC6930-1.jpg);
        }
        .two:hover{
            color: brown;
            background-image: url(./_DSC6737-4.jpg);
        }
    </style>
</head>
<body>
    <a href="#" class="one">地址1</a>
    <a href="#" class="two">地址2</a>
</body>
</html>