HTML与CSS学习 day5

最新推荐文章于 2024-09-12 18:22:06 发布

只只m

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量84

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_42778611/article/details/114730349

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

伪类选择器
a:link 未访问过的链接
a:visited 访问过的链接
a:hover 鼠标放在链接上会变色
a:active 鼠标点击的链接还未松开

<style>
        a:link {
            color: rgb(0, 0, 0);
            text-decoration: none;
        }
        a:visited {
            color: brown;
        }
       a:hover {
            color: chartreuse;
        }
        a:active {
            color: coral;
        }
    </style>
</head>

<body>
    <a href="#">我是伪类选择器</a>
    <a href="111">我是选择器</a>
</body>

书写方式按照LVHA a:link a:visited a:hover a:active
实际开发中
先给a写一个样式再写a:hover

FOCUS选择器
鼠标放在表单元素上会变相应的样式

 input:focus {
 }

总结

重点记住后代选择器并集选择器伪类选择器
CSS元素显示模式
块元素
1.自己独占一行
2.高度宽度外边距内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子里面可以放行内及块状元素

文字类的元素内不允许放块状元素类如 <p> <h1>~<h6>

行内元素
1.相邻的元素可以在一行上一行可以显示多个
2.宽度高度直接设置是无效的
3.默认宽度就是本身内容的宽度
4.行内元素内只能放文本和其他的行内元素

链接内不允许在放链接
特殊情况<a>里面可以放块级元素但是给a转换一下块级元素更安全

行内块元素
1.和相邻行内块元素在一行时他们之间会留有缝隙一行可以显示多个（行内元素特点）
2.默认宽度就是本身内容的宽度（行内元素特点）
3.高度行高内边距外边距都可以控制（块级元素特点）

<style>
        input {
            width: 249px;
            height: 30px;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">

</body>

总结
元素显示模式转换
行内元素转换为块级元素 display: block;
块级元素转换为行内元素 display: inline;
行内元素转换为行内块元素 display: inline-block;

 <style>
        a {
            width: 300px;
            height: 30px;
            background-color: rgb(224, 21, 21);
            /* 行内元素转换为块级元素 */
            display: block;
        }
        
        div {
            width: 300px;
            height: 50px;
            background-color: rgb(99, 207, 36);
            /* 块级元素转换为行内元素 */
            display: inline;
        }
        
        span {
            width: 300px;
            height: 50px;
            background-color: rgb(15, 105, 223);
            /* 行内元素转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="">咸鱼翻身了</a>
    <a href="">咸鱼翻身了</a>
    <div>咸鱼翻身了</div>
    <div>咸鱼翻身了</div>
    <span>咸鱼翻身了</span>
    <span>咸鱼翻身了</span>

</body>

单行文字垂直居中
line-height=(height的高度)

例如 height=30px 则 line-height=30px 文字就可以实现垂直居中
当 line-height 小于 height的高度 文字位置偏上相反文字位置偏下
在这里插入图片描述

背景颜色
background-color: 颜色值; 默认： transparent（透明色）
背景图片
none 默认值无背景图片

  background-image:none | url(图片);

背景图片平铺
repeat 背景图片平铺默认背景图片平铺
no-repeat 背景图片不平铺
repeat-x 背景图片沿x轴平铺
repeat-y 背景图片沿y轴平铺

 background-repeat: repeat | no-repeat | repeat-x | repeat-y;

页面元素即可以添加背景颜色也可以添加背景图片背景颜色会压住背景颜色

背景位置方位名词

background-position:方位名词
如果是方位名词 top center 和center top效果是一样的跟顺序没有关系
如果只写了一个方位名词第二个则默认水平/垂直居中显示

 div {
            width: 300px;
            height: 300px;
            background-image: url(images/lol.png);
            background-repeat: no-repeat;
            background-color: yellow;
            /* background-position: top center; */
            /* 如果是方位名词 top center 和center top效果是一样的 跟顺序没有关系 */
            /* background-position: center top; */
            /* 如果只写了一个方位名词 第二个则默认 水平/垂直 居中显示 */
            /* right 只能左右移动 水平方位 x轴 则省略的一定是y轴 此时一定 靠右垂直居中 */
            /* background-position: right; */
            /* top 只能上下移动 垂直方位 y轴 则省略的一定是x轴 此时一定 靠上水平居中 */
            background-position: top;
        }

背景位置精确单位
精确单位第一个规定必须是 x 坐标第二个为 y 坐标
如果只写了一个数值则一定是 x 坐标

 background-position: 20px 15px;

背景位置混合单位
混合单位第一个规定必须是 x 坐标第二个为 y 坐标

 background-position: center 15px;

背景图像固定
默认 scroll 跟随对象内容滚动 fixed 图像固定

 background-attachment: fixed | scroll ;

背景复合写法
background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

 background: color url() no-repeat fixed left top;

背景色半透明
最后一个参数是alpha透明度取值在0-1

 background-color: rgba(0, 0, 0, 0.3);

背景总结

只只m

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录