前端web入门-CSS-day04

这篇具有很好参考价值的文章主要介绍了前端web入门-CSS-day04。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

前端web入门-CSS-day04

目录

复合选择器  

后代选择器

子代选择器

并集选择器 

交集选择器 

伪类选择器

伪类-超链接(拓展) 

CSS 特性

继承性 

层叠性

优先级 

优先级 – 叠加计算规则

Emmet 写法 

背景属性 

背景图

背景图平铺方式

背景图位置

背景图缩放

背景图固定

背景复合属性 

显示模式

转换显示模式 


复合选择器  

定义:由两个或多个基础选择器,通过不同的方式组合而成。
作用:更准确、更高效的选择目标元素(标签)。

后代选择器

后代选择器:选中某元素的后代元素。
选择器写法:父选择器 子选择器 { CSS 属性},父子选择器之间用空格隔开。

前端web入门-CSS-day04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器,选中所有后代 */
        div span 
        {
            color: red;
        }
    </style>
</head>
<body>
    <span>span标签</span>
    <div>
        <span>div的儿子</span>
        <p>
            <span>div的孙子</span>
            
        </p>
    </div>
</body>
</html>

网页显示为:                                                                        前端web入门-CSS-day04

子代选择器

子代选择器:选中某元素的子代元素(最近的子级)。
选择器写法:父选择器 > 子选择器 { CSS 属性},父子选择器之间用 > 隔开。

前端web入门-CSS-day04

前端web入门-CSS-day04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div > span 
        {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>div的儿子</span>
        <p>
            <span>div的孙子</span>
            
        </p>
    </div>
</body>
</html>

网页显示为:                                                                       前端web入门-CSS-day04

并集选择器 

并集选择器:选中多组标签设置相同的样式。
选择器写法:选择器1, 选择器2, …, 选择器N { CSS 属性},选择器之间用 , 隔开。

前端web入门-CSS-day04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,p,span
        {
            color: red;
        }
    </style>
</head>
<body>
    <div>111</div>
    <p>222</p>
    <span>333</span>
</body>
</html>

网页显示为:                                                                                       前端web入门-CSS-day04 

交集选择器 

交集选择器:选中同时满足多个条件的元素。

前端web入门-CSS-day04
选择器写法:选择器1选择器2 { CSS 属性},选择器之间连写,没有任何符号。

前端web入门-CSS-day04
注意:如果交集选择器中有标签选择器,标签选择器必须书写在最前面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.a
        {
            color: red;
        }
    </style>
</head>
<body>
    <p class="a">111</p>
    <p>222</p>
    <div class="a">333</div>
</body>
</html>

网页显示为:                                                                                      前端web入门-CSS-day04

伪类选择器

伪类选择器:伪类表示元素状态,选中元素的某个状态设置样式。
鼠标悬停状态:选择器:hover { CSS 属性 }

前端web入门-CSS-day04

伪类-超链接(拓展) 

超链接一共有四个状态

前端web入门-CSS-day04
提示:如果要给超链接设置以上四个状态,需要按 LVHA 的顺序书写 

CSS 特性

CSS特性:化简代码 / 定位问题,并解决问题
• 继承性
• 层叠性
• 优先级

继承性 

继承性:子级默认继承父级的文字控制属性。(选择器选中父级,则父级内部子级全部改变)

注意:如果标签有默认文字样式会继承失败。
例如:a 标签的颜色、标题的字体大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
        {
            color: red;
        }
    </style>
</head>
<body>
    <div>111</div>
    <p>222</p>
    <span>333</span>
    <br>
    <!-- 如果标签自己有样式,则生效自己的样式 -->
    <a href="#">444</a>
</body>
</html>

网页显示为:                                                                                          前端web入门-CSS-day04

层叠性

特点:
• 相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性
• 不同的属性会叠加:不同的 CSS 属性都生效

前端web入门-CSS-day04

注意:选择器类型相同则遵循层叠性,否则按选择器优先级判断。 

优先级 

优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。

规则:选择器优先级高的样式生效。
公式:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
(选中标签的范围越大,优先级越低)前端web入门-CSS-day04

优先级 – 叠加计算规则

叠加计算:如果是复合选择器,则需要权重叠加计算。
公式:(每一级之间不存在进位

(行内样式, id选择器个数, 类选择器个数, 标签选择器个数)
规则:
从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较
• !important 权重最高
• 继承权重最低(如果是继承,即使有!important也没有用

前端web入门-CSS-day04       前端web入门-CSS-day04

Emmet 写法 

Emmet写法:代码的简写方式,输入缩写 VS Code 会自动生成对应的代码。

HTML前端web入门-CSS-day04

 CSS:大多数简写方式为属性单词的首字母

前端web入门-CSS-day04

背景属性 

前端web入门-CSS-day04

背景图

网页中,使用背景图实现装饰性的图片效果。
属性名:background-image(bgi)
属性值:url(背景图 URL)

前端web入门-CSS-day04

提示:背景图默认有平铺(复制)效果。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
        {
            width: 300px;
            height: 300px;
            /* 背景图默认是平铺(复制)的效果 */
            background-image: url(../图片2.jpg);
        }
    </style>
</head>
<body>
    <div>111</div>
</body>
</html>

网页显示为:                                                      前端web入门-CSS-day04

背景图平铺方式

属性名:background-repeat(bgr)
属性值

前端web入门-CSS-day04

前端web入门-CSS-day04

背景图位置

属性名:background-position(bgp)
属性值:水平方向位置 垂直方向位置
• 关键字                       

  前端web入门-CSS-day04

• 坐标(数字 + px,正负都可以)
水平:正数向右;负数向左
垂直:正数向下;负数向上

前端web入门-CSS-day04
提示:
关键字取值方式写法,可以颠倒取值顺序
• 可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方向为居中 

背景图缩放

作用:设置背景图大小
属性名:background-size(bgz)
常用属性值:
• 关键字
cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白
• 百分比:根据盒子尺寸计算图片大小
• 数字 + 单位(例如:px)
提示:工作中,图片比例与盒子比例相同,使用 cover 或 contain 缩放背景图效果相同。

前端web入门-CSS-day04

背景图固定

作用:背景不会随着元素的内容滚动。
属性名:background-attachment(bga)
属性值:fixed

前端web入门-CSS-day04

背景复合属性 

属性名:background(bg)
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值,不区分顺序)

前端web入门-CSS-day04

显示模式

显示模式:标签(元素)的显示方式。
作用:布局网页的时候,根据标签的显示模式选择合适的标签摆放内容。

块级元素
        独占一行
        宽度默认是父级的100%
        添加宽高属性生效     

        前端web入门-CSS-day04              
行内元素
        一行可以显示多个
        设置宽高属性不生效
        宽高尺寸由内容撑开

前端web入门-CSS-day04
行内块元素
        一行可以显示多个
        设置宽高属性生效
        宽高尺寸也可以由内容撑开

前端web入门-CSS-day04

转换显示模式 

属性名:display
属性值:前端web入门-CSS-day04文章来源地址https://www.toymoban.com/news/detail-473862.html

到了这里,关于前端web入门-CSS-day04的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Web前端入门学习】—CSS

    什么是CSS? CSS全名是 Cascading Style Sheets ,中文名:叠层样式表。用于定义网页样式和布局的样式表语言。通过CSS,你可以指定页面中各个元素的字体、大小、间距、边框、背景等样式从而实现更精确的页面设计。 CSS通常由选择器、属性和属性值构成,多个规则可以组合在一

    2024年03月11日
    浏览(46)
  • Java 性能优化 创作不易,觉得好,点赞收藏关注博主!

    Java性能优化主要涉及以下这些方面: 1. 代码级别的优化 避免在循环中创建对象 :使用对象池或缓存来重用对象。 使用基本数据类型和数组 :替代对象以减少内存消耗和提高处理速度。 2. 数据结构和算法的选择 选择合适的数据结构 :根据实际需求选择合适的数据结构,例

    2024年02月01日
    浏览(53)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(69)
  • [前端系列第2弹]CSS入门教程:从零开始学习Web页面的样式和布局

    在这篇文章中,我将介绍CSS的基本概念、语法、选择器、属性和值,以及如何使用它们来定义Web页面的外观和布局。还将给一些简单而实用的例子,可以跟着我一步一步地编写自己的CSS样式表。 目录 一、什么是CSS 二、CSS的语法 三、CSS的选择器 四、CSS的属性和值 (一)颜色

    2024年02月13日
    浏览(59)
  • 40个web前端实战项目,练完即可就业,从入门到进阶,基础到框架,html_css【附视频+源码】

    当下前端开发可以说是一个比较火的职业,所以学习的人比较多,不管是培训还是自学都是希望通过前端可以找到一份好的工作,但是很多自学的朋友在自学过程中有些盲目,不仅大大降低了学习的效率,而且也会打击自己的学习热情。 那么当我们学习了前端的一部分知识之

    2023年04月09日
    浏览(65)
  • WordPress后台底部版权信息“感谢使用 WordPress 进行创作”和版本号怎么修改或删除?

    不知道各位WordPress站长在后台操作时,是否有注意到每一个页面底部左侧都有一个“感谢使用 WordPress 进行创作。”,其中WordPress还是带有nofollow标签的链接;而页面底部右侧都有一个WordPress版本号,如下图中的“6.4.2 版本”。具体如下图红框位置所示: 对于WordPress后台底部

    2024年01月20日
    浏览(53)
  • day04-CSS进阶

    定义:由两个或多个基础选择器,通过不同的方式组合而成。 作用:更准确、更高效的选择目标元素(标签)。 后代选择器 后代选择器: 选中某元素的后代元素 。 选择器写法:父选择器 子选择器 { CSS 属性},父子选择器之间用 空格 隔开。 子代选择器 子代选择器:选中某

    2024年01月25日
    浏览(37)
  • 04-前端基础CSS第二天

    目标: 能使用emmet语法 能够使用CSS复合选择器 能够写出伪类选择器的使用规范 能够说出元素有几种显示模式 能够写出元素显示模式的相互转换代码 能够写出背景图片的设置方式 能够计算CSS的权重 目录: Emmet语法 CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性

    2024年02月08日
    浏览(41)
  • C#从入门到入坟(不易,转载请注明出处)

    安装Visual Studio。 下载地址:https://visualstudio.microsoft.com/zh-hans/ 可以选择社区版本,是可以免费使用的。 下载之后配置安装。 按照自己的工作需要,勾选相应的组件和安装位置,进行安装即可。 目前C#开发的两种框架 运行于windows的.Net Framework 可以跨平台的.Net6 项目名称 建议

    2024年02月05日
    浏览(43)
  • 前端|Day3:CSS基础(黑马笔记)

    层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来 描述 HTML 文档的呈现 ( 美化内容 )。 书写位置: title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码 。 提示:属性名和属性值成对出现 → 键值对。 内部 样式表:学习使用 CSS 代码写在 sty

    2024年02月21日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包