​CSS之三

news2024/11/5 16:23:04

 CSS三大特性

CSS 有三个非常重要的三个特性:层圣性、继承性、优先级

层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层曼)另一个冲突的样式。层曼性主要解决样式冲突的问题

层叠性原则:

- 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式

- 样式不冲突,不会层叠

继承性

CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号,简单的理解就是;子承父业,

- 恰当地使用继承可以简化代码,降低C55 样式的复杂性

- 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)

行高的继承性

body {
font:12px/1.5 Microsoft YaHei}

- 行高可以跟单位也可以不跟单位

- 如果子元素没有设置行高,则会继承父元素的行高为1.5

- 此时子元系的行高是:当前子元素的文字大小*1.5

优先级

选择器权重如下表所示

选择器选择器权重
继承 或者*0,0,0,0
元素选择器0.0.0.1
类选择器,伪类选择器0,0,1,0
ID选择器0,1,0,0
行内样式 style=""1,0,0,0
!important 重要的”无穷大

优先级注意点:

1.权重是有4组数字组成,但是不会有进位。

2.可以理解为类选择器永远大于元素选择器 id选择器永远大于类选择器,以此类推.

3.等级判断从左向右,如果某一位数值相同,则判断下一位数值。

4.可以简单记忆法: 通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器 100,行内样式表为1000,!immportant无穷大.

5.继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0.

盒子模型

盒子模型(Box Model)组成

所谓盒了模型:就是把 HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子,封装周围的 HTML元素,它包括:边框、外边距、内边距、和实际内容

边框(border)

border可以设置元素的边框,边框有三部分组成:边框宽度(粗细)边框样式 边框颜色

语法:

border :border-width | border-style | border-color
属性作用
border-width定义边框粗细,单位是px
border-style边框的样式
border-color边框颜色

注:

solid 实线边框 dashed 虚线边框  dotted 点线边框

示例:

<!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 {
            width: 300px;
            height: 200px;
            /* border-width: 5px;
            border-style: solid;
            border-color: pink; */

            /* 复合写法 */
            /* border: 5px solid pink; */
            /* 设置上边框为粉色,其余边框为蓝色 */
            /* 写法一 */
            border-top: 5px solid pink;
            border-bottom: 5px solid blue;
            border-left: 5px solid blue;
            border-right: 5px solid blue;
            /* 写法二 */
            border: 5px solid blue;
            border-top: 5px solid pink;
        }
    </style>
</head>

<body>
    <div></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>
        table,
        th,
        td {
            border: 1px solid pink;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table align="center" width="1000" height="500" cellpadding="20">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

内边距( padding )

padding属性用于设置内边距,即边框与内容之间的距离

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
值的个数表达意思
padding: 5px;1个值,代表上下左右都有5像素内边距;
padding: 5px 10px;2个值,代表上下内边距是5像素 左右内边距是10像素:
padding: 5px 10px 20px;3个值,代表上内边距5像素左右内边距10像素 下内边距20像素;
padding: 5px 10px 20px 30px;4个值,上是5像素 右10像素下20像素 左是30像素 顺时针

案例之新浪导航栏

<!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>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            display: inline-block;
            height: 41px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
            padding: 0 20px;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
    </div>


</body>

</html>

外边距( margin )

margin 属性用于设置外边距,即控制盒子和盒子之间的距离

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距


外边距可以让块级盒子水平居中,但是必须满足两个条件:

盒子必须指定了宽度(width)。

盒子左右的外边距都设置为 auto,

header{ width:960px;margin:0 aute;}

常见的写法,以下三种都可以:

- margin-left: auto; margin-right: auto;

- margin: auto;

- margin: 0 auto;

注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。

嵌套块元素垂直外边距的塌陷

相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top,则他们之间的垂声间距不是margin-bottom与margin-top之和。取两个值中的合并之前较大者这种现象被称为相邻块元素垂直外边距的合井。

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

解决方案:
- 可以为父元素定义上边框。

- 可以为父元素定义上内边距。

- 可以为父元素添加 overflow:hidden

清除内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要消除下网页元素的内外边距

*{
padding:0;/*清除内边距 */
margin:0;/*清除外边距*/
}

注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了 

PS 基本操作

因为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是在 PS 里面完成.

- 文件→打开:可以打开我们要测量的图片

- Ctr+R:可以打开标尺,或者视图→ 标尺

- 右击标尺,把里面的单位改为像素

- Ctrl+ 加号(+)可以放大视图,Ctr+减号(-)可以缩小视图

- 按住空格键,鼠标可以变成小手,拖动PS视图

- 用选区拖动 可以测量大小

- Ctrl+D 可以取消选区,或者在旁边空白处点击一下也可以取消选区

综合案例五之产品模块

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;
        }

        .box img {
            width: 100%;
        }

        .review {
            height: 70px;
            font-size: 14px;
            padding: 0 28px;
            margin-top: 30px;
        }

        .appraise {
            color: #b0b0b0;
            margin-top: 10px;
            padding: 0 28px;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info h4 {
            font-weight: 400;
            display: inline-block;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }

        .info span {
            color: #ff6700;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#"><img src="images/img.jpg" alt="woman" title="woman"></a>
        <a href="#">
            <p class="review">快递牛,整体不错蓝牙可以说秒连。红米给力</p>
        </a>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </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>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #f5f5f5;
        }

        a {
            font-size: 12px;
            text-decoration: none;
            color: black;
        }

        li {
            list-style: none;
        }

        .box {
            height: 163px;
            width: 250px;
            background-color: #fff;
            margin: 100px auto;
        }


        .title h3 {
            font-size: 12px;
            font-weight: 400;
            height: 30px;
            border-bottom: 2px dotted #c3bcbc;
            padding-left: 16px;
            text-decoration: none;
            line-height: 30px;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }

        .box ul {
            margin-top: 7px;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="title">
            <h3>品有购快报</h3>
        </div>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒!</a></li>
            <li><a href="#">【特惠】母亲节,健康好礼低至5折!</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒!</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片!</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2229483.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Generating /run/initramfs/rdsosreport.txt

Linux中遇到Generating /run/initramfs/rdsosreport.txt 第一步&#xff1a;首先输入 ls /dev/mapper 第二步&#xff1a;输入 xfs_repair /dev/mapper/centos-root -L 第三步&#xff1a;重启reboot 不说原因了&#xff0c;直接上解决方式&#xff1a; 第一步&#xff1a;首先…

Spark,Anconda在虚拟机实现本地模式部署

如果想要了解模式的概念部分&#xff0c;以及作用请看&#xff1a; Spark学习-CSDN博客 一.在虚拟机安装spark cd /opt/modules 把Anconda和Spark安装包拖拽进去&#xff1a; 解压&#xff1a; tar -zxf spark-3.1.2-bin-hadoop3.2.tgz -C /opt/installs 重命名&#x…

云原生开源开发者沙龙丨AI 应用工程化专场杭州站邀您参会

云原生开源开发者沙龙 AI 原生应用架构专场&#xff0c;邀您一起交流&#xff0c;探索 AI 原生应用的工程化落地&#xff01; 活动简介 AI 驱动的应用程序开发、部署和运维&#xff0c;给应用带来了新的生命力和想象空间。但大部分开发者对 AI 应用的编程框架、可观测体系、网…

OpenCV基本操作(python开发)——(5)轮廓处理

OpenCV基本操作&#xff08;python开发&#xff09;——&#xff08;1&#xff09; 读取图像、保存图像 OpenCV基本操作&#xff08;python开发&#xff09;——&#xff08;2&#xff09;图像色彩操作 OpenCV基本操作&#xff08;python开发&#xff09;——&#xff08;3&…

常用的查询mysql配置命令

1. 查看数据库版本信息 SELECT VERSION();2. 查看数据库所有变量和值 SHOW VARIABLES3. 查询数据库是否区分大小写 SHOW VARIABLES LIKE lower_case_table_names;查询数据库是否支持大小写lower_case_table_names 被设置为 1&#xff0c;即表名不区分大小写。如果值为 1&…

企业数据泄露安全演练(分享)

该文章主要分享作者在XXX企业内部做的一次【数据泄露安全演练】&#xff0c;涉及演练背景、目的、演练流程、剧本设定、预期行为、结果等等。 以下是完整的演练方案&#xff0c;有不足的地方希望大家指出&#xff01;&#xff01; 需要原版方案电子版的可以联系作者获取。 演练…

品牌控价的执行技巧

在当今竞争激烈的商业世界中&#xff0c;品牌的发展犹如在波涛汹涌的大海中航行&#xff0c;而价格管控&#xff0c;无疑是那保驾护航的关键舵手&#xff0c;简称控价。这一举措&#xff0c;绝非仅仅着眼于品牌自身的狭隘利益&#xff0c;实则肩负着更为深远的使命&#xff0c;…

一文详解精细化工行业持续增长的策略与路径解析

随着全球经济的快速发展和科技的不断进步&#xff0c;精细化工行业正面临着前所未有的挑战和机遇。在这个过程中&#xff0c;数字化转型已成为推动行业持续增长的关键因素。精细化工行业&#xff0c;作为化学工业的一个重要分支&#xff0c;其产品广泛应用于医药、农药、涂料、…

akshare股票涨跌幅自定义范围查询:A股、港股、美股

参看&#xff1a;https://stock.hexun.com/2024-10-31/215251914.html 涨幅计算公式&#xff1a;&#xff08;当前价格 - 上一个交易日收盘价&#xff09; 上一个交易日收盘价 100% 。 跌幅计算公式&#xff1a;&#xff08;上一个交易日收盘价 - 当前价格&#xff09; 上一个…

基于Pycharm和Django模型技术的数据迁移

1.配置数据库 在trip_server/settings.py中修改配置&#xff1a; 其格式可访问官网&#xff1a;Settings | Django documentation | Django 1.1 配置数据库 文件地址&#xff1a;trip_server/settings.py 配置前需要创建&#xff08;NaviCat&#xff09;个人数据库 "…

linux命令行的艺术

文章目录 前言基础日常使用文件及数据处理系统调试单行脚本冷门但有用仅限 OS X 系统仅限 Windows 系统在 Windows 下获取 Unix 工具实用 Windows 命令行工具Cygwin 技巧 更多资源免责声明 熟练使用命令行是一种常常被忽视&#xff0c;或被认为难以掌握的技能&#xff0c;但实际…

C++学习路线(数据库部分)四

表的插入 插入数据记录是常见的数据操作&#xff0c;可以显示向表中增加的新的数据记录。在MySQL中可以通过“INSERT INTO”语句来实现插入数据记录&#xff0c;该SQL语句可以通过如下4种方式使用&#xff1a;插入完整数据记录、插入部分数据记录、插入多条数据记录和插入JSON…

供应商图纸外发:如何做到既安全又高效?

供应商跟合作伙伴、客户之间会涉及到图纸外发的场景&#xff0c;这是一个涉及数据安全、效率及合规性的重要环节。供应商图纸发送流程一般如下&#xff1a; 1.申请与审批 采购人员根据需要提出发放图纸的申请并提交审批&#xff1b; 采购部负责人审批发放申请&#xff0c;确…

代码随想录之链表刷题总结

目录 1.链表理论基础 2.移除链表元素 3.设计链表 4.翻转链表 5.两两交换链表中的节点 6.删除链表中的第N个节点 7.链表相交 8.环形链表 1.链表理论基础 链表是一种通过指针串联在一起的线性结构&#xff0c;每一个节点由两部分组成&#xff0c;一个是数据域一个是指针域…

Notepad++ 插件安装,The plugin package is not found问题

问题&#xff1a; 今天想用自己电脑的Notepad来分析一下几个json文件&#xff0c;后续工作传输都使用json通信&#xff0c;公司装了jsonView插件都没什么问题。自己电脑装了就问题百出&#xff1a; 本人版本&#xff1a; 揣测1&#xff1a; 是不是管理员权限的问题&#xff0c;…

【操作系统】每日 3 题(三)

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12820365.html &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果…

【万兴科技-注册_登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

duilib 进阶 之 TileListBox 列表

目录 一、TileListBox 1、样式 1)、整体列表分列设置 2)、列表项样式设置 3)、选中后出现√号,horver时 出现边框色 的实例 2、代码 1)、普通动态添加列表项 2)、列表项样式中有自定义控件时 3)、获得选中项 一、TileListBox Tile [taɪl] ,瓦片 棋子 Ti…

专线物流公共服务平台:数据驱动,标准引领,共创金融双赢新时代

专线物流公共服务平台&#xff1a;数据驱动&#xff0c;标准引领&#xff0c;共创金融双赢新时代 在当今这个数据驱动、标准引领、金融赋能的经济发展新时代&#xff0c;专线物流作为商贸流通领域的重要一环&#xff0c;正面临着前所未有的机遇与挑战。为应对复杂多变的市场环…

日本Harmonic行星减速机HPG系列 薄壁弹性齿轮技术实现低背隙控制

科技飞速发展&#xff0c;工业领域对于设备的精度和刚性要求越来越高。日本Harmonic Drive Systems 公司凭借其在精密传动领域的深厚积累与不断创新&#xff0c;成功开发出一款具有高精度、高刚性的伺服电机用行星减速机 ——HPG系列&#xff0c;为众多行业带来了全新的精密传动…